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

1. CSS3: Si se puede Estelle Weyl http://standardista.com http://evotech.net/blog

2. CSS2.1 Since 1999, but only fully supported in IE8

3. Graceful DegradationorProgressive Enhancement

4. Don’t need to be identical

5. Implementable Features CSS3 Selectors. Text Shadow (2.0). Box Shadow (prefixed) Rounded Corners (prefixed). @font-face Alpha Transparency. Opacity. Rotation.

6. Implementable Features? Multi-column layout Video (HTML5) Animations Transitions Border-image Multiple background images

7. CSS3 Selectors :nth-of-type() tr:nth-of-type(even) td{ background-color: #dedede; } http://www.standardista.com/sandbox/nthoftype.html

8. CSS3 Selectors :nth-of-type() tr:nth-of-type(even) td, tr.even td{ background-color: #dedede; } $(‘tr:nth-of-type(even)’).addClass(‘evenrow’)

9. Alpha Tranparency rbga( red, green, blue, opacity); .blackfilter{ background-color: rgba(0,0,0,0.4); } http://www.standardista.com/articles/rgba.html

10. Alpha Tranparency .blackfilter{ background:transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#99000000,endColorstr=#99000000); zoom: 1; background-color: rgba(0,0,0,0.4); }

11. Opacity Doesn’t have the impact you intended .halfthere { opacity: 0.4;} http://www.standardista.com/articles/rgba_notopacity.html

12. Opacity Doesn’t have the impact you intended .halfthere { opacity: 0.4; filter: alpha(opacity=0.4)} http://www.standardista.com/articles/rgba_notopacity.html

13. Opacity Doesn’t have the impact you intended .halfthere { opacity: 0.4; filter: alpha(opacity=0.4)} Coming in Opera 10 http://www.standardista.com/articles/rgba_notopacity.html

14. Rounded Corners .rounded { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;} Order: topleft, topright, bottomright, bottomleft.

15. Rounded Corners .rounded { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;} $(‘.rounded’).append(‘<b class=“tr”></b> <b class=“tl”></b><b class=“br”></b> <b class=“bl”></b>’);

16. Rounded Corners .rounded { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;} Coming in Opera 10

17. Text Shadow .shadowed { text-shadow: 3px 3px 3px rgba(0,0,0,0.4);} leftOffsetrightOffset blur Color

18. Text Shadow Cut out text .shadowed { color: #CCCCCC; text-shadow: 3px 3px 3px rgba(0,0,0,0.4); color: rgba(255,255,255,1)} http://www.standardista.com/articles/text_shadow.html

19. Rotation -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 1=90, 2=180, 3=270 http://standardista.com/sandbox/rotation.html

20. Thanks. Estelle Weyl Twitter: estellevw Blog: http://www.standardista.com http://evotech.net/blog