CSS3 and Advanced Design
4 likes1,165 views
The document discusses the benefits and features of CSS3 in web design, highlighting improved performance, reduced development time, and better search engine rankings. It covers various CSS3 properties like gradients, box shadows, and media queries, along with guidelines for optimizing web design for different devices. The importance of progressive enhancement and updating styles based on user capabilities is also emphasized.
CSS3 and Advanced Design
- 1. CSS3 & ADVANCED DESIGN
- 2. Paul Trani @paultrani [email protected] • 15 years design experience • 4 year old at heart
- 5. Examples • Letter Heads • Cursor Monster • www.awwwards.com
- 6. Bene ts of CSS3
- 7. Reduced Development and Maintenance Time • Less images, Flash, JavaScript • Streamlined markup
- 8. Increased Page Performance • Smaller le sizes • Fewer HTTP requests “Reducing the number of HTTP requests…is the most important guideline for improving performance for rst 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 • Optimized styles based on device capabilities • Real text
- 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. 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
- 15. Creative CSS3
- 16. • RGBa & HSLa { • Gradients • Rounded Corners • Box Shadow • Multiple Backgrounds • @font-face • Media Queries • Visual Effects and Animation
- 17. 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); • Pre xes: – -webkit- Chrome and Webkit – -moz- Firefox 3.6+ – -o- Opera 11.1 (linear only) – -ms- IE 10
- 20. box-shadow box-shadow (horizontal offset, vertical offset, optional blur distance, optional distance, optional color, optional inset)
- 21. text-shadow
- 22. @ font-face
- 23. Media Queries
- 24. CSS Media Queries for Mobile • min-width • max-width • device-width • min-device-width • max-device-width • orientation • -webkit-min-device-pixel-ratio
- 25. CSS Media Queries <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />
- 26. Transforms
- 27. Transforms – Transform Anything! opacity: 0.5; -webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease; opacity: 1; h"p://lab.simurai.com/css/1lt-‐shi4
- 28. What’s Next
- 29. Adobe Edge
- 30. CSS Regions CSS Shaders
- 31. Thank You • 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
- 32. Hey. We’re hiring.