Your SlideShare is downloading. ×
0
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
CSS3 For Advanced Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS3 For Advanced Design

2,875

Published on

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

No Downloads
Views
Total Views
2,875
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
70
Comments
0
Likes
3
Embeds 0
No embeds

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
  • 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.htmlHue 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 betweenSaturation is a percentage: 0% being grayscale and 100% in full colorLightness 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.htmlhttp://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-shadowhttp://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-shifthttp://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
  • Transcript

    • 1. cSS3 for Advanced Design
      Paul Trani, Adobe Evangelist
    • 2. Paul Trani
      @paultraniptrani@adobe.com
      • 15 yearsdesign experience
      • 3. 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 greater useability. CSS3 adds fine grained controls for designers looking to bring the web closer to reality.
    • 4. Examples
      www.awwwards.com
      Letter Heads
      Cursor Monster
      Fish Burst Game
    • 5.
    • 6. Benefits of CSS3
    • 7. Reduced development and maintenance time
      Less images, Flash, JavaScript
      Streamlined markup
    • 8. 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
    • 9. Better search engine placement
      Google uses speed as ranking factor
      Real text instead of image or Flash text
    • 10. Increased usability
      Real text
      Optimized styles based on device capabilities
    • 11.
    • 12. Browser support
    • 13. Progressive Enhancement
      Deliver the best possible experience to the widest possible audience.
      Should be as fully featured and functional as possible.
    • 14. http://www.w3.org/TR/CSS/
      www.w3.org/Style/CSS/current-work
    • 15. 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
    • 16. Creative CSS3
    • 17. RGBa & HSLa
      Gradients
      Rounded Corners
      Box Shadow
      Multiple Backgrounds
      @font-face
      Media Queries
      Visual Effects and Animation
    • 18. COLOR
      RGBa (255, 255, 255, 0.5);
      HSLa(360, 100%, 50%, 0.5);
    • 19. 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
    • 20. border-radiusborder-radius: 10px;
    • 21. box-shadowbox-shadow (horizontal offset,vertical offset, optional blur distance, optional distance, optional color, optional inset)
    • 22. text-shadow
    • 23. @ font-face
    • 24. Media queries
    • 25. CSS Media Queries for Mobile
      min-width
      max-width
      device-width
      min-device-width
      max-device-width
      orientation
      -webkit-min-device-pixel-ratio
    • 26. CSS Media Queries
      <link rel="stylesheet" type="text/css"
      media="screen and (max-device-width: 480px)"
      href="mobile.css" />
    • 27. TRANSFORMS
    • 28. 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
    • 29. What’s next
    • 30. Adobe Edge
      http://lab.simurai.com/css/tilt-shift
    • 31. Thank you
    • 32. 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

    ×