The document discusses the implementation and features of CSS3 in WebKit browsers, highlighting advancements such as selectors, shadows, rounded corners, and multiple backgrounds. It emphasizes the importance of graceful degradation and progressive enhancement, noting compatibility issues with older versions of browsers. Additionally, it covers specific CSS3 functionalities like text shadows, opacity, and transitions, providing examples and resources for further reading.

1. CSS3 for Webkit: Si se puede!Estelle Weylhttp://standardista.comhttp://evotech.net/blog

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

3. Graceful DegradationorProgressive Enhancement

4. Don’t need to be identical

5. Implementable FeaturesCSS3 SelectorsText Shadow (2.0)Box Shadow (prefixed)Rounded Corners (prefixed)@font-face (SVG for Mobile)Alpha TransparencyOpacityRotation

6. Implementable FeaturesMulti-column layoutBorder-imageMultiple background imagesGradientsAnimationsTransitions

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. CSS3 Filter:nth-of-type(n).myClass { background-color: #333333;}.myClass:nth-of-type(1n) { background-color: rgba(0, 0, 0, 0.4);}

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

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

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

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

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

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

16. 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>’);

17. Rounded Corners.rounded { -webkit-border-radius: 3px;}With shorthand, all 4 corners the same. One Value: rounded corners Two Values: elliptical corners

18. Rounded CornersAdds prefix, otherwise syntactically correct-webkit-border-top-left-radius: 15px;-webkit-border-top-right-radius: 10px;-webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 20px;one value: round, 2 values: elliptical

19. @font-faceSafari 3.2+: TTF/OTFChrome: SVG, TTF/OTF since 1/25/10iPhone: 3.1+ supports SVG

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

21. Text ShadowCut 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

22. Text ShadowCut out text.shadowed { text-shadow: 3px 3px 3px rgba(0,0,0,0.4); }filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17); /* for IE6 and IE7 */-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17)"; /* for IE8 */

23. Text Shadowtext-shadow: 5px 4px 3px rgba(0,0,0,0.4);left-offset, top-offset, optional blur radius, color.text-shadow: 5px 5px 5px red, -5px -5px 5px blue;http://www.standardista.com/sandbox/multiple_text_shadow.html

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

25. Rotation-webkit-transform: rotate(-5deg);-webkit-transform: rotate(7deg);rotates as a block, with children

26. Box Shadow-webkit-box-shadow: 3px 3px 3px rgba(0,0,0, 0.4);leftOffsettopOffsetblurRadius color-webkit-box-shadow:inset 3px 3px 3px rgba(0,0,0, 0.4); /* NOT SUPPORTED */http://www.standardista.com/css3/css3-border-properties#bshadow

27. Box Shadow – multiple(Fiery Glow)-webkit-box-shadow: 2px -5px 4px 1px rgba(255, 255, 48, 0.5), 5px -10px 6px 3px rgba(255, 224, 48, 0.5), 7px -15px 11px 5px rgba(240, 128, 0, 0.4), 12px -25px 18px 7px rgba(200, 0, 0, 0.3),

28. columns-moz-column-count: 3;column-count, column-fill, column-gap,column-span, column-width, columnscolumn-rule: column-rule-color column-rule-style column-rule-widthhttp://www.standardista.com/css3/css3-columns-browser-supporthttp://www.evotech.net/sandbox/

29. Multiple Background Images.myDiv { background-image: url(img1.jpg), url(img2.jpg), url(img3.jpg); background-position: 0 0, 100% 100%, 18px 27px; background-repeat: no-repeat;}Supported since safari 1.3.

30. Border-imageBorder-image generatorShorthand is supported in Webkit, none of the longhand properties that make up the short hand property are.

31. Thanks.Estelle WeylTwitter: estellevwBlog: http://www.standardista.comhttp://evotech.net/blog

32. HTML5 Video (HTML5)Canvas / SVGWeb Forms: placeholder, input types=email, url, phone