CSS

CSS3 Is In The Details

Saturday, July 16, 2011

3Saturday, July 16, 2011

PROGRESSIVENESSSUPPORT?AWESOME CSS3 DETAILS

FUTURE PROOFING


IMAGE GALLERYAN AWESOME FORMFANCY NAVIGATION


Let’s get technical!


IS IT READY?






CONTENTAUDIENCESTATISTICS

PROGRESSIVEABLENESS


The Experience Layer



Content


Content

Presentation


Content

Presentation

Behaviour


Content

Presentation

Behaviour

Experience


Content

Presentation

Behaviour

Experience


{...}


Should it look the same in every browser?


@font-facegradientstransitionsbox-shadowsmedia queries


opacitygradientstransitionsbox-shadowstext-shadowtransforms


Fancy Navigation Tricks


.classy {

-webkit-transition-delay:0.5s ;

-webkit-transition-duration:0.3s ;

-webkit-transition-property: color;

-webkit-transition-timing-function: ease;

}


.classy {

-webkit-transition: all 0.3s ease 0.5s;

}


.classy {

-webkit-transition: all 0.3s ease 0.5s;

-moz-transition: all 0.3s ease 0.5s;

-o-transition: all 0.3s ease 0.5s;

transition: all 0.3s ease 0.5s;

}


Polaroid Image Gallery


Making Awesome Forms


{...}


Web Fonts!


Media Queries



A Little Help



Selling it!


Resources


Don’t Go Overboard


THANKS!Files & Slides:

valhead.com/css3

Let’s Chat:

[email protected] • @vlh


mailto:[email protected]

mailto:[email protected]

Technology

CSS