Css3 paul trani

cSS3 for Advanced Design
Paul Trani, Adobe Evangelist

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

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

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

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

Css3 paul trani

by Carl Ford

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Css3 paul trani Presentation Transcript

Css3 paul trani

by Carl Ford

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Css3 paul trani Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare