CSS3 for Advanced Design: Unlock Creative Potential with CSS3 Effects and Transforms
•Download as PPTX, PDF•
4 likes•1,368 views
![Paul Trani @paultraniptrani@adobe.com ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
Similar to CSS3 for Advanced Design: Unlock Creative Potential with CSS3 Effects and Transforms
Similar to CSS3 for Advanced Design: Unlock Creative Potential with CSS3 Effects and Transforms (20)
More from paultrani
More from paultrani (15)
Recently uploaded
Recently uploaded (20)
CSS3 for Advanced Design: Unlock Creative Potential with CSS3 Effects and Transforms
- 1. cSS3 for Advanced Design Paul Trani, Adobe Evangelist
- 4. Examples www.awwwards.com Letter Heads Cursor Monster Fish Burst Game
- 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
- 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.
- 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
- 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
- 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
Editor's Notes
- 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