More Related Content Similar to CSS3 For WebKit: iPadDevCamp Presentation (20) CSS3 For WebKit: iPadDevCamp Presentation1. CSS3 for Webkit: Si se puede! Estelle Weyl http://standardista.com http://evotech.net/blog 5. Implementable Features CSS3 Selectors Text Shadow (2.0) Box Shadow (prefixed) Rounded Corners (prefixed) @font-face (SVG for Mobile) Alpha Transparency Opacity Rotation 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 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 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. 31. Thanks. Estelle Weyl Twitter: estellevw Blog: http://www.standardista.comhttp://evotech.net/blog Editor's Notes History of support of CSS, and why it’s ok to move forward Accessibilityv. ie6 looking ok Show twitter standardista