Post on 15-Jan-2015
description
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
• 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
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