CSS3 Tips & Techniques

CSS3 Tips & Techniques Stephanie (Sullivan) Rewis @stefsull September 15, 2011 | Register at www.uie.com

Don’t go overboard!

Practical pseudo-classes:target -‐ allows you to style an element that is the target of a fragment ID in the URL

Trigger transitions with more than :hovertextarea { height: 20px; -‐webkit-‐transi<on: height .5s, border .5s; -‐moz-‐transi<on: height .5s, border .5s; -‐o-‐transi<on: height .5s, border .5s; transi<on: height .5s, border .5s;}textarea:focus { outline: 0; height: 250px; border: rgba(72, 107, 11, .7) 9px solid; -‐webkit-‐border-‐radius: 6px; -‐moz-‐border-‐radius: 6px; border-‐radius: 6px; }

Pseudo-elements for StylePseudo-‐elements (::before & ::a4er) aren’t just for genera9ng text. These extra wrappers, uneven shadows, double bordered buBons, digital 9mer halves and gradient overlays are created with pseudo-‐elements.

Beyond simple rounded cornersComplete circle:Width and height are equalRadius equals half of width/heightIf padding is used—add full paddingUse em units if circle contains text.reminder { height: 9em; width: 9em; padding: 2em; -‐webkit-‐border-‐radius: 6.5em; -‐moz-‐border-‐radius: 6.5em -‐border-‐radius: 6.5em;}

border-image, background-clip.nav a { -‐webkit-‐transform: rotate(10deg); -‐moz-‐transform: rotate(10deg); -‐ms-‐transform: rotate(10deg); -‐o-‐transform: rotate(10deg); transform: rotate(10deg); border-‐width: 8px; -‐webkit-‐border-‐image: url(../img/nav.png) 8 stretch; -‐moz-‐border-‐image: url(../img/nav.png) 8 stretch; -‐o-‐border-‐image: url(../img/nav.png) 8 stretch; border-‐image: url(../img/nav.png) 8 stretch; background-‐color: #FEFCFB; padding: 3px 5px; -‐webkit-‐background-‐clip: padding-‐box; -‐moz-‐background-‐clip: padding; background-‐clip: padding-‐box;}

Backgrounds CombinedBackground-‐image Gradient Background-‐color Background-‐image (boBom, center, contain)

CSS3 Tips & Techniques Stephanie (Sullivan) Rewis @stefsull September 15, 2011 | Register at www.uie.com

http://www.uie.com	2606
http://eedev.uie.com	77
http://www.webinarlistings.com	27
http://aycl.uie.com	13
http://uie.com	10
http://uie.dev	5
http://stage.uie.com	4
http://stg.uie.com	2
http://10.0.0.138	2
http://a0.twimg.com	1
http://paper.li	1
http://dev.uie.com	1

CSS3 Tips & Techniques

by UIEpreviews

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 2,749

Statistics

CSS3 Tips & Techniques Webinar Transcript