CSS3

http://tinyurl.com/wsf-css3

CSS3 ?On attend depuis longtemps…

• Commencé en 1999

• Modulaire

• … CSS 2.1 n’est toujours pas terminé

Marre d’attendre ? Commençons !

• Sélecteurs

• Media Queries

• Multi-column

• Backgrounds

• Borders

• Box-shadow

• Colors

• Text

• Transformations

• Transformations + Transitions

• Animations

Sélecteurs CSS 2.1• * — Tous les éléments

* { border: 0; }

• E — Éléments de type Ep { line-height: 1.5; }

• E F — Éléments F descendants de Ediv a { text-decoration: underline; }

• E > F — Éléments F enfants de Ediv > ul { background: green; }

Sélecteurs CSS 2.1

• E + F — Éléments F directement précédé de Esection h1 { margin: 1em; }

• E:lang(c) — Éléments E ayant la langue cspan:lang(en) { font-style: italic; }

• E[foo] — Éléments E ayant l’attribut fooa[title] { border: 1px dotted #000; }

Sélecteurs CSS 2.1• E :first-child — Premier élément de E

div :first-child { margin: 0; }

• E:link, E:visited — Éléments E dont l’ancre n’a pas été visitée / a été visitéea:link { color: blue; }a:visited { color: green; }

• E:active, E:hover, E:focus — Éléments E pendant des actions utilisateura:active { background-color: yellow; }

Sélecteurs CSS 2.1• E[foo="bar"] — Éléments E dont l’attribut foo

vaut exactement bara[href="#top"] { color: pink; }

• E[foo~="bar"] — Éléments E dont l’attribut foo contient bardiv[class~="warning"] { background-color: yellow; }

• E[foo|="bar"] — Éléments E dont l’attribut foo commence par bar. Incluant le tiret.a[hreflang|="en"] { font-style: italic; }

Fonctionne pour <a hreflang="en"> et <a hreflang="en-US">

Sélecteurs CSS 2.1

• .foo, E.foo — Éléments ou éléments E dont l’attribut class vaut foo.warning, div.warning { color: red; }

• #foo, E#foo — Éléments ou éléments E dont l’attribut id vaut foo#note, div#note { color: blue; }

Sélecteurs CSS3

• E ~ F — Éléments F précédé d’un élément Efigure ~ figcaption { font-size: 80%; }

• E :not(s) — Éléments excluant le sélecteur sdiv *:not(p) { margin: 0; }

• E:root — Premier élément du documentdiv:root { font-size: 100%; }

Sélecteurs CSS3

• E :last-child — Dernier enfant de Eul:last-child { margin-bottom: 1em; }

• E:empty — Éléments E videsdiv:empty { display: none; }

• E:target — Élément E cible de l’ancre en coursh1:target { text-decoration: underline; }

Sélecteurs CSS3• E :nth-child(n) — Le nième enfant de E

div :nth-child(3) { background: red; }div :nth-child(3n+1) { background: red; }

• E :nth-last-child(n) — Idem, en comptant de la findiv :nth-last-child(3) { background: red; }

• E:nth-of-type(n) — Le nième élément de type Ediv img:nth-of-type(3) { background: green; }

• E:nth-last-of-type(n) — Idem, en comptant de la findiv img:nth-last-of-type(3) { background: green; }

Sélecteurs CSS3• E :only-child — Le seul enfant de E

div :only-child { background: blue; }

• E:first-of-type — Le premier élément de type Ediv img:first-of-type { background: red; }

• E:last-of-type — Le dernier élément de type Ediv img:last-of-type { background: green; }

• E:only-of-type — Le seul élément de type Ediv p:only-of-type { background: yellow; }

Sélecteurs CSS3• E[foo^="bar"] — Éléments E ayant l’attribut foo qui

commence par bara[class^="number-"] { padding: 0; }

• E[foo$="bar"] — Éléments E ayant l’attribut foo qui se termine par bara[class$="ing"] { padding: 1em; }

• E[foo*="bar"] — Éléments E ayant l’attribut foo qui contient bara[class*="ost"] { padding: .5em; }

Sélecteurs CSS3

• E:enabled, E:disabled — Éléments E activés / désactivésinput:enabled { background: #FFF; }input:disabled { background: grey; }

• E:checked — Éléments E cochésinput[type="checkbox"]:checked { background: green; }

Media Queries<link rel="stylesheet" type="text/css" media="screen" href="css/global.css">

• all

• braille, embossed

• handheld

• print

• projection

• screen

• speech

• tty

• tv

Media Queries

• width, height, device-width, device-height

• orientation

• aspect-ratio, device-aspect-ratio

• color, color-index, monochrome

• resolution

• (scan, grid)

+

Media Queries

only, not, and+

<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px) and (max-width: 700px)"

href="css/global.css">

@media screen and (min-width: 400px) and (max-width: 700px) { body {…}}

Multi-column

p { column-width: 13em; column-gap: 1em;}

Backgroundsbackground-origin

background-size

Backgroundsmultiple backgrounds

div { background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg) 11px 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y;}

Backgrounds

background: -moz-linear-gradient(left, #2E2E2E, #454545 10px);background: -webkit-gradient(linear, 0 0, 10 0, from(#2E2E2E), to(#454545));background: linear-gradient(left, #2E2E2E, #454545 10px);

Gradients

Backgrounds

background: -moz-linear-gradient(left, #2E2E2E, #454545 10px);background: -webkit-linear-gradient(left, #2E2E2E, #454545 10px);background: linear-gradient(left, #2E2E2E, #454545 10px);

Gradients

Backgrounds

background: url(fallback.png);background: -moz-linear-gradient(left, #2E2E2E, #454545 10px);background: -webkit-linear-gradient(left, #2E2E2E, #454545 10px);background: linear-gradient(left, #2E2E2E, #454545 10px);

Gradients

Borders

border-image

border-radius

Box-shadow

div { box-shadow: -10px -10px 0 0 #000;}

Colors

• Opacity

• RGBA

• HSL, HSLA

TextWeb fonts (@font-face)

text-shadow

Transformations

-moz-transform: rotate(-4deg);-o-transform: rotate(-4deg);-webkit-transform: rotate(-4deg);transform: rotate(-4deg);

Transformations + Transitions

Animations

Et encore plein d’autres choses !

Ressources

• CSS3 Previews http://www.css3.info/preview/

• CSS3 Module Status http://www.css3.info/modules/

• CSS3 Selectors Test http://tools.css3.info/selectors-test/

Ressources (démos)• Super awesome buttons with CSS3 http://www.zurb.com/

blog_uploads/0000/0617/buttons-03.html

• An image gallery showcase for CSS transitions http://devfiles.myopera.com/articles/1041/image-gallery.html

• Pure CSS Coke Can http://www.romancortes.com/blog/pure-css-coke-can/

• CSS 3D Meninas http://www.romancortes.com/blog/css-3d-meninas/

• Sliding Vinyl with CSS3 http://www.zurb.com/playground/sliding-vinyl

• 47 amazing CSS3 animation demos http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/

Contact

Nicolas Le Gallme@neovov.com