CSS3 and Advanced Design

CSS3 & ADVANCED DESIGN

Paul Trani @paultrani ptrani@adobe.com

•  15 years design experience •  4 year old at heart

Designer or Developer?

Examples

•  Letter Heads

•  Cursor Monster

•  www.awwwards.com

Bene!ts of CSS3

Reduced Development and Maintenance Time

•  Less images, Flash, JavaScript

•  Streamlined markup

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

Better Search Engine Placement

•  Google uses speed as ranking factor

•  Real text instead of image or Flash text

Increased Usability

•  Optimized styles based on device capabilities

•  Real text

Browser Support

Progressive Enhancement

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

•  Should be as fully featured and functional as possible.

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

border-radius border-radius: 10px;

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

box-shadow box-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 – 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    

What’s Next

Adobe Edge

  CSS Regions

  CSS Shaders

•  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    

Thank You

Hey. We’re hiring.