Css3 101

CSS3 101
There must be a start for everyone

The big picture
CSS3 includes a truckload of big new stuff
Fonts, media queries, transformations, animations...
It also includes lots of small new stuff
New selectors, rounded corners, gradients, shadows...
Some of these features were already available with 2.1

IE defenestration is not required
defenestrate, n : a throwing of a person or thing out of a window
The Merriam-Webster dictionary

Current status
Explorer (9+) : -ms-*
Firefox : -moz-*
Chrome, Safari : -webkit-*
Opera (10+) : -o-*

Start small
Everyone does the same:
start with rounded corners,
then continue scratching

border-radius
{radius}
{topleft, bottomright} {topright, bottomleft }
{topleft} {topright} {bottomright} {bottomleft}
.container { border: 4px solid #f00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

box-shadow
{x offset} {y offset} {blur-radius} {color}
{x offset} {y offset} {blur} {spread} {color}
{shadow1}, {shadow2}, {shadow3}...
.container { -moz-box-shadow: 5px 5px 5px #000; -webkit-box-shadow: 5px 5px 5px #000; box-shadow: 5px 5px 5px #000; }

text-shadow
{x offset} {y offset} {blur-radius} {color}
{text-shadow1}, {text-shadow2}, ...
.container { text-shadow: 5px 5px 5px #000; }

rgba
rgba (red, blue, green, alpha)
.using-opacity { opacity: .5; } .using-rgba { background-color: rgba(218, 37, 29, .5); }

Wherever a color fits in
background, color, border, shadow
.block { background: rgb(218, 37, 29); /* fallback */ background: rgba(218, 37, 29, .5); text-shadow: 0 0 10px rgba(0, 0, 0, .5); }

New fonts
We are not limited to web-safe fonts anymore

@font-face @font-face { font-family: 'permanentmarker'; src: url( 'pm.eot' ); /* IE */ src: local('permanentmarker'), url( 'pm.ttf' ) format('truetype'); } h1 { font-family: permanentmarker; }

Flash Of Unstyled Text
Firefox / Opera : show the next font while downloading.
IE / Webkit : do not display anything while downloading

Font repositories
Squirrel font
Google Web Fonts
(Beware with spanish special characters!)

Transitions
Simple animations in the browser

Transitions
CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.
a { color: #000; } a:hover { color:#f00; }

Transitions: example a { color: #000; -webkit-transition: color 1s ease-in; -moz-transition: color 1s ease-in; transition: color 1s ease-in; } a:hover { color: #f00; }

transition
{property} {duration} {timing function} {delay}
{transition1}, {transition2}, ...
a { -webkit-transition: color 1s ease-in, background .3s ease; -moz-transition: color 1s ease-in, background .3s ease; transition: color 1s ease-in, background .3s ease; }

all a { -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; } a:hover, a:focus { color: #030; background: #690; }

Animatable properties
background, border, position, color, font, size,
margin, padding, opacity, transformation ,
z-index, zoom

CSS transition or Javascript animation?
CSS Transitions
Declared in the CSS
Simpler syntax
Transitions are faster
The animation can be automatically interrupted
jQuery animate()
Not limited to simple animations
Support for all browsers

Life's a bitch
You should care about older browsers

Internet Explorer 6

IE-specific stylesheets   http://www.quirksmode.org/css/condcom.html

Fallback properties .block { background: rgb(218, 37, 29); background: rgba(218, 37, 29, .5); } .foo { background: #2989d8; background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 55%, #7db9e8 100% ); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(55%,#207cca), color-stop(100%,#7db9e8) ); }

IE7.js ie7.js, ie8.js, ie9.js by Dean Edwards Fixes simple CSS 2 and 3 selectors

Brings to IE:
border-radius
box-shadow
border-image
gradients
rgba

Many more!
Chrome Frame
Polyfills
HTML5 boilerplate
IE-specific CSS selectors

Questions?

Thanks!
Come to our course and enjoy three straight days of this!
http://extrema-sistemas.com/training
http://del.icio.us/html5css3
http://github.com/html5css3
twitter.com/nachocoloma [email_address]

http://icoloma.blogspot.com	1040
http://icoloma.blogspot.com.es	163
http://icoloma.blogspot.in	49
http://icoloma.blogspot.fr	38
http://icoloma.blogspot.com.au	34
http://icoloma.blogspot.ca	10
http://icoloma.blogspot.de	10
http://icoloma.blogspot.co.uk	8
http://extrema-sistemas.com	7
http://icoloma.blogspot.com.ar	4
https://wiki.blueglue.com.au	3
http://icoloma.blogspot.se	2
http://extrema-sistemas.es	2
http://icoloma.blogspot.mx	2
http://translate.googleusercontent.com	2
http://icoloma.blogspot.it	2
http://icoloma.blogspot.co.nz	2
http://extrema-sistemas.org	1
http://icoloma.blogspot.com.br	1
http://icoloma.blogspot.pt	1

Css3 101

by Ignacio Coloma on Oct 11, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

20 Embeds 1,381

Statistics

Css3 101 — Presentation Transcript