Internet Explorer may be holding you back on the desktop, but don't let that stop you from creating kick ass web apps on webkit mobile devices. In this session we'll cover support of CSS3 in webkit. Learn how to use CSS3 to create fabulous looking web apps without the use (or with minimal use) of images.

1. CSS3 for Webkit: 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 (SVG for Mobile) Alpha Transparency Opacity Rotation

6. Implementable Features Multi-column layout Border-image Multiple background images Gradients Animations Transitions

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 Tranparency rbga( 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. Opacity Doesn’t have the impact you intended .halfthere { 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)} http://www.standardista.com/articles/rgba_notopacity.html

14. 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

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 Corners Adds 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-face Safari 3.2+: TTF/OTF Chrome: SVG, TTF/OTF since 1/25/10 iPhone: 3.1+ supports SVG

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

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

22. Text Shadow Cut 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 Shadow text-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=270 http://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, columns column-rule: column-rule-color column-rule-style column-rule-width http://www.standardista.com/css3/css3-columns-browser-support http://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-image Border-image generatorShorthand is supported in Webkit, none of the longhand properties that make up the short hand property are.

31. Thanks. Estelle Weyl Twitter: estellevw Blog: http://www.standardista.comhttp://evotech.net/blog

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