Reply to thread

Message

<blockquote data-quote="Markshall" data-source="post: 404215" data-attributes="member: 1872">Nice. Are the designs original or are they designs that you've found and decided to code up?A few pointers, where you've done[code].timer .days-wrapper,.timer .hours-wrapper,.timer .minutes-wrapper,.timer .seconds-wrapper { /*styles here*/ }[/code]You can cheat and do it like this[code].timer [class$=&quot;-wrapper&quot;] { /*styles here*/ }[/code]This will select any element whose class ends in &quot;-wrapper&quot; within the timer div. You can even specify which types of elements too[code].timer div[class$=&quot;-wrapper&quot;] { /*styles here*/ }[/code]So if you've got multiple types of elements (div, span, img, etc) whose class may end in &quot;-wrapper&quot;, this will only select the divs that end in &quot;-wrapper&quot;After seeing that, it probably won't surprise you to learn that you can apply pseudo classes to them[code].timer div[class$=&quot;-wrapper&quot;]:hover { /*styles here*/ }[/code]Another thing, I noticed you were using vendor-prefixes for box-shadow, border-radius and transition. This is no longer required. These CSS features are now supported by all major browsers.<a href="http://caniuse.com/#search=box-shadow" target="_blank">http://caniuse.com/#search=box-shadow</a><a href="http://caniuse.com/#search=border-radius" target="_blank">http://caniuse.com/#search=border-radius</a><a href="http://caniuse.com/#search=transition" target="_blank">http://caniuse.com/#search=transition</a>It would have been nice to get a finished preview at the end though, I feel cheated <img src="/styles/default/xenforo/smilies/emojione/frown.png"&nbsp; class="smilie" loading="lazy" alt=":(" title="Frown&nbsp; &nbsp; :(" data-shortname=":(" /></blockquote>

[QUOTE="Markshall, post: 404215, member: 1872"] Nice. Are the designs original or are they designs that you've found and decided to code up? A few pointers, where you've done [code].timer .days-wrapper, .timer .hours-wrapper, .timer .minutes-wrapper, .timer .seconds-wrapper { /*styles here*/ }[/code] You can cheat and do it like this [code].timer [class$="-wrapper"] { /*styles here*/ }[/code] This will select any element whose class ends in "[FONT=Courier New]-wrapper[/FONT]" within the [FONT=Courier New]timer[/FONT] div. You can even specify which types of elements too [code].timer div[class$="-wrapper"] { /*styles here*/ }[/code] So if you've got multiple types of elements ([FONT=Courier New]div[/FONT], [FONT=Courier New]span[/FONT], [FONT=Courier New]img[/FONT], etc) whose class may end in "[FONT=Courier New]-wrapper[/FONT]", this will only select the divs that end in "[FONT=Courier New]-wrapper[/FONT]" After seeing that, it probably won't surprise you to learn that you can apply pseudo classes to them [code].timer div[class$="-wrapper"]:hover { /*styles here*/ }[/code] Another thing, I noticed you were using vendor-prefixes for box-shadow, border-radius and transition. This is no longer required. These CSS features are now supported by all major browsers. [URL]http://caniuse.com/#search=box-shadow[/URL] [URL]http://caniuse.com/#search=border-radius[/URL] [URL]http://caniuse.com/#search=transition[/URL] It would have been nice to get a finished preview at the end though, I feel cheated :( [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members