CSS3 for Webkit: Si se puede!<br />Estelle Weyl<br />http://standardista.com<br />http://evotech.net/blog<br />
CSS2.1<br />Since 1999, but only fully supported in IE8<br />
Graceful DegradationorProgressive Enhancement<br />
Don’t need to be identical<br />
Implementable Features<br />CSS3 Selectors<br />Text Shadow (2.0)<br />Box Shadow (prefixed)<br />Rounded Corners (prefixe...
Implementable Features<br />Multi-column layout<br />Border-image<br />Multiple background images<br />Gradients<br />Anim...
CSS3 Selectors<br />:nth-of-type()<br />tr:nth-of-type(even) td{<br />   background-color: #dedede;<br />}<br />http://www...
CSS3 Selectors<br />:nth-of-type()<br />tr:nth-of-type(even) td, tr.even td{<br />   background-color: #dedede;<br />}<br ...
CSS3 Filter<br />:nth-of-type(n)<br />.myClass {<br />	background-color: #333333;}<br />.myClass:nth-of-type(1n) {<br />  ...
Alpha Tranparency<br />rbga( red, green, blue, opacity);<br />.blackfilter{<br />   background-color: rgba(0,0,0,0.4);<br ...
Alpha Tranparency<br />.blackfilter{<br />background:transparent;<br />filter:progid:DXImageTransform.Microsoft.gradient( ...
Opacity<br />Doesn’t have the impact you intended<br />.halfthere {     opacity: 0.4;}<br />http://www.standardista.com/ar...
Opacity<br />Doesn’t have the impact you intended<br />.halfthere {     opacity: 0.4;     filter: alpha(opacity=0.4)}<br /...
Opacity<br />Doesn’t have the impact you intended<br />.halfthere {     opacity: 0.4;     filter: alpha(opacity=0.4)}<br /...
Rounded Corners<br />.rounded {    -moz-border-radius: 3px;    -webkit-border-radius: 3px;    border-radius: 3px;}<br />Or...
Rounded Corners<br />.rounded {    -moz-border-radius: 3px;    -webkit-border-radius: 3px;    border-radius: 3px;}<br />$(...
Rounded Corners<br />.rounded {    -webkit-border-radius: 3px;}<br />With shorthand, all 4 corners the same.    One Value:...
Rounded Corners<br />Adds prefix, otherwise syntactically correct-webkit-border-top-left-radius: 15px;-webkit-border-top-r...
@font-face<br />Safari 3.2+: TTF/OTF<br />Chrome: SVG, TTF/OTF since 1/25/10<br />iPhone: 3.1+ supports SVG<br />
Text Shadow<br />.shadowed {  text-shadow: 3px 3px 3px rgba(0,0,0,0.4);}<br />leftOffsetrightOffset blur color<br />
Text Shadow<br />Cut out text<br />.shadowed {  color: #CCCCCC;  text-shadow: 3px 3px 3px rgba(0,0,0,0.4);  color: rgba(25...
Text Shadow<br />Cut out text<br />.shadowed {  text-shadow: 3px 3px 3px rgba(0,0,0,0.4); }<br />filter: progid:DXImageTra...
Text Shadow<br />text-shadow: 5px 4px 3px rgba(0,0,0,0.4);left-offset, top-offset, optional blur radius, color.text-shadow...
Rotation<br />-webkit-transform: rotate(90deg); <br />-moz-transform: rotate(90deg);<br />filter: progid:DXImageTransform....
Rotation<br />-webkit-transform: rotate(-5deg);<br />-webkit-transform: rotate(7deg);rotates as a block, with children<br />
Box Shadow<br />-webkit-box-shadow: 3px 3px 3px rgba(0,0,0, 0.4);<br />leftOffsettopOffsetblurRadius color<br />-webkit-bo...
Box Shadow – multiple(Fiery Glow)<br />-webkit-box-shadow:         2px  -5px  4px 1px rgba(255, 255, 48, 0.5),            ...
columns<br />-moz-column-count: 3;<br />column-count, column-fill, column-gap,column-span, column-width, columns<br />colu...
Multiple Background Images<br />.myDiv { background-image: url(img1.jpg), url(img2.jpg), url(img3.jpg);<br />   background...
Border-image<br />Border-image generatorShorthand is supported in Webkit, none of the longhand properties that make up the...
Thanks.<br />Estelle Weyl<br />Twitter: estellevw<br />Blog: http://www.standardista.comhttp://evotech.net/blog<br />
HTML5	<br />Video (HTML5)<br />Canvas / SVG<br />Web Forms: placeholder, input types=email, url, phone<br />
Upcoming SlideShare
Loading in …5
×

CSS3 For WebKit: iPadDevCamp Presentation

4,126 views
4,018 views

Published on

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.

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,126
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
0
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide
  • History of support of CSS, and why it’s ok to move forward
  • Accessibilityv. ie6 looking ok
  • Show twitter
  • standardista
  • CSS3 For WebKit: iPadDevCamp Presentation

    1. 1. CSS3 for Webkit: 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 (SVG for Mobile)<br />Alpha Transparency<br />Opacity<br />Rotation<br />
    6. 6. Implementable Features<br />Multi-column layout<br />Border-image<br />Multiple background images<br />Gradients<br />Animations<br />Transitions<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. CSS3 Filter<br />:nth-of-type(n)<br />.myClass {<br /> background-color: #333333;}<br />.myClass:nth-of-type(1n) {<br /> background-color: rgba(0, 0, 0, 0.4);<br />}<br />
    10. 10. 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 />
    11. 11. 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 />
    12. 12. Opacity<br />Doesn’t have the impact you intended<br />.halfthere { 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 />http://www.standardista.com/articles/rgba_notopacity.html<br />
    14. 14. 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 />
    15. 15. Rounded Corners<br />.rounded { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}<br />Order: topleft, topright, bottomright, bottomleft.<br />
    16. 16. 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 />
    17. 17. Rounded Corners<br />.rounded { -webkit-border-radius: 3px;}<br />With shorthand, all 4 corners the same. One Value: rounded corners Two Values: elliptical corners<br />
    18. 18. Rounded Corners<br />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<br />
    19. 19. @font-face<br />Safari 3.2+: TTF/OTF<br />Chrome: SVG, TTF/OTF since 1/25/10<br />iPhone: 3.1+ supports SVG<br />
    20. 20. Text Shadow<br />.shadowed { text-shadow: 3px 3px 3px rgba(0,0,0,0.4);}<br />leftOffsetrightOffset blur color<br />
    21. 21. 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 />
    22. 22. Text Shadow<br />Cut out text<br />.shadowed { text-shadow: 3px 3px 3px rgba(0,0,0,0.4); }<br />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 */ <br />
    23. 23. Text Shadow<br />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;<br />http://www.standardista.com/sandbox/multiple_text_shadow.html<br />
    24. 24. 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 />
    25. 25. Rotation<br />-webkit-transform: rotate(-5deg);<br />-webkit-transform: rotate(7deg);rotates as a block, with children<br />
    26. 26. Box Shadow<br />-webkit-box-shadow: 3px 3px 3px rgba(0,0,0, 0.4);<br />leftOffsettopOffsetblurRadius color<br />-webkit-box-shadow:inset 3px 3px 3px rgba(0,0,0, 0.4); /* NOT SUPPORTED */<br />http://www.standardista.com/css3/css3-border-properties#bshadow<br />
    27. 27. Box Shadow – multiple(Fiery Glow)<br />-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),<br />
    28. 28. columns<br />-moz-column-count: 3;<br />column-count, column-fill, column-gap,column-span, column-width, columns<br />column-rule: column-rule-color column-rule-style column-rule-width<br />http://www.standardista.com/css3/css3-columns-browser-support<br />http://www.evotech.net/sandbox/<br />
    29. 29. Multiple Background Images<br />.myDiv { background-image: url(img1.jpg), url(img2.jpg), url(img3.jpg);<br /> background-position: 0 0, 100% 100%, 18px 27px; <br /> background-repeat: no-repeat;<br />}<br />Supported since safari 1.3.<br />
    30. 30. Border-image<br />Border-image generatorShorthand is supported in Webkit, none of the longhand properties that make up the short hand property are.<br />
    31. 31. Thanks.<br />Estelle Weyl<br />Twitter: estellevw<br />Blog: http://www.standardista.comhttp://evotech.net/blog<br />
    32. 32. HTML5 <br />Video (HTML5)<br />Canvas / SVG<br />Web Forms: placeholder, input types=email, url, phone<br />

    ×