• Save
CSS3 For WebKit: iPadDevCamp Presentation
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

CSS3 For WebKit: iPadDevCamp Presentation

  • 4,955 views
Uploaded 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......

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,955
On Slideshare
4,919
From Embeds
36
Number of Embeds
6

Actions

Shares
Downloads
0
Comments
0
Likes
9

Embeds 36

http://onwebdev.blogspot.com 14
http://www.slideshare.net 13
http://test1.inceptum.eu 5
http://seankean.us 2
http://seankean.posterous.com 1
http://blog.gabrieleromanato.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • History of support of CSS, and why it’s ok to move forward
  • Accessibilityv. ie6 looking ok
  • Show twitter
  • standardista

Transcript

  • 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