Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS3 Implementable Features

2,718 views

Published on

There are several features of CSS3 that are implementable today. In this presentation we discuss CSS3 Selectors, Text Shadows, Box Shadow, Rounded Corners (prefixed), @font-face, Alpha Transparency, Opacity, Rotation

Published in: Technology

CSS3 Implementable Features

  1. 1. CSS3: Si se puede<br />Estelle Weyl<br />http://standardista.com<br />http://evotech.net/blog<br />
  2. 2. CSS2.1<br />Since 1999, but only fully supported in IE8<br />
  3. 3. Graceful DegradationorProgressive Enhancement<br />
  4. 4. Don’t need to be identical<br />
  5. 5. Implementable Features<br />CSS3 Selectors.<br />Text Shadow (2.0).<br />Box Shadow (prefixed)<br />Rounded Corners (prefixed).<br />@font-face<br />Alpha Transparency.<br />Opacity.<br />Rotation.<br />
  6. 6. Implementable Features?<br />Multi-column layout<br /> Video (HTML5)<br />Animations<br />Transitions<br />Border-image<br />Multiple background images<br />
  7. 7. CSS3 Selectors<br />:nth-of-type()<br />tr:nth-of-type(even) td{<br /> background-color: #dedede;<br />}<br />http://www.standardista.com/sandbox/nthoftype.html<br />
  8. 8. CSS3 Selectors<br />:nth-of-type()<br />tr:nth-of-type(even) td, tr.even td{<br /> background-color: #dedede;<br />}<br />$(‘tr:nth-of-type(even)’).addClass(‘evenrow’)<br />
  9. 9. Alpha Tranparency<br />rbga( red, green, blue, opacity);<br />.blackfilter{<br /> background-color: rgba(0,0,0,0.4);<br />}<br />http://www.standardista.com/articles/rgba.html<br />
  10. 10. Alpha Tranparency<br />.blackfilter{<br />background:transparent;<br />filter:progid:DXImageTransform.Microsoft.gradient( <br />startColorstr=#99000000,endColorstr=#99000000);<br /> zoom: 1;<br /> background-color: rgba(0,0,0,0.4);<br />}<br />
  11. 11. Opacity<br />Doesn’t have the impact you intended<br />.halfthere { opacity: 0.4;}<br />http://www.standardista.com/articles/rgba_notopacity.html<br />
  12. 12. Opacity<br />Doesn’t have the impact you intended<br />.halfthere { opacity: 0.4; filter: alpha(opacity=0.4)}<br />http://www.standardista.com/articles/rgba_notopacity.html<br />
  13. 13. Opacity<br />Doesn’t have the impact you intended<br />.halfthere { opacity: 0.4; filter: alpha(opacity=0.4)}<br />Coming in Opera 10<br />http://www.standardista.com/articles/rgba_notopacity.html<br />
  14. 14. Rounded Corners<br />.rounded { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}<br />Order: topleft, topright, bottomright, bottomleft.<br />
  15. 15. Rounded Corners<br />.rounded { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}<br />$(‘.rounded’).append(‘<b class=“tr”></b> <b class=“tl”></b><b class=“br”></b> <b class=“bl”></b>’);<br />
  16. 16. Rounded Corners<br />.rounded { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}<br />Coming in Opera 10<br />
  17. 17. Text Shadow<br />.shadowed { text-shadow: 3px 3px 3px rgba(0,0,0,0.4);}<br />leftOffsetrightOffset blur Color<br />
  18. 18. Text Shadow<br />Cut out text<br />.shadowed { color: #CCCCCC; text-shadow: 3px 3px 3px rgba(0,0,0,0.4); color: rgba(255,255,255,1)}<br />http://www.standardista.com/articles/text_shadow.html<br />
  19. 19. Rotation<br />-webkit-transform: rotate(90deg); <br />-moz-transform: rotate(90deg);<br />filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);<br /> 1=90, 2=180, 3=270<br />http://standardista.com/sandbox/rotation.html<br />
  20. 20. Thanks.<br />Estelle Weyl<br />Twitter: estellevw<br />Blog: http://www.standardista.com<br />http://evotech.net/blog<br />

×