CSS3 FOR ADVANCED DESIGN
Paul Trani, Adobe Evangelist
Paul Trani
@paultrani ptrani@adobe.com
• 15 years design experience
• 4 year old at heart
The power of the web has arrived for mobile phones
and tablets. CSS3 gives web sites a dynamic,
interactive capability and...
Examples
• www.awwwards.com
• Letter Heads
• Cursor Monster
• Fish Burst Game
BENEFITS OF CSS3
Reduced development and maintenance time
• Less images, Flash, JavaScript
• Streamlined markup
Increased page performance
• Smaller file sizes
• Fewer HTTP requests
“Reducing the number of HTTP requests…is the most im...
Better search engine placement
• Google uses speed as ranking factor
• Real text instead of image or Flash text
Increased usability
• Real text
• Optimized styles based on device capabilities
BROWSER SUPPORT
Progressive Enhancement
• Deliver the best possible experience to the widest
possible audience.
• Should be as fully featu...
http://www.w3.org/TR/CSS/
www.w3.org/Style/CSS/current-work
Use the parts of CSS3 that:
• have generally stable syntax
• have good support
• don't harm non-supporting browsers by the...
CREATIVE CSS3
• RGBa & HSLa
• Gradients
• Rounded Corners
• Box Shadow
• Multiple Backgrounds
• @font-face
• Media Queries
• Visual Effe...
COLOR
• RGBa (255, 255, 255, 0.5);
• HSLa (360, 100%, 50%, 0.5);
Gradients
• Can be used in every place you can use an image
• background: linear-gradient(white, black);
• Prefixes:
– -we...
border-radius
border-radius: 10px;
box-shadow
box-shadow (horizontal offset,
vertical offset,
optional blur distance,
optional distance,
optional color,
opti...
text-shadow
@ font-face
MEDIA QUERIES
CSS Media Queries for Mobile
• min-width
• max-width
• device-width
• min-device-width
• max-device-width
• orientation
• ...
CSS Media Queries
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="mobile.css" />
TRANSFORMS
Transforms – You can transform anything!
opacity: 0.5;
-webkit-transition-property: opacity;
-webkit-transition-duration: ...
WHAT’S NEXT
http://lab.simurai.com/css/tilt-shift
Adobe Edge
THANK YOU
• Slides posted at www.paultrani.com
• Flexible Web Design www.flexiblewebbook.com
• Stunning CSS3 www.stunningcss3.com
• ...
Css3 paul trani
Css3 paul trani
Upcoming SlideShare
Loading in …5
×

Css3 paul trani

824 views

Published on

Advance CSS3

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
824
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • http://developer.yahoo.com/performance/rules.html
  • Delight the user with what’s available, and not moan about what isn’t or make the experience terrible for those without.
  • Modify header.
    We have long had the opacity property, which is similar, but opacity forces all decendant elements to also become transparent and there is no way to fight it (except weird positional hacks <http://css-tricks.com/non-transparent-elements-inside-transparent-elements/> ) Cross-browser opacity <http://css-tricks.com/css-transparency-settings-for-all-broswers/>  is also a bit sloppy.

    http://24ways.org, http://css-tricks.com/text-blocks-over-image, www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html

    Hue is derived from a degree on the color wheel: 0 & 360 being red, around 120 for the greens, 240 for the blues and everything else in between Saturation is a percentage: 0% being grayscale and 100% in full color Lightness is a percentage: 0% is dark, 50% the average and 100% the lightest
  • www.blueskyresumes.com, http://blog.gesteves.com, http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html

    http://designindevelopment.com/demos/grooveshark, www.broken-links.com/tests/studio_effect, www.yummly.com, http://nimbupani.com/sexy-css3-buttons.html


  • www.blueskyresumes.com, http://blog.gesteves.com, http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html
  • www.fredssoldater.se, http://chris-armstrong.com, http://girliemac.com/sandbox/button.html, http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box-shadow

    http://mothereffingtextshadow.com/
  • http://desandro.com, http://chunkytheme.tumblr.com, http://safe.tumblr.com/theme/preview/5932, http://sixrevisions.com/css/how-to-create-inset-typography-with-css3, , www.time2project.com
  • www.blueskyresumes.com, www.jasonsantamaria.com, http://lostworldsfairs.com/atlantis, www.fredssoldater.se
  • http://butterlabel.com, http://forabeautifulweb.com, http://girliemac.com/sandbox/dock.html, http://lab.simurai.com/css/tilt-shift
    http://www.paulrhayes.com/experiments/cube-3d/
  • http://butterlabel.com, http://forabeautifulweb.com, http://girliemac.com/sandbox/dock.html, http://lab.simurai.com/css/tilt-shift
  • Css3 paul trani

    1. 1. CSS3 FOR ADVANCED DESIGN Paul Trani, Adobe Evangelist
    2. 2. Paul Trani @paultrani ptrani@adobe.com • 15 years design experience • 4 year old at heart
    3. 3. The power of the web has arrived for mobile phones and tablets. CSS3 gives web sites a dynamic, interactive capability and greater useability. CSS3 adds fine grained controls for designers looking to bring the web closer to reality.
    4. 4. Examples • www.awwwards.com • Letter Heads • Cursor Monster • Fish Burst Game
    5. 5. BENEFITS OF CSS3
    6. 6. Reduced development and maintenance time • Less images, Flash, JavaScript • Streamlined markup
    7. 7. Increased page performance • Smaller file sizes • Fewer HTTP requests “Reducing the number of HTTP requests…is the most important guideline for improving performance for first time visitors.” Yahoo! Exceptional Performance Team
    8. 8. Better search engine placement • Google uses speed as ranking factor • Real text instead of image or Flash text
    9. 9. Increased usability • Real text • Optimized styles based on device capabilities
    10. 10. BROWSER SUPPORT
    11. 11. Progressive Enhancement • Deliver the best possible experience to the widest possible audience. • Should be as fully featured and functional as possible.
    12. 12. http://www.w3.org/TR/CSS/ www.w3.org/Style/CSS/current-work
    13. 13. Use the parts of CSS3 that: • have generally stable syntax • have good support • don't harm non-supporting browsers by their lack. • http://caniuse.com “Subtle CSS3 effects should be employed as a reward for users who run a modern browser.” - Front-End Development Guidelines, Yahoo
    14. 14. CREATIVE CSS3
    15. 15. • RGBa & HSLa • Gradients • Rounded Corners • Box Shadow • Multiple Backgrounds • @font-face • Media Queries • Visual Effects and Animation
    16. 16. COLOR • RGBa (255, 255, 255, 0.5); • HSLa (360, 100%, 50%, 0.5);
    17. 17. Gradients • Can be used in every place you can use an image • background: linear-gradient(white, black); • Prefixes: – -webkit- Chrome and Webkit – -moz- Firefox 3.6+ – -o- Opera 11.1 (linear only) – -ms- IE 10
    18. 18. border-radius border-radius: 10px;
    19. 19. box-shadow box-shadow (horizontal offset, vertical offset, optional blur distance, optional distance, optional color, optional inset)
    20. 20. text-shadow
    21. 21. @ font-face
    22. 22. MEDIA QUERIES
    23. 23. CSS Media Queries for Mobile • min-width • max-width • device-width • min-device-width • max-device-width • orientation • -webkit-min-device-pixel-ratio
    24. 24. CSS Media Queries <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />
    25. 25. TRANSFORMS
    26. 26. Transforms – You can transform anything! opacity: 0.5; -webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease; opacity: 1; http://lab.simurai.com/css/tilt-shift
    27. 27. WHAT’S NEXT
    28. 28. http://lab.simurai.com/css/tilt-shift Adobe Edge
    29. 29. THANK YOU
    30. 30. • Slides posted at www.paultrani.com • Flexible Web Design www.flexiblewebbook.com • Stunning CSS3 www.stunningcss3.com • www.w3.org/Style/CSS/current-work • www.caniuse.com

    ×