CSS3 For Advanced Design

CSS3 FOR ADVANCED DESIGNPaul Trani, Adobe Evangelist

Paul Trani@paultrani [email protected]

• 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

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 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

BROWSER SUPPORT

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

CREATIVE CSS3

• 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

border-radiusborder-radius: 10px;

box-shadowbox-shadow (horizontal offset,

vertical offset, optional blur distance, optional distance, optional color, optional inset)

text-shadow

@ font-face

MEDIA QUERIES

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

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

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 • www.w3.org/Style/CSS/current-work• www.caniuse.com