320 likes | 450 Views
Paul Trani , Adobe Evangelist. cSS3 for Advanced Design. Paul Trani @ paultrani ptrani@adobe.com 15 years design experience 4 year old at heart.
E N D
Paul Trani, Adobe Evangelist cSS3 for Advanced Design
Paul Trani • @paultraniptrani@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 greater useability. CSS3 adds fine grained controls for designers looking to bring the web closer to reality.
Examples • www.awwwards.com • Letter Heads • Cursor Monster • Fish Burst Game
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 important guideline for improving performance for first time visitors.” Yahoo! Exceptional Performance Team
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
Progressive Enhancement • Deliver the best possible experience to the widest possible audience. • Should be as fully featured and functional as possible.
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 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
RGBa & HSLa • Gradients • Rounded Corners • Box Shadow • Multiple Backgrounds • @font-face • Media Queries • Visual Effects and Animation
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: • -webkit- Chrome and Webkit • -moz- Firefox 3.6+ • -o- Opera 11.1 (linear only) • -ms- IE 10
box-shadowbox-shadow (horizontal offset, vertical offset, optional blur distance, optional distance, optional color, optional inset)
CSS Media Queries for Mobile • min-width • max-width • device-width • min-device-width • max-device-width • orientation • -webkit-min-device-pixel-ratio
CSS Media Queries <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />
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
Adobe Edge http://lab.simurai.com/css/tilt-shift
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