Css3 paul trani

32
CSS3 FOR ADVANCED DESIGN Paul Trani, Adobe Evangelist

description

Advance CSS3

Transcript of Css3 paul trani

Page 1: Css3 paul trani

CSS3 FOR ADVANCED DESIGNPaul Trani, Adobe Evangelist

Page 2: Css3 paul trani

Paul Trani@paultrani [email protected]

• 15 years design experience• 4 year old at heart

Page 3: Css3 paul trani

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.

Page 4: Css3 paul trani

Examples

• www.awwwards.com • Letter Heads• Cursor Monster• Fish Burst Game

Page 5: Css3 paul trani
Page 6: Css3 paul trani

BENEFITS OF CSS3

Page 7: Css3 paul trani

Reduced development and maintenance time

• Less images, Flash, JavaScript• Streamlined markup

Page 8: Css3 paul trani

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

Page 9: Css3 paul trani

Better search engine placement

• Google uses speed as ranking factor• Real text instead of image or Flash text

Page 10: Css3 paul trani

Increased usability

• Real text• Optimized styles based on device capabilities

Page 12: Css3 paul trani

BROWSER SUPPORT

Page 13: Css3 paul trani

Progressive Enhancement

• Deliver the best possible experience to the widest possible audience.

• Should be as fully featured and functional as possible.

Page 14: Css3 paul trani

http://www.w3.org/TR/CSS/www.w3.org/Style/CSS/current-work

Page 15: Css3 paul trani

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

Page 16: Css3 paul trani

CREATIVE CSS3

Page 17: Css3 paul trani

• RGBa & HSLa• Gradients• Rounded Corners• Box Shadow• Multiple Backgrounds• @font-face• Media Queries• Visual Effects and Animation

Page 18: Css3 paul trani

COLOR• RGBa (255, 255, 255, 0.5);• HSLa (360, 100%, 50%, 0.5);

Page 19: Css3 paul trani

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

Page 20: Css3 paul trani

border-radiusborder-radius: 10px;

Page 21: Css3 paul trani

box-shadowbox-shadow (horizontal offset,

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

Page 23: Css3 paul trani

@ font-face

Page 24: Css3 paul trani

MEDIA QUERIES

Page 25: Css3 paul trani

CSS Media Queries for Mobile

• min-width• max-width• device-width• min-device-width• max-device-width• orientation• -webkit-min-device-pixel-ratio

Page 26: Css3 paul trani

CSS Media Queries

<link rel="stylesheet" type="text/css"media="screen and (max-device-width: 480px)"href="mobile.css" />

Page 27: Css3 paul trani

TRANSFORMS

Page 28: Css3 paul trani

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

Page 29: Css3 paul trani

WHAT’S NEXT

Page 30: Css3 paul trani

http://lab.simurai.com/css/tilt-shift

Adobe Edge

Page 31: Css3 paul trani

THANK YOU

Page 32: Css3 paul trani

• 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