CSS3 Pour Les Web Designer PDF

Au sommaire
Les livres de ceux qui font le web
Code diteur : G12987

ISBN : 978-2-212-12987-8
Utiliser CSS3 aujourdhui * Comprendre les transitions

CSS * La fonction de timing * Diffrer la transition * Transitions abrges
* Interoprabilit * Empiler les transitions * tats de transition * Appliquer
une transition plusieurs proprits * Appliquer une transition toutes les
proprits potentielles * Proprits CSS compatibles avec les transitions
* Broder avec CSS3 * Effet de survol simple et flexible avec la proprit
opacity * Brodez la toile * Transformer le message * Transformation
dchelle * Transformer lexprience * Rotate, skew et translate * Diffrentes
transformations au service du message * Arrire-plans multiples * Dfilement
parallaxe * La vieille mthode: des balises superflues * La nouvelle mthode:
arrire-plans multiples via CSS3 * Enrichir les formulaires * Programmation
dun simple formulaire dinscription * Style des lments fieldset et label *
Style des champs de saisie * Les dgrads CSS3 * Un vrai bouton en CSS3 *
Et les autres navigateurs ? * Utilisation de box-shadow pour crer des tats
focus * Ajout danimations CSS pour enrichir linteractivit du formulaire *
Conclusion * Le futur de CSS3 *

CSS3 pour les WEB DESIGNERS
Les feuilles de styles CSS sont devenues un outil

incontournable pour tous les web designers. Des
slecteurs avancs la gnration de contenu, en
passant par le grand retour des web fonts, les dgrads,
les ombres et les arrondis, jusquaux animations les plus
compltes, CSS3 offre tout un univers de possibilits
cratrices.
Nul ne pouvait mieux vous guider travers ces galaxies
que le designer de renom, auteur et superstar du CSS, Dan
Cederholm. Dcouvrez avec lui ce qui marche, comment
a marche, et que faire quand a ne marche pas!
Dan Cederholm
Dan Cederholm
CSS3 pour les

WEB DESIGNERS
prface de Jeffrey Zeldman
12
2
No.
Au sommaire
Utiliser CSS3 aujourdhui * Comprendre les transitions

CSS * La fonction de timing * Diffrer la transition * Transitions abrges
* Interoprabilit * Empiler les transitions * tats de transition * Appliquer
une transition plusieurs proprits * Appliquer une transition toutes les
proprits potentielles * Proprits CSS compatibles avec les transitions
* Broder avec CSS3 * Effet de survol simple et flexible avec la proprit
opacity * Brodez la toile * Transformer le message * Transformation
dchelle * Transformer lexprience * Rotate, skew et translate * Diffrentes
transformations au service du message * Arrire-plans multiples * Dfilement
parallaxe * La vieille mthode: des balises superflues * La nouvelle mthode:
arrire-plans multiples via CSS3 * Enrichir les formulaires * Programmation
dun simple formulaire dinscription * Style des lments fieldset et label *
Style des champs de saisie * Les dgrads CSS3 * Un vrai bouton en CSS3 *
Et les autres navigateurs ? * Utilisation de box-shadow pour crer des tats
focus * Ajout danimations CSS pour enrichir linteractivit du formulaire *
Conclusion * Le futur de CSS3 *

CSS3 pour les WEB DESIGNERS
Les feuilles de styles CSS sont devenues un outil

incontournable pour tous les web designers. Des slecteurs
avancs la gnration de contenu, en passant par le
grand retour des web fonts, les dgrads, les ombres et les
arrondis, jusquaux animations les plus compltes, CSS3
offre tout un univers de possibilits cratrices.
Nul ne pouvait mieux vous guider travers ces galaxies
que le designer de renom, auteur et superstar du CSS, Dan
Cederholm. Dcouvrez avec lui ce qui marche, comment a
marche, et que faire quand a ne marche pas!
Dan Cederholm
Dan Cederholm
CSS3 pour les

WEB DESIGNERS
prface de Jeffrey Zeldman
2
No.
Dan Cederholm
CSS3 pour les

WEB DESIGNERS
CSS3.indd 1
20/12/10 0:18:45
ditions Eyrolles
61, bld Saint-Germain
75240 Paris Cedex 05
www.editions-eyrolles.com
Traduction autorise de louvrage en langue anglaise

intitul CSS3 FOR WEB DESIGNERS de Dan Cederholm
(ISBN: 978-0-9844425-2-2), publi par A Book Apart LLC
Adapt de langlais par Charles Robert
2010 Dan Cederholm pour ldition en langue anglaise
Groupe Eyrolles, 2011, pour la prsente dition,
ISBN : 978-2-212-12987-8
Dans la mme collection

HTML5 pour les Web Designers, Jeremy Keith, 2010, 96pages.
Le code de la proprit intellectuelle du 1er juillet 1992 interdit en effet expressment la

photocopie usage collectif sans autorisation des ayants droit. Or, cette pratique sest
gnralise notamment dans les tablissements denseignement, provoquant une baisse
brutale des achats de livres, au point que la possibilit mme pour les auteurs de crer
des uvres nouvelles et de les faire diter correctement est aujourdhui menace.
En application de la loi du 11 mars 1957, il est interdit de reproduire intgralement ou
partiellement le prsent ouvrage, sur quelque support que ce soit, sans autorisation de
lditeur ou du Centre Franais dExploitation du Droit de Copie, 20, rue des Grands
Augustins, 75006 Paris.
table des matires
CSS3.indd 3
chapitre 1
15
28
53
82
92
116
121
chapitre 2
Utiliser CSS3 aujourdhui

Comprendre les transitions CSS3
chapitre 3
Broder avec CSS3

chapitre 4
Transformer le message
chapitre 5
Arrire-plans multiples
chapitre 6
Enrichir les formulaires

chapitre 7
Conclusion
Index
28/12/10 17:53:13
CSS3.indd 4
20/12/10 0:18:46
Avant-propos
Un site Web, ce nest pas la mme chose quun dessin de site
Web. Quand une personne cre un design sous Photoshop
et quune autre personne le traduit en HTML et en CSS, le
programmeur doit essayer de deviner et dapprhender lintention du designer. Ce processus dinterprtation ne va
jamais sans heurts, sauf quand le programmeur sappelle Dan
Cederholm. Quand Dan code le design de quelquun dautre, il
a tout bon, y compris l o le designer a tout faux. Par exemple,
Dan traduit forcment les dimensions fixes du design ralis
sous Photoshop en un code flexible, accessible et pare-balles.
(Dan a invent lexpression Web design pare-balles1 pour
illustrer ses propos.)
Pour Dan, flexible ne veut jamais dire vague. Les dtails ont
toujours leur importance. Car Dan nest pas seulement un dveloppeur dinterfaces brillant au service des utilisateurs, il est
aussi designer jusqu la moelle. Il pense design, rve design,
il a mme offert au monde une nouvelle faon de partager le
design sur dribbble.com. Dan est galement un pdagogue n,
doubl dun type marrant, dont le ton pince-sans-rire ferait
passer Woody Allen pour un joyeux drille. Dan est partout, il
aide les designers se perfectionner, sans se contenter dinstruire: il lve.
Voil pourquoi, chers amis, nous lui avons demand dtre
notre (et votre) guide pour CSS3. On naurait pu rver de
quelquun de plus intelligent, de plus expriment, de plus ax
sur le design et les standards du Web que notre Dan international. Bon voyage!
Jeffrey Zeldman
1. Bulletproof web Design (NdT).
CSS3.indd 5
28/12/10 17:53:13
CSS3.indd 6
20/12/10 0:18:46
Utiliser CSS3
aujourdhui
En se penchant sur le pass illustre de CSS, on y retrouve

quelques avances majeures qui ont guid nos carrires de Web
designers. Ces techniques, ces articles et ces vnements dterminants nous ont aids crer des sites Web flexibles et accessibles dont nous pouvons tre fiers, tant visuellement que
techniquement.
On peut dire que les choses commencrent devenir intressantes en 2001, quand Jeffrey Zeldman crivit To Hell With Bad
Browsers1 (http://bkaprt.com/css3/1/)2, augurant les prmices
de lge de CSS. Ce manifeste incitait les designers ne pas se
contenter dutiliser les CSS pour grer la couleur et la police des
liens et faire preuve dinitiative, sans se proccuper de ces vieux
navigateurs incapables de comprendre CSS1. Oui, CSS1.
Les quelques annes qui suivirent furent employes crer et
partager des techniques utilisant CSS, dans le but de satisfaire
1. Au diable les mauvais navigateur! (NdT)
2. Adresse complte: http://www.alistapart.com/articles/tohell/
CSS3.indd 1
U t i l i s e r C SS 3 au j o u r d h u i
20/12/10 0:18:47
nos clients et nos patrons. Ce fut une priode stimulante au

cours de laquelle nous avons expriment, repouss les limites
et trouv des mthodes complexes pour rsoudre les diffrences
de rendu entre navigateurs tout cela au nom dune plus grande
souplesse, dune meilleure accessibilit et dun code allg.
Aux alentours de 2006, CSS faisait de moins en moins parler de
lui. La plupart des problmes rencontrs avaient t rsolus. Les
bugs les plus courants des navigateurs pouvaient tre contourns
de diverses faons. Des groupes de soutien venaient en aide aux
designers traumatiss par les bugs insondables dInternet Explorer.
Nos cheveux commenaient grisonner (bon, les miens en tout
cas). Blague part, la cuve des navigateurs du moment commenait croupir. Cette priode de statu quo nous a, certes, permis de
concevoir des approches reproductibles et dtablir des bonnes
pratiques, mais les aficionados de CSS en qute doutils plus puissants commenaient, osons le dire, sennuyer ferme.
Heureusement, les choses volurent. Les navigateurs commencrent offrir des mises jour plus frquentes (certains dentre eux
en tout cas). Firefox et Safari commenaient non seulement se
tailler une meilleure part de march, mais bnficiaient galement
dun cycle de dveloppement plus rapide, supportant les standards
les plus rpandus, ainsi que des proprits plus exprimentales.
Bien souvent, les technologies que ces navigateurs prcurseurs
choisissaient dimplmenter taient reprises dans les brouillons
des spcifications. En dautres termes, ctaient parfois les crateurs
de navigateurs eux-mmes qui faisaient avancer la spcification.
MAIS NE LISEZ PAS LA SPCIFICATION

Demandez une table de Web designers qui aime lire les
spcifications?, peut-tre quune personne lvera la main. (Si
vous tes cette personne, vous avez trop de temps libre.) Bien
quelles soient importantes titre de rfrence, il nest clairement pas dans mes habitudes de lire des spcifications dans leur
intgralit, et je ne recommanderai personne de se donner
cette peine pour comprendre CSS3 dans son ensemble.
CSS3.indd 2
css3 pour les Web Designers
20/12/10 0:18:47
La bonne nouvelle, cest que CSS3 est en fait une srie de modules,
conus pour tre implments sparment et indpendamment
les uns des autres. Cest une trs bonne chose. Cette approche
segmente a permis certaines parties de la spcification dvoluer plus (ou moins) vite que dautres, tout en encourageant les
crateurs de navigateurs implmenter les morceaux les plus
aboutis avant que CSS3 ne soit prt dans son intgralit.
Le W3C explique le choix de cette approche modulaire:
Plutt que dessayer de faire rentrer des douzaines de mises jour
dans une seule spcification monolithique, il sera bien plus simple
et plus efficace dactualiser sparment diffrents lments de la
spcification. Lutilisation de modules permettra de mettre jour
CSS de manire plus prcise et opportune, permettant ainsi la
spcification dans son ensemble dvoluer de manire plus flexible
et optimale.3
Lavantage de cette approche pour nous autres, Web designers, cest
quen plus de pouvoir exprimenter et de bnficier de cycles de
dveloppement plus rapides, nous pouvons utiliser de nombreuses
proprits CSS3 sans avoir attendre quelles deviennent des
recommandations candidates, ce qui pourrait prendre des annes.
videmment, si vous aimez lire les spcifications, ne vous en
privez surtout pas! Il y a naturellement de nombreux enseignements en retirer, mais il est bien plus pragmatique de sintresser ce qui est dj implment et utilisable aujourdhui, et
cest de cela que traite le reste de ce chapitre. Nous verrons des
exemples dapplication au fil du livre.
Jai toujours appris plus de choses sur le Web design en dissquant des exemples dans leur environnement naturel quen
lisant de la documentation, et cest l-dessus que nous insisterons dans les prochaines pages.
3. http://www.w3.org/TR/css3-roadmap/#whymods
CSS3.indd 3
20/12/10 0:18:47
TOUT LE MONDE PEUT UTILISER CSS3

Jentends souvent cette mme phrase sortir de la bouche des
Web designers travers le monde:Jai tellement hte dutiliser CSS3... quand il sera prt.
En ralit, tout le monde peut commencer utiliser CSS3 ds
maintenant, sans pour autant devoir penser diffremment ou
changer radicalement de mthode. Comment, me demanderezvous? En choisissant soigneusement le domaine dapplication:
en se focalisant exclusivement sur la couche dexprience.
Cibler la couche dexprience

Depuis quelques annes, les bonnes pratiques consistent crer
une structure base sur les standards du Web (HTML smantique et CSS pour la mise en page, la typographie, la couleur,
etc.), en confiant lessentiel des effets interactifs lanimation,
la ractivit et le mouvement des technologies comme Flash
et JavaScript. Les proprits CSS3 tant lentement mais srement implmentes dans les navigateurs les plus volus, nous
pouvons commencer dplacer une partie de cette couche
dexprience vers nos feuilles de style.
Je suis un designer dinterfaces plus port sur laspect visuel que
la programmation. Si les outils qui me sont familiers, comme
lHTML et CSS, me permettent dapporter une exprience riche
aux utilisateurs, je ne vais certainement pas men plaindre.
CSS3 est l pour les Web designers comme vous et moi, et
nous pouvons commencer en utiliser certaines parties ds
aujourdhui, du moment que nous savons o et comment les
appliquer.
O appliquer CSS3
Pour dfinir lexprience visuelle dun site Web, on peut tablir
deux catgories: le domaine critique et le domaine non critique
(tableau 1.01).
CSS3.indd 4
20/12/10 0:18:47
CRITIQUE
NON CRITIQUE
Identit visuelle
Interaction
Utilisabilit
Rcompenses visuelles
Accessibilit
Ractivit
Mise en page
Mouvement
tableau 1.01: Lexprience visuelle dun site Web peut tre divise en deux catgories,
critique et non critique. Cette dernire correspond au domaine o nous pouvons appliquer
CSS3 ds aujourdhui.
Certains domaines, comme lidentit graphique, lutilisabilit et

la mise en page sont des facteurs essentiels au succs dun site
Web. Il serait donc risqu dutiliser ici une technologie qui nest
pas pleinement supporte par tous les navigateurs.
Par exemple, la spcification CSS3 en construction inclut de
nombreux brouillons pour le contrle de la mise en page, un
domaine o les besoins sont gigantesques.
Cela fait des annes que lon torture la proprit float pour
grer la mise en page. On fait avec, mais un vritable moteur de
mise en page est une ncessit absolue.
Cela tant, deux des trois nouveaux modules de mise en page
de CSS3 ne sont encore implments sur aucun navigateur. Ils
sont toujours en construction et certains vous diront quils sont
confus, difficiles comprendre, et quils ne sont donc vraisemblablement pas la solution ultime tous nos problmes. En fait,
pour une chose aussi importante que la mise en page, CSS3
nest tout bonnement pas le bon outil. Pour le moment.
De lautre ct du spectre se trouvent les vnements non critiques comme linteraction (hover, focus, lments de formulaires, flexibilit de la fentre daffichage ou viewport) et les
variations graphiques (ainsi que les animations) rsultant de ces
CSS3.indd 5
20/12/10 0:18:48
interactions. Il est bien moins crucial davoir une exprience

identique sur tous les navigateurs pour ces vnements; cest
donc lendroit idal pour appliquer certaines portions de CSS3
lintention des navigateurs qui les supportent dj.
Ce sont ces vnements non critiques qui nous intresseront
dans ce livre. Nous laisserons les caractristiques plus importantes de la page intactes pour tous les navigateurs, quelle que
soit leur compatibilit actuelle avec CSS3.
En ciblant ces domaines non critiques de lexprience visuelle,
on peut librement ajouter une couche de CSS3 pour enrichir
linteractivit dun site Web sans risquer de perturber le message
principal, la mise en page ou laccessibilit.
PRINCIPALES PROPRITS CSS3 UTILISABLES

AUJOURDHUI
La couche dexprience semble donc tre le domaine o nous
pouvons, ds aujourdhui, appliquer CSS3 en toute quitude.
Nous allons galement devoir dterminer quelles sont les
proprits CSS3 utilisables, cest--dire quelles portions de la
spcification ont atteint un niveau dimplmentation suffisant
pour tre utilises.
De gros morceaux de CSS3 nont encore t implments dans
aucun navigateur. Le chantier avance. On pourrait sintresser
ces gros morceaux en gestation, mais mieux vaut se focaliser sur ce qui fonctionne dj, et il y a de quoi faire, petits
veinards!
Jetons un il aux principales proprits CSS3 que nous allons
utiliser dans les exemples du livre (ci-aprs, et tableau 1.02).
Je ne fais ici que les prsenter; par la suite, nous creuserons la
syntaxe avance et nous verrons des exemples concrets.
CSS3.indd 6
20/12/10 0:18:48
PROPRIT
SUPPORTE PAR
border-radius
9 beta
3+
3+
1+
10.5+
1.1+
2+
3.1+
9.5+
3+
3+
3.5+
10.5+
9 beta
1.3+
2+
3.6+
10.5+
9 beta
1.2+
1+
1.5+
9+
9 beta
3.2+
3+
3+
10+
9 beta
text-shadow
box-shadow
Images darrire-plan multiples
opacity
RGBA
tableau 1.02: Proprits CSS3 et les navigateurs qui les supportent.
border-radius
Arrondit les coins dun lment selon le rayon spcifi.
Fonctionne dans Safari 3+, Chrome 3+, Firefox 1+, Opera 10.5+
et IE9 Beta. Exemple:
.foo {
border-radius: 10px;
}
Openmirrors.com
CSS3.indd 7
20/12/10 0:18:51
text-shadow
Proprit CSS2 (abandonne en CSS2.1 puis rintroduite en
CSS3) qui ajoute une ombre lhypertexte et dont les options
permettent de dfinir la direction, la quantit de flou et la
couleur de lombre. Fonctionne dans: Safari 1.1+, Chrome 2+,
Firefox 3.1+ et Opera 9.5+. Exemple:
p {
text-shadow: 1px 1px 2px #999;
}
box-shadow
Ajoute une ombre un lment. Syntaxe identique textshadow. Fonctionne dans Safari 3+, Chrome 3+, Firefox 3.5+,
Opera 10.5+ et IE9 Beta. Exemple:
.foo {
box-shadow: 1px 1px 2px #999;
}
Images darrire-plan multiples

CSS3 offre la possibilit dappliquer plusieurs images darrireplan sur un lment (spares par des virgules), contre une seule
en CSS2.1. Fonctionnent dans Safari 1.3+, Chrome 2+, Firefox
3.6+, Opera 10.5+ et IE9 Beta. Exemple:
body {
background: url(image1.png) no-repeat top left,
url(image2.png) repeat-x bottom left,
url(image3.png) repeat-y top right;
}
opacity
Dfinit lopacit dun lment. Une valeur de 1 signifie compltement opaque, 0 signifie compltement transparent. Fonctionne
dans Safari 1.2+, Chrome 1+, Firefox 1.5+, Opera 9+ et IE9 Beta.
CSS3.indd 8
20/12/10 0:18:51
Exemple:
.foo {
opacity: .5; /* .foo sera transparent 50% */
}
RGBA
RGBA nest pas une proprit CSS, mais plutt un nouveau modle
de couleur introduit dans CSS3, permettant de spcifier un niveau
dopacit en plus dune valeur RVB. Fonctionne dans Safari 3.2+,
Chrome 3+, Firefox 3+, Opera 10+ et IE9 Beta. Exemple:
.foo {
color: rgba(0, 0, 0, 0.75); /* noir opaque 75% */
}
videmment, cette liste est loin dtre exhaustive. CSS3 contient

bien dautres proprits et outils, dont beaucoup sont encore
en dveloppement et ne sont implments dans aucun navigateur. Vous remarquerez cependant que chaque proprit cite
prcdemment a atteint un certain seuil dinteroprabilit: elle
fonctionne avec au moins deux des principaux navigateurs. Et
dans certains cas, la compatibilit est promise pour les futures
versions dInternet Explorer (et dOpera).
Nous avons maintenant une jolie petite liste de proprits avec
lesquelles nous amuser, tant donn leur compatibilit relativement acceptable avec Safari, Chrome, Firefox et Opera. Elles ne
fonctionnent pas encore partout, mais nous verrons plus loin
pourquoi ce nest pas un problme, et comment sadapter ce
manque duniformit.
Ce dont nous ne parlerons pas

Jai cit la poigne de proprits CSS3 que nous allons utiliser
frquemment dans ce livre, mais quen est-il du reste ? Jai
choisi de ne pas tre exhaustif, mais plutt de parler des outils
qui bnficient dune prise en charge assez large et stable pour
tre utilisables ds aujourdhui dans la pratique.
Openmirrors.com
CSS3.indd 9
20/12/10 0:18:51
Dautres portions de la spcification CSS3 peuvent galement

tre utilisables lheure actuelle, mais elles nentrent pas dans
le champ dtude ce de livre (et peuvent justifier lcriture dun
livre elles seules):
1. Media Queries (http://www.w3.org/TR/CSS3-mediaqueries/)
2. Mise en page multicolonne (http://www.w3.org/TR/CSS3-multicol/)
3. Web fonts (http://www.w3.org/TR/CSS3-webfonts)
Assurez-vous de dcouvrir ces autres modules quand vous

aurez fini ce livre.
PRFIXES DE NAVIGATEUR
Je disais prcdemment que la spcification CSS3 tait une srie
de modules qui taient progressivement implments par les
navigateurs. Dans certains cas, cette implmentation passe par
le support exprimental: alors que la spcification est toujours
en cours de construction au W3C, un crateur de navigateur
peut dcider de prendre en charge certaines proprits, quel
quen soit ltat davancement, pour les tester dans un environnement rel. Cest devenu une tape salutaire de la procdure, les
retours dexprience servant souvent ajuster la spcification.
Un crateur de navigateur peut aussi dcider dimplmenter
une proprit exprimentale nappartenant aucune proposition de standard, mais susceptible den faire partie lavenir.
Souvent, ce support exprimental des proprits CSS est gr
par le biais dun prfixe de navigateur de ce genre:
-webkit-border-radius
Ce mot-clef prcd dun tiret et attach au dbut du nom de

la proprit signale que celle-ci est exprimentale, spcifique
limplmentation du navigateur et linterprtation de la spcification en pleine volution. Ds lors que la proprit expri-
CSS3.indd 10
10
20/12/10 0:18:52
mentale est intgre un module CSS3 abouti, le navigateur

doit tre en mesure dinterprter le nom de la proprit sans
laide du prfixe.
Chaque navigateur a son propre prfixe et ignorera les rgles
contenant des prfixes quil ne reconnat pas.
Le tableau 1.03 prsente les navigateurs les plus rpandus
et leurs prfixes respectifs. Nous utiliserons les prfixes de
WebKit, Mozilla et Opera dans les exemples des prochains
chapitres.
WebKit
webkit
Mozilla
moz
Opera
Konqueror
khtml
Microsoft
ms
Chrome
chrome
tableau 1.03: Les navigateurs les plus utiliss et les prfixes correspondants.
Fonctionnement des prfixes de navigateur

Comment fonctionnent ces prfixes dans la pratique ? Nous
utiliserons la proprit border-radius pour lexemple. En
admettant que nous voulions arrondir les coins dun lment
avec un rayon de 10 pixels, voici la marche suivre:
.foo {
-webkit-border-radius: 10px;
11
Openmirrors.com
CSS3.indd 11
28/12/10 17:53:24
-moz-border-radius: 10px;
}
Les navigateurs utilisant WebKit (le moteur de Safari, Safari

mobile et Chrome) et Gecko (le moteur de Firefox) supportent
tous la proprit border-radius par le biais de leurs versions
prfixe, tandis quOpera supporte la proprit sans prfixe. IE9
supportera galement border-radius sans laide dun prfixe.
Ordre optimal
Quand vous utiliserez des prfixes de navigateur, faites attention lordre dans lequel vous crivez les rgles de vos dclarations. Vous remarquerez dans lexemple prcdent que nous
avons commenc par crire la proprit avec prfixe, puis la
proprit CSS3 sans prfixe.
Pourquoi mettre la vritable proprit CSS3 en dernier? Parce
que vos styles fonctionneront vraisemblablement dans dautres
navigateurs lavenir, largissant progressivement vos perspectives. Et lorsquun navigateur implmentera enfin la proprit
telle quelle est dfinie dans la spcification, cette vritable
proprit, tant en queue de liste, prendra le pas sur la version
exprimentale. Si la version prfixe diffre de la vritable
proprit, vous garantissez la suprmatie de la norme finale.
Ne craignez pas les prfixes de navigateur!

Votre premire raction sera sans doute: Beurk! Encore du
propritaire! Pourtant je vous assure que cest une avance,
et que cest bien moins compliqu que les contorsions et la rigidit associes aux solutions sans CSS3. Et cest galement un
aspect important de lvolution de la spcification.
En utilisant ces proprits ds maintenant par le biais des prfixes
de navigateur, nous pouvons tter le terrain tout en offrant un
CSS3.indd 12
12
20/12/10 0:18:53
retour dexprience non ngligeable aux crateurs de navigateurs avant que la spcification ne soit finalise. Souvenez-vous
galement que les prfixes sont gnralement rattachs des
standards proposs. Cest trs diffrent des bidouillages en CSS
que nous avons tous dj utiliss pour rsoudre des problmes
dinteroprabilit.
Certains compareront les prfixes de navigateur aux petits
dtournements de syntaxe que nous sommes nombreux avoir
utiliss pour cibler des versions particulires dun navigateur
(par exemple, lutilisation de w\idth: 200px ou de _width:
200px pour cibler des versions spcifiques de IE). Au contraire,
ces prfixes sont un aspect important du processus de standardisation, permettant une proprit dvoluer au sein dune
implmentation concrte.
Comme Eric Meyer, expert de CSS, lexplique dans son article
Prefix or Posthack sur A List Apart (http://bkaprt.com/
css3/2/)4:
Les prfixes nous permettent de contrler notre approche du code.
Auparavant, nous devions nous faufiler dans les failles dinterprtation de la syntaxe pour seulement corriger les diffrences dimplmentation que lon rencontrait. Ctait une approche compltement
ractive. Les prfixes sont une approche proactive.
Il poursuit en suggrant que non seulement lutilisation de
prfixes est positive, mais quelle devrait tre au centre du
processus de standardisation, car elle:
... forcerait les crateurs de navigateurs et le groupe de travail
uvrer ensemble afin de concevoir des tests permettant dvaluer
linteroprabilit. Ces tests pourraient alors servir de guide pour
optimiser linteroprabilit plus rapidement. On pourrait littralement livrer limplmentation prfixe dans une bta publique et
supprimer le prfixe dans la version suivante.
4. Adresse complte: http://www.alistapart.com/articles/prefix-or-posthack/
13
Openmirrors.com
CSS3.indd 13
20/12/10 0:18:53
Ne vous plaignez donc pas des prfixes de navigateur.

Utilisez-les en sachant que vous faites partie dun processus qui
vous permet de faire votre travail aujourdhui, tout en pavant la
route vers un futur qui les verra disparatre.
Pourquoi toutes ces rptitions?

Vous trouverez peut-tre quil est idiot de rpter ce qui semble
tre la mme proprit trois ou quatre fois pour chaque navigateur, et je pourrais vous laccorder.
La ralit, cest que des solutions sans CSS3 ncessiteraient
certainement un code rigide et plus complexe, bien que sans
doute moins rptitif.
Nous naurons pas besoin de nous rpter ternellement. Ce
nest quune tape temporaire mais ncessaire pour sparer les
implmentations potentiellement variables de chaque navigateur de limplmentation finale.
Avant de faire des merveilles avec la poigne de proprits
CSS3 utilisables et leurs prfixes respectifs, efforons-nous de
comprendre les bases des transitions CSS. En comprenant les
transitions et leur fonctionnement, nous pourrons plus facilement les combiner avec dautres proprits pour crer des
expriences exceptionnelles.
CSS3.indd 14
14
20/12/10 0:18:53
comprendre
les transitions
css
Ctait lanne 1997 et je me trouvais dans un appartement

affreusement dcrpit de la magnifique ville dAllston dans
ltat du Massachusetts. Je passais mes nuits plucher du code
source et apprendre lHTML en autodidacte, et mes journes
emballer les CD dun petit label local pour trois ronds (do lappartement dcrpit). Vous voyez certainement de quoi je parle.
Un beau soir, je brandis triomphalement le poing en signe de
victoire. Je venais de programmer mon premier effet de survol
en JavaScript. a vous rappelle quelque chose?
Je me souviens encore de mon merveillement en voyant le
bouton grossier que javais htivement labor se transformer au passage du curseur de la souris. lpoque, je savais
peine ce que je faisais, mais le simple fait de voir un lment
de la page changer, dynamiquement, tait, disons-le, magique.
En une dcennie, beaucoup de choses ont chang en matire dinteractivit et dexprience visuelle sur le Web. Historiquement,
des technologies comme Flash et JavaScript ont apport
C o m p r e n d r r e l e s t r a n s i t i o n s C SS
15
Openmirrors.com
CSS3.indd 15
20/12/10 0:18:53
lanimation, le mouvement et linteraction. Mais maintenant que

les navigateurs commencent implmenter les transitions et les
transformations CSS, certaines de ces animations et autres ornements peuvent aisment tre dplacs vers nos feuilles de style.
En 1997, mon premier rollover en JavaScript mavait cot
plusieurs nuits dintense rflexion, de nombreuses lignes de
code qui me paraissaient alors compltement trangres, et
plusieurs images. Aujourdhui, CSS3 permet des interactions
bien plus riches et flexibles laide de quelques lignes de code
simples qui, par bonheur, se comportent sagement dans les
navigateurs qui ne les supportent pas encore.
Comme je le disais au premier chapitre, nous pouvons
commencer utiliser certaines proprits CSS3 ds maintenant, du moment que nous choisissons le bon domaine dapplication. On peut dire la mme chose des transitions CSS. Elles
ne remplaceront certainement pas les technologies existantes
comme Flash, JavaScript ou SVG (surtout faute dune meilleure
interoprabilit), mais elles peuvent tre utilises avec les principales proprits CSS3 mentionnes au chapitre 1 (ainsi que les
transformations et les animations CSS dont nous parlerons plus
loin) pour lever la couche dexprience dun cran. Et surtout,
elles sont relativement simples implmenter pour le Web designer qui connat dj CSS. Quelques lignes de code suffisent.
Je prsente les transitions CSS ds le chapitre 2, car nous allons
les appliquer de nombreux exemples dans la suite du livre. Il
est prfrable de comprendre les bases de la syntaxe et du fonctionnement des transitions avant de creuser ltude de cas.
LA QUEUE QUI REMUE LE CHIEN

Dveloppes lorigine exclusivement par lquipe de WebKit
pour Safari, les transitions CSS sont maintenant un brouillon
de travail de la spcification au W3C. (Les transformations et
les animations CSS partagent cette mme histoire, et nous en
parlerons respectivement aux chapitres 4 et 6.)
CSS3.indd 16
16
20/12/10 0:18:54
Voil lexemple type dune innovation indpendante devenue

standard potentiel. Je dis potentiel, car ce nest pour linstant
quun brouillon. Cependant, Opera a rcemment ajout la prise
en charge des transitions CSS dans sa version 10.5 et Firefox a
promis le support pour la version 4.0. En dautres termes, bien
que la spcification soit un brouillon en constante volution,
elle est assez stable pour quOpera et Firefox prennent la chose
au srieux et la supportent. Et surtout, les transitions CSS ne
sont plus lexclusivit de Safari.
Jetons un il, si vous le voulez bien, au fonctionnement des transitions. Comme pour les proprits CSS3 cites au chapitre1, je ne fais
que les prsenter avec leur syntaxe de base afin que vous compreniez bien leur fonctionnement. Par la suite, nous ferons plein de
trucs marrants avec les transitions. Nous les utiliserons pour polir
les exemples des chapitres suivants, et vous serez au point pour les
intgrer de faon approprie dans vos propres projets.
MAIS QUE SONT CES TRANSITIONS CSS?

Jaime comparer les transitions CSS du beurre, un liant qui fluidifie les changements de valeur dans vos feuilles de style, lors dinteractions comme le survol dun lien, un clic ou une mise en focus.
Contrairement au vrai beurre, les transitions ne font pas grossir il
ne sagit que de quelques rgles simples ajouter dans votre feuille
de style pour enrichir certains vnements de votre design.
Le W3C dfinit les transitions CSS trs simplement
(http://bkaprt.com/css3/3/)1:
Les transitions CSS permettent au changement de la valeur dune
proprit CSS de se produire progressivement sur une dure spcifie.
Ce lissage anime le changement dune valeur CSS dclench par
un clic de la souris, une mise en focus, un tat active ou tout
autre changement affectant llment (y compris le changement
de lattribut class de llment).
1. Adresse complte: http://www.w3.org/TR/CSS3-transitions/
17
Openmirrors.com
CSS3.indd 17
20/12/10 0:18:54
UN EXEMPLE SIMPLE
Commenons par un exemple simple. Nous allons ajouter une
transition au changement de la couleur darrire-plan dun lien. Au
survol du lien, sa couleur darrire-plan va changer, et nous allons
utiliser une transition pour lisser ce changement. Cet effet qui
ncessitait auparavant lemploi de Flash ou de JavaScript est maintenant ralisable avec seulement quelques lignes de CSS.
Le balisage est celui dun hyperlien classique, du type:
<a href="#" class="foo">Transition-me!</a>
Nous allons ensuite ajouter une dclaration pour ltat normal

du lien avec une petite marge interne et un arrire-plan vert
clair, suivie du changement darrire-plan donnant un vert plus
fonc au survol (fig 2.01):
a.foo {
padding: 5px 10px;
background: #9c3;
}
a.foo:hover {
background: #690;
}
fig 2.01: Ltat normal et ltat :hover

du lien
Ajoutons maintenant une transition ce changement de couleur

darrire-plan, afin de lisser et danimer la diffrence sur une
dure spcifie (fig 2.02).
Pour le moment, nous nutiliserons que les proprits prfixe
qui fonctionnent dans les navigateurs utilisant le moteur WebKit
(Safari et Chrome) pour simplifier les choses. Nous ajouterons
par la suite les prfixes pour Mozilla et Opera.
CSS3.indd 18
18
20/12/10 0:18:54
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition-property: background;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
a.foo:hover {
background: #690;
}
fig 2.02: Il est difficile de reprsenter une transition anime sur le papier, mais
cest pourtant lintention de cette image; notez la transition fluide de larrire-plan
vert clair vers le vert sombre.
Vous remarquerez les trois parties de la transition dans la

dclaration:
transition-property: proprit laquelle la transition sapplique
(dans ce cas, la proprit background).
transition-duration: dure de la transition (0,3 secondes).
transition-timing-function: courbe de vitesse de la transition
(ease).
LA FONCTION DE TIMING (OU: JAURAIS

VRAIMENT D SUIVRE CES COURS DE MATHS)
La valeur de la fonction de timing permet de faire varier la
vitesse de la transition au fil du temps, en choisissant lune des
six possibilits suivantes : ease, linear, ease-in, ease-out,
ease-in-out et cubic-bezier (qui vous permet de dfinir
votre propre courbe de vitesse).
19
Openmirrors.com
CSS3.indd 19
20/12/10 0:18:55
Si comme moi vous dormiez en cours de gomtrie, pas de

panique. Essayez simplement chacune de ces valeurs pour voir
la diffrence.
Dans notre exemple, la dure de la transition est si rapide (
peine 0,3 secondes) quil serait difficile de faire la diffrence
entre les six options. Pour les animations plus longues, le choix
du timing prend toute son importance, la diffrence tant plus
flagrante.
En cas de doute, ease (qui est galement la valeur par dfaut) ou
linear seront tout fait adapts pour des transitions courtes.
DIFFRER LA TRANSITION
Revenons notre exemple. Les transitions peuvent tre diffres par rapport linstant o lvnement dclencheur se
produit lcran. Admettons par exemple que notre voulions
que la transition darrire-plan se produise une demi-seconde
aprs le survol du lien. Nous pouvons pour cela utiliser la
proprit transition-delay.
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition-property: background;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
-webkit-transition-delay: 0.5s;
}
a.foo:hover {
background: #690;
}
CSS3.indd 20
20
20/12/10 0:18:55
TRANSITIONS ABRGES
Nous pouvons simplifier de faon consquente la dclaration
de la transition (non diffre) en utilisant la proprit de transition abrge. Cest la syntaxe que nous utiliserons dans les
prochains exemples.
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition: background 0.3s ease;
}
a.foo:hover {
background: #690;
}
Nous avons maintenant une rgle bien plus compacte qui

produit le mme rsultat.
Transition abrge avec retardateur

Si nous voulons rajouter le retard dune demi-seconde la
version abrge de la transition, nous pouvons placer la dure
la fin de la rgle, comme ceci:
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition: background 0.3s ease 0.5s;
}
a.foo:hover {
background: #690;
}
videmment, cette fabuleuse transition marche trs bien dans

les navigateurs WebKit, mais que fait-on des autres?
21
Openmirrors.com
CSS3.indd 21
20/12/10 0:18:56
INTEROPRABILIT
Comme je le disais plus haut, les transitions taient dveloppes lorigine par WebKit et sont implmentes dans Safari et
Chrome depuis la version 3.2, mais Opera les supporte galement dans sa version 10.5 (http://bkaprt.com/css3/4/)2 et Firefox
4.0 devrait franchir le pas (http://bkaprt.com/css3/5/)3.
De ce fait, il est important dajouter les prfixes appropris afin
que nos transitions fonctionnent dans dautres navigateurs au
gr de leur implmentation.
EMPILER LES TRANSITIONS

Voici une dclaration revue et corrige comprenant les prfixes
-moz- et o-, ainsi que la vritable proprit CSS3 transition.
Une fois de plus, nous plaons la proprit sans prfixe en dernier
dans la pile afin de garantir que limplmentation finale prvaudra
sur les autres quand la proprit aura acquis son statut dfinitif.
a.foo {
padding: 5px 10px;
background: #9c3;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
a.foo:hover {
background: #690;
}
Grce cette pile, nous pouvons lisser ce changement de couleur

darrire-plan dans les versions actuelles de Safari, Chrome et
2. Adresse complte: http://www.opera.com/docs/specs/presto23/css/transitions/
3. Adresse complte: https://developer.mozilla.org/en/CSS/CSS_transitions
CSS3.indd 22
22
20/12/10 0:18:56
Opera, ainsi que dans les futures versions des navigateurs qui
choisissent de supporter la proprit.
TATS DE TRANSITION
Je me rappelle avoir t un peu troubl quand jai commenc
jouer avec les transitions CSS pour la premire fois. Naurait-il
pas t plus logique de placer les proprits de transition dans
la dclaration :hover, puisque cest elle qui dclenche cette
transition? En fait, outre :hover, il existe dautres tats potentiels, et vous voudrez sans doute que la transition sapplique sur
chacun de ces tats sans avoir la dupliquer.
Par exemple, vous pourriez vouloir que la transition se produise
galement sur les pseudo-classes:focus et:active du lien. Au
lieu dajouter la pile de proprits chacune de ces dclarations,
les instructions de transition sont attaches ltat normal et
ainsi dclares une seule fois.
Lexemple suivant applique le mme changement darrire-plan
ltat:focus. La transition sera ainsi dclenche lors du survol
et de la mise en focus du lien ( laide du clavier par exemple).
a.foo {
padding: 5px 10px;
background: #9c3;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
a.foo:hover,
a.foo:focus {
background: #690;
}
23
Openmirrors.com
CSS3.indd 23
20/12/10 0:18:56
APPLIQUER UNE TRANSITION PLUSIEURS

PROPRITS
Admettons quen plus de la couleur darrire-plan, nous voulions
aussi changer la couleur du texte du lien et lui appliquer une
transition. Pour ce faire, nous pouvons enchaner plusieurs
transitions en les sparant dune virgule. Chaque transition peut
avoir une dure et une fonction de timing diffrentes (fig2.03).
(Le symbole indique que la ligne se poursuit.)
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition: background .3s ease,
color 0.2s linear;
-moz-transition: background .3s ease,
color 0.2s linear;
-o-transition: background .3s ease, color 0.2s linear;
transition: background .3s ease, color 0.2s linear;
}
a.foo:hover,
a.foo:focus {
color: #030;
background: #690;
}
fig 2.03: Ltat normal et ltat:hover

du lien
APPLIQUER UNE TRANSITION TOUTES LES

PROPRITS POTENTIELLES
Au lieu de lister plusieurs proprits, on peut utiliser la valeur
all pour appliquer une transition toutes les proprits
disponibles.
CSS3.indd 24
24
20/12/10 0:18:57
Plaons all dans notre exemple au lieu de lister background et

color sparment. Les deux proprits partageront dsormais
la mme dure et la mme fonction de timing.
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a.foo:hover,
a.foo:focus {
color: #030;
background: #690;
}
Voil une faon pratique de capter tous les changements se

produisant sur les vnements :hover, :focus ou :active sans
avoir lister chaque proprit.
QUELLES SONT LES PROPRITS CSS

COMPATIBLES AVEC LES TRANSITIONS?
Maintenant que nous avons russi appliquer une transition
larrire-plan et la couleur dun hyperlien, nous pouvons nous
intresser de nombreuses autres proprits, comme width,
opacity, position et font-size. Un tableau listant toutes les
proprits (ainsi que leurs types) compatibles avec les transitions est disponible sur le site du W3C (http://bkaprt.com/
css3/6/)4.
4. Adresse complte: http://www.w3.org/TR/css3-transitions/#properties-from-css-
25
Openmirrors.com
CSS3.indd 25
20/12/10 0:18:57
Les bnfices pour la fluidit de lexprience sont vidents.

Nous utiliserons plusieurs de ces proprits combines aux
transitions dans les prochains chapitres, au travers de nos
tudes de cas.
POURQUOI NE PAS PLUTT UTILISER

JAVASCRIPT?
Dans la mesure o tous les navigateurs ne supportent pas
(ou du moins ne promettent pas de supporter) les transitions
CSS, vous vous demandez peut-tre pourquoi ne pas utiliser
plutt une solution en JavaScript pour grer cette animation.
Des architectures trs utilises comme jQuery, Prototype et
script.aculo.us permettent depuis quelque temps dj de crer
des animations qui fonctionnent dans tous les navigateurs.
Tout dpend de limportance des transitions pour lexprience.
Le point sur lequel jinsisterai dans ce petit bouquin, cest que
vous pouvez adopter la simplicit et la flexibilit du CSS3 sans
rserve si vous choisissez de lappliquer au domaine appropri
de lexprience utilisateur, en enrichissant linteractivit de la
page. Gnralement, lanimation de ces interactions, quand elle
est gre par des transitions CSS, nentre pas en conflit avec
lidentit visuelle, la lisibilit ou encore la mise en page du site
Web. Par consquent, la possibilit dajouter quelques lignes de
CSS pour dclencher une animation simple et native dans les
navigateurs qui la supportent (plutt que de saider dune architecture JavaScript) semble tre une option raisonnable. Et je
suis content que nous ayons cette option notre disposition.
SOYEZ MALIN, SOYEZ SUBTIL

Comme avec nimporte quel outil tout neuf, il est important
dutiliser les transitions judicieusement. On peut aisment se
laisser aller ajouter des transitions sur toute la page, pour finalement aboutir une sorte de monstre palpitant et pnible. Il
CSS3.indd 26
26
20/12/10 0:18:57
est essentiel de dterminer o les transitions enrichissent lexprience de lutilisateur et o elles ne sont quun bruit superflu.
Il est galement crucial de sassurer que la vitesse de la transition ne ralentit pas une action de lutilisateur qui serait autrement instantane. Utilisez-les avec prudence.
Pour avoir une ide des vitesses appropries pour les transitions et les animations CSS, consultez larticle de Trent Walton
sur le sujet: http://bkaprt.com/css3/7/5.
Maintenant que nous avons une solide connaissance du fonctionnement de base des transitions CSS dun point de vue
technique, nous pouvons les utiliser pour fluidifier la couche
dexprience dans les exemples qui suivent, ds le tout prochain
chapitre. Venons-en au fait.
5. Adresse complte: http://trentwalton.com/2010/03/22/CSS3-in-transition/
27
Openmirrors.com
CSS3.indd 27
20/12/10 0:18:58
Broder
avec css3
Nous avons pass les deux premiers chapitres nous former,
nous mettre au parfum de ce qui tait utilisable ds prsent dans
CSS3. Nous avons galement dit que la couche dexprience tait
actuellement lendroit le plus appropri pour appliquer CSS3.
Rcapitulons les points importants dont nous avons parl
jusqu prsent. Souvenez-vous:
1. Il existe des proprits CSS3 essentielles qui sont utilisables ds
maintenant.
2. Tout le monde peut utiliser ces proprits dans ses propres projets,
particulirement en ciblant la couche dexprience.
3. Les prfixes de navigateur nous permettent daller de lavant et
daider tester des proprits exprimentales dans un contexte rel.
4. Les transitions CSS ne sont plus une simple exprience propritaire,
mais un brouillon de spcification que dautres navigateurs sont en
train dadopter. Alors utilisons-les!
Tout cela tant acquis, il est maintenant temps de nous amuser

avec tous nos nouveaux jouets, et de les mettre luvre dans
le contexte dun design complet.
CSS3.indd 28
28
20/12/10 0:18:58
NOTRE TUDE DE CAS

Pour la plupart des exemples suivants, jutiliserai une tude de
cas fictive de ma cration: un hommage humoristique toutes
les choses laisses sur la Lune par les astronautes assez chanceux pour y avoir pos le pied (fig 3.01). Il y a lorigine de ce
sujet une histoire qui se rapporte directement au thme de ce
livre. Permettez-moi douvrir une rapide parenthse.
fig 3.01: Notre tude de cas fictive, Things We Left on the Moon.
Messages dans lespace et sur le Web

En 1969, les astronautes Neil Armstrong et Buzz Aldrin sont
devenus les premiers hommes poser le pied sur la Lune. Javais
toujours t, comme tout un chacun, intress par les voyages
spatiaux et la NASA, mais en entendant parler de la mission
Apollo 11 loccasion de son quarantime anniversaire, jai eu
envie de creuser davantage lhistoire et les vnements entourant
B r o d e r av e c c s s 3
29
Openmirrors.com
CSS3.indd 29
20/12/10 0:18:59
latterrissage. Jtais en particulier fascin par tous les trucs qui

avaient t laisss sur la Lune, et qui y sont encore ce jour.
Parmi tous les objets laisss sur place, il y en a qui retint tout particulirement mon attention, et qui est un exemple parfait de design
dexprience utilisateur. Cest un petit disque de silicium ( peine
plus grand quune pice de deux euros) sur lequel sont gravs des
messages damiti des dirigeants de plus de soixante-dix pays du
monde entier. Il vous faudra un microscope pour les lire : les
limites en matire de place disponible bord ont inspir la conception dun minuscule objet commmoratif, qui pouvait tre apport
sur la Lune lintention des prochains visiteurs (fig 3.02).
La NASA concevait en quelque sorte un objet en utilisant la dernire
technologie du moment, lintention dun public inconnu dans un
futur proche ou lointain. a vous dit quelque chose?
fig 3.02: Le petit disque de silicium ( peine plus gros quune pice de 50 cents
amricain) laiss sur la Lune par les astronautes dApollo 11 (Nasa/avec laimable
autorisation de nasaimages.org)
CSS3.indd 30
30
20/12/10 0:18:59
Plus tard, en 1977, un problme de conception similaire fut

rsolu pour les sondes Voyager 1 et Voyager 2 grce au Golden
Record: un enregistrement phonographique en cuivre plaqu or
contenant des sons, des images et des schmas de la vie sur Terre
(fig 3.03). Cet enregistrement est en quelque sorte une bouteille
lance dans lespace lintention de civilisations potentielles existant au-del de notre systme solaire. Sur la bote sont graves,
dans un langage symbolique, la procdure pour lire lenregistrement, la galaxie do il provient et dautres instructions.
Tout comme le disque de silicium qui repose sur le sol poussireux de la Lune, le Golden Record a t conu laide de
la dernire technologie disponible au moment de sa cration,
pour une exprience utilisateur comportant de nombreuses
inconnues. Les destinataires extraterrestres sauront-ils voir,
sentir et entendre son contenu?
fig 3.03: La bote plaque or du Golden Record, un enregistrement

phonographique embarqu dans les sondes Voyager 1 et 2. (Avec laimable
autorisation de la NASA/JPL-Caltech)
31
Openmirrors.com
CSS3.indd 31
20/12/10 0:18:59
Nous avons beaucoup apprendre du disque de silicium laiss

sur la Lune et du Golden Record qui fend le vide intersidral.
Nous pouvons en dduire que la meilleure technologie disponible peut permettre de transmettre un message un public
essentiellement inconnu.
Nous aussi, Web designers, envoyons des bouteilles la mer
quand nous publions nos crations sur le Web. Nous pouvons
faire des suppositions sur le genre de lectorat, ce quil est capable
de comprendre exactement, etc., mais nous ne sommes jamais
informs 100 %. Cela ne doit pas nous empcher dutiliser
la meilleure technologie disponible pour dlivrer le message
et lexprience qui laccompagne, et qui sera plus ou moins
dtaille selon les capacits de lappareil.
Notre travail de designer ne consiste pas simplement dcorer
la bouteille et la rendre prsentable, mais plutt trouver des
moyens denrichir le rcit et de mettre le message en valeur.
CSS3 peut nous aider ds aujourdhui dans cette tche.
Vous savez maintenant pourquoi notre tude de cas rend
hommage ces messages laisss sur la Lune ou flottant dans
lespace. Il est grand temps de commencer dissquer le site
par petits morceaux. Il ma sembl plus utile de rassembler
toutes les techniques dont nous allons parler au mme endroit.
Vous pourrez utiliser ce modle et tous les exemples comme
bon vous semble dans un vrai site bien vivant.
Vous pouvez tlcharger le code exemple de ltude de cas
ladresse http://CSS3exp.com/code.
Chacun des chapitres restants sattaque diverses sries dexemples employant CSS3. Plutt que dessayer dtre exhaustif et de
vous dire tout ce quil faut savoir sur CSS3, je vais faire tout
le contraire: mintresser des exemples cibls et trs spcifiques, tout en montrant comment ils fonctionnent dans un
contexte simul des snacks emporter que vous pourrez
utiliser immdiatement aprs avoir digr ces pages. Burp.
CSS3.indd 32
32
20/12/10 0:19:00
SURPRISE ET MERVEILLEMENT
Un des aspects qui rend le Web si diffrent, si intressant par
rapport aux supports statiques, cest linteractivit. linverse du
papier, les pixels peuvent ragir, bouger, et mme surprendre.
Et cest cette interactivit quil est si facile denrichir avec CSS3
dans les navigateurs qui le supportent, sans que les autres se
sentent flous.
Un excellent exemple de surprise et dmerveillement utilisant
CSS3 se trouve sur le site personnel du designer et dveloppeur
nerlandais Faruk Ate (http://farukat.es). Dans la barre de navigation latrale se trouve une liste de liens vers divers rseaux
sociaux qui, au survol, slargissent et prennent vie grce
plusieurs traitements en CSS3 et une transition fluide (fig 3.04).
fig 3.04: La barre de navigation latrale et le traitement du survol sur le site

de Faruk Ate.
Ce qui ressemble une liste normale comprenant du texte et

des images devient tout coup bien plus intressant quand on
33
Openmirrors.com
CSS3.indd 33
20/12/10 0:19:00
interagit avec. Cest un exemple parfait denrichissement de

la couche dexprience, et Faruk utilise un certain nombre de
proprits CSS3 pour produire cet effet (dans les navigateurs
qui les supportent).
La figure 3.05 prsente ltat par dfaut et ltat au survol sous Internet
Explorer 7, qui ne supporte pas CSS3 du tout. Vous remarquerez
cependant que mme si ltat au survol nest pas aussi sophistiqu,
lexprience nen reste pas moins utilisable, lisible et fonctionnelle.
Sans compter que ltat par dfaut est quasiment identique.
fig 3.05: Sous IE7, le site de Faruk Ate ne prsente pas le mme traitement visuel
quavec CSS3, mais cela ne pose aucun problme.
Le survol (ou la mise en focus) dun lment est une occasion idale
pour broder un peu de CSS3. Les utilisateurs dInternet Explorer
recevront une exprience diffrente (jusquau jour ou le support
des proprits CSS3 sera implment), mais cette exprience alternative est tout fait acceptable et habituelle, et franchement les
utilisateurs dIE ne sauront pas quils manquent quelque chose.
CSS3.indd 34
34
20/12/10 0:19:00
Jusquau jour o ils essaieront Safari, Chrome, Firefox ou Opera

chez un ami (et sentiront la jalousie les gagner).
LES SITES WEB DOIVENT-ILS OFFRIR

EXACTEMENT LA MME EXPRIENCE
DANS TOUS LES NAVIGATEURS?
Cest une question importante (et tout fait opportune ce
stade) laquelle je tente de rpondre sur ce site au nom de
domaine dmesur (fig 3.06): http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com.
fig 3.06: Le curieusement nomm http://dowebsitesneedtobeexperience

dexactlythesameineverybrowser.com.
Comme avec lexemple de Faruk, les choses deviennent intressantes quand on commence interagir avec le site. la surface, le
site a lair quasiment identique dans la plupart des navigateurs, mais
ds linstant o la souris traverse lcran et survole le texte (fig 3.07),
35
Openmirrors.com
CSS3.indd 35
20/12/10 0:19:01
une srie de proprits, de transitions et de transformations CSS3

sont appliques pour rendre lexprience unique et mmorable.
FIG 3.07: Une exprience enrichie se dvoile ds que lon interagit avec le site.
Merci notre ami CSS3.
Une fois de plus, cest dans la couche dexprience que nous

enrichissons progressivement le design. Le contenu central, la
lisibilit, lutilisabilit et le balisage restent cohrents et intacts.
PARCOURIR LA LUNE
Prenons maintenant notre tude de cas et utilisons CSS3 pour
grer le traitement du survol. Je vais dtailler les tapes de la
cration de la barre de navigation suprieure du site (fig3.08),
o nous allons combiner border-radius, text-shadow et
RGBA des transitions CSS pour crer une exprience qui
surprend et merveille.
CSS3.indd 36
36
20/12/10 0:19:02
fig 3.08: La barre de navigation

suprieure de notre tude de cas
au survol, enrichie en CSS3.
Dabord, le balisage
Comme nous sommes des pros de la smantique, nous allons
baliser la barre de navigation suprieure avec une bonne vieille
liste non ordonne.
<ul id="nav">
<li><a href="#">News</a></li>
<li><a href="#">Things</a></li>
<li><a href="#">Stuff</a></li>
<li><a href="#">Junk</a></li>
<li><a href="#">About</a></li>
</ul>
Pas de bouleversement cataclysmique pour le moment, juste une

structure approprie pour commencer appliquer des styles.
Positionnement des lments

Commenons par utiliser la proprit float pour placer la liste
sur la droite de la page puis ajoutons une petite marge interne;
faisons ensuite flotter chaque lment de la liste.
#nav {
float: right;
padding: 42px 0 0 30px;
}
#nav li {
float: left;
margin: 0 0 0 5px;
}
37
Openmirrors.com
CSS3.indd 37
20/12/10 0:19:02
La figure 3.09 prsente le rsultat. Notre liste est maintenant

horizontale.
fig 3.09: Une liste de liens,

rendue horizontale laide
de quelques rgles CSS.
Styler la couleur des liens avec RGBA

Ajoutons maintenant une petite marge interne chaque lien,
et colorions-les dun blanc lgrement transparent. Nous utiliserons RGBA pour obtenir un blanc (255, 255, 255) opaque
70% (0.7), afin de permettre au texte de simprgner un peu de
la couleur darrire-plan (fig 3.10).
#nav li a {
padding: 5px 15px;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
}
fig 3.10: Les liens coloriss

avec RGBA, se fondant lgrement
dans larrire-plan.
La figure 3.11 prsente un gros plan des liens, dont la lgre

transparence obtenue avec RGBA laisse peine transparatre
larrire-plan.
Offrir une alternative RGBA

RGBA a beau tre un outil incroyablement flexible permettant
de spcifier un niveau dopacit en plus de la couleur, il nest pas
CSS3.indd 38
38
20/12/10 0:19:02
pris en charge par tous les navigateurs. Les dernires versions de

Safari, Chrome, Firefox et Opera le supportent toutes, et il fonctionne sous Internet Explorer 9, mais que fait-on dIE6 8?
fig 3.11: Un gros plan des liens semitransparents.
Cest l quune couleur de secours entre en jeu. Quand on utilise

RGBA pour dfinir les couleurs, une bonne pratique consiste
spcifier une couleur simple en premier, comme solution de
repli pour les navigateurs qui ne supportent pas encore RGBA.
#nav li a {
padding: 5px 15px;
font-weight: bold;
color: #ccc;
color: rgba(255, 255, 255, 0.7);
}
Les navigateurs qui supportent RGBA outrepasseront la couleur

simple (un gris clair #ccc dans le cas prsent), tandis que les
navigateurs qui ne supportent pas encore RGBA ignoreront la
rgle RGBA.
Voil donc un point important retenir: spcifiez des couleurs
alternatives aux couleurs RGBA dans une rgle distincte qui
apparat avant la rgle RGBA.
Ajout de text-shadow
Pour la touche finale, utilisons text-shadow afin dappliquer
une ombre trs lgre. Nous allons nouveau utiliser RGBA
pour dfinir la couleur de lombre, un noir opaque 50% qui va
se mler larrire-plan.
39
Openmirrors.com
CSS3.indd 39
20/12/10 0:19:03
#nav li a {
padding: 5px 15px;
font-weight: bold;
color: #ccc;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
La figure 3.12 prsente une comparaison entre les liens sans

ombre ( gauche) et avec ombre ( droite), comme ils apparaissent dans Safari. Cest un dtail peine perceptible, pourtant cette ombre minuscule donne un lger relief au texte par
rapport larrire-plan.
Souvenez-vous que text-shadow fonctionne dans les versions
actuelles de Safari, Chrome, Firefox et Opera. Les navigateurs
qui ne supportent pas text-shadow (euh IE) ignoreront la
rgle sans faire desclandre. Pas dombre, pas de problme.
Une fois lombre en place, nous sommes libres de passer au traitement de:hover. Et cest l que CSS3 va vraiment nous venir
en aide.
fig 3.12: Comparaison des liens

avec (gauche) et sans text-shadow
(droite).
Style des tats hover et focus

Nous allons ajouter un changement de couleur et une couleur
darrire-plan ltat :hover de chaque lien. Une fois de plus,
nous allons utiliser RGBA pour dfinir un arrire-plan blanc
moiti transparent derrire le texte au survol de la souris.
CSS3.indd 40
40
20/12/10 0:19:04
#nav li a {
padding: 5px 15px;
font-weight: bold;
color: #ccc;
color: rgba(255, 255, 255, 0.7);
}
#nav li a:hover,
#nav li a:focus {
color: #fff;
background: rgba(255, 255, 255, 0.15);
}
Nous colorons donc le texte en blanc et nous ajoutons un arrireplan blanc opaque 15 % au survol. Jai galement dcid de
dclarer ce style pour la mise en focus des liens. Les utilisateurs
qui naviguent au clavier, par exemple, verront alors ce changement quand chaque lien sera slectionn.
La figure 3.13 prsente les nouveaux tats :hover (et :focus)
des liens. Les navigateurs qui supportent RGBA auront droit
larrire-plan blanc semi-transparent derrire un texte blanc
plus visible.
fig 3.13: Ltat:hover,

avec un arrire-plan semitransparent cr laide
de RGBA.
Arrondir leffet avec border-radius

Pour pousser le dtail un peu plus loin, nous pouvons arrondir
les coins de larrire-plan au survol en utilisant la proprit
CSS3 border-radius, afin dobtenir une forme de glule dans
les navigateurs qui la supportent.
41
Openmirrors.com
CSS3.indd 41
20/12/10 0:19:04
En nous servant de ce que nous avons appris au chapitre 1 sur la

proprit border-radius et les prfixes de navigateur qui nous
permettent de lutiliser ds maintenant, nous pouvons ajouter
notre pile de proprits la dclaration du lien par dfaut,
comme suit:
#nav li a {
padding: 5px 15px;
font-weight: bold;
color: #ccc;
color: rgba(255, 255, 255, 0.7);
}
#nav li a:hover,
#nav li a:focus {
color: #fff;
background: rgba(255, 255, 255, 0.15);
}
La figure 3.14 prsente le traitement de larrire-plan au survol

avec les coins arrondis laide de border-radius, tel quil
apparatra dans Safari, Chrome, Firefox et Opera, ainsi quIE9.
Noubliez pas de placer la proprit border-radius sans prfixe
la fin de la liste pour que limplmentation finale prvale. Par
exemple, Safari 5 supporte maintenant la proprit borderradius sans prfixe ainsi que webkit-border-radius depuis
la version 4.
Vous vous demandez peut-tre pourquoi je place les rgles
border-radius dans la dclaration #nav li a et non dans
la dclaration #nav li a:hover (lvnement dclencheur).
La rponse se trouve dans la transition CSS que nous allons
ensuite ajouter pour peaufiner la manucure.
CSS3.indd 42
42
20/12/10 0:19:04
fig 3.14: Arrondi des coins

de larrire-plan avec borderradius.
Ajout dune transition

Pour finir, ajoutons une transition aux tats :hover et :focus
des liens de navigation en nous servant de ce que nous avons
appris au chapitre 2. Cet effet subtil permettra de fluidifier
lapparition de la glule darrire-plan. La transition lissera
galement le changement de la couleur du texte, dun blanc
semi-transparent un blanc opaque (fig 3.15).
fig 3.15: Imaginez, si vous y parvenez, lanimation une fois la transition en place.
Nous allons ajouter une pile de transitions fonctionnant dans

Safari, Chrome, Firefox (4.0) et Opera, en plaant la proprit
transition sans prfixe en dernier dans la dclaration, en vue
de limplmentation potentielle de la proprit dans dautres
navigateurs (ou de prochaines versions).
#nav li a {
padding: 5px 15px;
font-weight: bold;
color: #ccc;
color: rgba(255, 255, 255, 0.7);
43
Openmirrors.com
CSS3.indd 43
20/12/10 0:19:05

-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#nav li a:hover,
#nav li a:focus {
color: #fff;
background: rgba(255, 255, 255, 0.15);
}
Rappelez-vous que nous appliquons les proprits de transition

ltat normal de llment. Les transitions sont conues ainsi
afin que leffet se produise ltat :hover, mais galement aux
tats:focus et:active.
Jutilise la valeur all dans notre transition pour capter tous les
changements de proprit sur les tats:hover et:focus (color
et background dans ce cas). Nous aurions galement pu obtenir
la mme transition en listant chacune de ces proprits explicitement dans une liste, spares par des virgules comme ceci:
-webkit-transition:
color 0.3s ease-in-out,
background 0.3s ease-in-out;
-moz-transition:
-o-transition:
transition:
color .3s ease-in-out
background .3s ease-in-out;
CSS3.indd 44
44
20/12/10 0:19:05
On voit bien que la valeur all est sensiblement plus concise et

efficace pour appliquer une transition plusieurs changements.
Broder lexprience
Nous venons de dtailler un exemple plutt simple, consistant
ajouter diverses proprits CSS3 la couche dexprience.
Les navigateurs dignes de ce nom afficheront des liens avec
une ombre porte sur un arrire-plan arrondi semi-transparent. Les navigateurs moins dous ne profiteront pas de lexprience enrichie au survol des liens, mais ce nest pas si grave. Ils
verront une liste de liens horizontale smantiquement structure, et cest ce qui compte vraiment.
Je crois que ce petit exercice dmontre galement quel point il
est facile de produire un effet qui aurait auparavant requis lutilisation de Flash et/ou de JavaScript. Les rgles CSS que nous
avons utilises sont simples, sans dtour, et inoffensives pour
les navigateurs qui ne les supportent pas encore.
Nous avons galement rendu notre CSS3 durable en plaant
la proprit de la spcification finale en dernier. Lcriture de
toutes ces rgles avec tous ces prfixes est un effort ncessaire,
dont les bnfices nont pas de prix: pouvoir utiliser CSS3 maintenant pour enrichir lexprience de nombreux utilisateurs.
EFFET DE SURVOL SIMPLE ET FLEXIBLE

AVEC LA PROPRIT OPACITY
Nous recherchons constamment des solutions pour gagner
du temps et offrir une meilleure flexibilit. CSS3 nous offre
prcisment des solutions en pagaille: la possibilit dobtenir,
en quelques lignes de code, ce qui prenait auparavant plus de
temps et de ressources crer et entretenir.
La proprit opacity est l'un des nombreux outils de notre
atelier de broderie. Comme indiqu au chapitre 1, opacity est
45
Openmirrors.com
CSS3.indd 45
20/12/10 0:19:05
une proprit CSS3 qui permet de dfinir lopacit dun lment

donn. Combine avec RGBA, opacity offre la possibilit
dajouter de la transparence nos designs.
Jaime utiliser opacity pour appliquer des effets de survol
simples et flexibles aux images servant dhyperliens. Jutilise
des changements de transparence pour crer plusieurs tats
partir dune seule image. Ajoutez une dose de transition CSS
dans le shaker, secouez et vous aurez une exprience fabuleuse
et facile retravailler.
Regardons maintenant comment la proprit opacity est
utilise dans notre tude de cas lunaire.
Opacit des images cliquables

La figure 3.16 prsente le pied de page du site exemple sur la
Lune. En dessous des mentions lgales et de notre disclaimer
choc se trouvent trois logos cliquables.
fig 3.16: Le pied de page de Things We Left on the Moon.
Nous allons utiliser la proprit opacity pour contrler le traitement de:hover et de:focus, mais galement pour dfinir le niveau
de transparence initial. Une transition CSS se chargera ensuite de
fluidifier et danimer ce changement pour que leffet soit complet.
Le balisage
Comme pour la barre de navigation suprieure, le balisage
utilis pour ces logos de pied de page est simple et smantique;
cest une simple liste non ordonne dimages hyperlies:
CSS3.indd 46
46
20/12/10 0:19:06
<ul id="footer-logos">
<li><a href="#"><img src="img/logo-sb.png"
alt="Logo SimpleBits" /></a>
</li>
<li><a href="#"><img src="img/icon-feed.png"
alt="Flux RSS" /></a>
</li>
<li><a href="#"><img src="img/icon-bitman.png"
alt="BitMan" /></a>
</li>
</ul>
Opacit et efficacit des images

Jai conu des icnes au format PNG compltement opaques,
sachant que je pourrais ensuite utiliser la proprit opacity
pour ajuster le degr de transparence. Cette possibilit a chang
ma faon de penser le graphisme de mes projets, dans certaines
situations.
Au lieu denregistrer des PNG semi-transparents, jenregistre des
versions opaques (fig 3.17) que je peux ensuite ajuster dans le navigateur. Non seulement je gagne du temps, mais je peux en plus
faire varier le degr de transparence sur les tats:hover,:focus
et:active sans avoir crer plusieurs jeux dimages.
fig 3.17: Les logos crs

au format PNG
sont entirement opaques.
Style de la liste
Les premiers lments de style vont permettre de centrer les images
dans le pied de page, et de les placer lhorizontale (fig3.18).
47
Openmirrors.com
CSS3.indd 47
20/12/10 0:19:06
#footer-logos {
text-align: center;
}
#footer-logos li {
display: inline;
}
FIG 3.18: Les PNG blancs centrs dans le pied de page.
Ajoutons maintenant les valeurs dopacit qui vont mettre les

icnes en veilleuse dans leur tat par dfaut, et les clairer lors
du survol ou de la mise en focus.
#footer-logos a img {
opacity: 0.25;
}
#footer-logos a:hover img,
#footer-logos a:focus img {
opacity: 0.6;
}
Nous affichons ici les images 25 % dopacit, puis nous

augmentons celle-ci 60% lors du survol de la souris ou de la
mise en focus (fig 3.19). Facile, non? Le tout avec un seul exemplaire de chaque image.
Notez que la proprit opacity ne prend pas de prfixe de navigateur, et fonctionnera dans Safari, Chrome, Firefox et Opera.
IE8 et moins ne supportent pas opacity, mais il existe une
solution pour ceux qui nont pas peur de se mouiller un peu.
CSS3.indd 48
48
20/12/10 0:19:06
fig 3.19: Prsentation de ltat:hover des icnes dans le pied de page obtenu en ajustant
la proprit opacity
La manip pour IE
Heureusement, la proprit opacity est maintenant supporte
par Internet Explorer 9 Beta, mais nous pouvons galement
simuler le mme rsultat dans les versions antrieures dIE en
utilisant une proprit propritaire de Microsoft, filter.
Normalement, je ne conseillerais personne dutiliser la
proprit filter, car linverse des proprits prfixe, elle
ne fait pas partie des standards proposs. De plus, la proprit
filter peut affecter les performances suivant lendroit o elle est
employe. Cest du pur bidouillage, mais a reste une solution.
Gardez tout cela lesprit, placez ventuellement cette proprit
en quarantaine dans une feuille de style spare, ou commentez-la soigneusement, et vous aurez une mthode viable.
La marche suivre:
border: none;
opacity: 0.25;
-ms-filter: "progid:DXImageTransform.Microsoft.
Alpha(Opacity=25)"; /* Hack IE 8 */
filter: alpha(opacity = 25); /* Hack IE 5-7 */
}
opacity: 0.6;
49
Openmirrors.com
CSS3.indd 49
20/12/10 0:19:07
-ms-filter:"progid:DXImageTransform.Microsoft.
}
La syntaxe est similaire, sauf que la valeur dopacit passe par

le filtre alpha dIE. Notez quIE8 ignore la proprit filter et
requiert lapposition du prfixe ms-filter, ainsi que quelques
autres cochonneries.
Une fois notre petite combine en place, vous aurez le mme rsultat
sous Internet Explorer (fig 3.20). Je le rpte : utilisez ce trucage
avec prcaution, ou mieux: pas du tout. La triste ralit, cest quil
vous faudra sans doute lutiliser si votre site engendre un trafic non
ngligeable dutilisateurs sous IE (comme la plupart des sites).
fig 3.20: Le pied de page sous IE7 avec le bidouillage en place, la proprit filter simulant
la proprit opacity.
Ajout dune transition

Pour finir, ajoutons une transition au changement dopacit
pour fluidifier le changement de cette valeur et amener une
petite touche danimation qui servira de liant.
Ajoutons la pile de transitions (que vous connaissez bien ce
stade) la dclaration, en ciblant spcifiquement la proprit
opacity cette fois-ci. Choisissons une dure plutt courte
(0,2secondes) et une courbe de vitesse qui acclre puis dclre (ease-in-out).
opacity: 0.25;
CSS3.indd 50
50
20/12/10 0:19:07
Alpha(Opacity=25)'; /* Hack IE 8 */
-webkittransition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
opacity: 0.6;
}
Une fois la transition en place, nous avons un superbe effet de

survol, simple, flexible et qui nutilise quun seul jeu dimages
grce la proprit opacity.
BRODEZ LA TOILE
Comme je le disais plus haut, cette solution a affect la manire
dont je pense les lments graphiques dun design. Nous
pouvons utiliser opacity pour contrler les images de base, en
les fondant dans larrire-plan, puis appliquer une valeur diffrente aux tats :hover, :focus et :active, le tout li par une
transition pour les navigateurs qui le supportent.
Souvenez-vous de la proprit opacity la prochaine fois
que vous crez un traitement de survol pour les images de
vos propres designs. Vous gagnerez du temps et de la bande
passante, et vous vous pargnerez la complexit inutile dune
quelconque solution alternative.
51
Openmirrors.com
CSS3.indd 51
20/12/10 0:19:08
Broder avec CSS3 consiste ajouter rapidement et efficacement

des styles simples qui enrichissent la couche dexprience, qui
surprennent et merveillent les utilisateurs des navigateurs
concerns. Si leur navigateur ne supporte pas lexprience de
haute qualit que vous leur avez rserve, pas de problme, ils
ne sauront pas quils ratent quelque chose !
CSS3.indd 52
52
20/12/10 0:19:08
Transformer
le message
Tout comme les transitions CSS, les transformations CSS

taient initialement dveloppes par lquipe de WebKit, avant
de faire lobjet de deux brouillons de travail au W3C:
1. Transformations CSS 2D (http://www.w3.org/TR/CSS3-2dtransforms/)
2. Transformations CSS 3D (http://www.w3.org/TR/CSS3-3dtransforms/)
Dans ce livre, nous aborderons uniquement les transformations 2D, qui sont pour le moment les plus fonctionnelles. On
pourrait crire un livre entier sur les transformations 3D; elles
ont vritablement quelque chose de magique. Mais les transformations 2D ont plus davance en matire dinteroprabilit et
fonctionnent sous Safari 3.2, Chrome 3.2, Firefox 4.0 et Opera
10.5 (tout comme les transitions).
Que sont donc ces transformations CSS ? Le W3C les dfinit
ainsi:
t r a n s f o r m e r l e m e s s a g e
53
Openmirrors.com
CSS3.indd 53
20/12/10 0:19:08
Les transformations CSS 2D permettent de transformer des

lments rendus en CSS dans un espace bidimensionnel 1 .
Voil qui ne nous en dit pas long. La meilleure faon de
comprendre les transformations, cest de les voir en action.
Commenons donc par dcortiquer un exemple simple qui
utilise diverses transformations 2D pour animer une petite
galerie de photos. Dans la deuxime partie du chapitre, nous
appliquerons ces mmes techniques au site sur la Lune.
TRANSFORMATION DCHELLE
Prenons une liste horizontale de trois photos subtilement encadres, prises lors dun rcent voyage Marthas Vineyard, une
petite le au large du Massachusetts (fig 4.01). Cest un modle
plutt classique: une grille dimages hyperlies.
fig 4.01: Une grille de trois photos hyperlies.
Nous allons une fois de plus nous servir de notre fidle liste
non ordonne pour programmer cette galerie.
<ul class="galerie">
<li><a href="#"><img src="photo-1.jpg" /></a></li>
1. http://www.w3.org/TR/CSS3-2d-transforms/#abstract
CSS3.indd 54
54
c s s 3 p o u r l e s W e b D e s i gne r s
20/12/10 0:19:08

</ul>
La figure 4.02 prsente la liste par dfaut, sans aucun style

appliqu. Vous remarquerez que les images sont un peu plus
grandes que ce que nous voulons obtenir dans le design final.
Cest intentionnel, et nous allons utiliser CSS pour les rduire.
fig 4.02: La liste des photos grand

format, avant lapplication de CSS.
Ajout du style
Ajoutons un peu de CSS pour rendre la liste horizontale et
appliquer une bordure dun pixel chaque image (notez galement que larrire-plan de la page est gris clair #eee).
ul.galerie li {
float: left;
margin: 0 10px;
padding: 10px;
55
Openmirrors.com
CSS3.indd 55
20/12/10 0:19:09
border: 1px solid #ddd;

list-style: none;
}
ul.galerie li a img {
float: left;
width: 200px;
}
Nous avons utilis la proprit float pour positionner les

lments de la liste, dsactiv les puces de la proprit liststyle et ajout une bordure dun pixel chaque li. Nous avons
galement positionn les images elles-mmes et les avons
rduites une largeur de 200 pixels.
Ces deux dclarations compactes suffisent dfinir le design
par dfaut (voir fig 4.01).
Application de la transformation dchelle au survol

Cest le moment dutiliser nos transformations. Ajoutons
une transformation scale pour agrandir la photo au survol.
Rappelez-vous que les images originales sont plus grandes que
la largeur de 200 pixels spcifie dans la feuille de style. Nous
pouvons donc agrandir la photo sans nuire sa qualit.
Les transformations dchelle sont supportes par Safari, Chrome,
Firefox et Opera, avec lutilisation dun prfixe. Crons une pile
qui satisfait ces navigateurs, ainsi que les navigateurs futurs.
ul.galerie li a:hover img {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
Au survol des hyperliens, la taille de limage initiale (200 pixels)

est multiplie par 1,5.
CSS3.indd 56
56
20/12/10 0:19:09
Une valeur de 2 donnerait une photo deux fois plus grande, 0,5
deux fois plus petite, etc.
La figure 4.03 prsente le rsultat, ici sous Safari. Vous noterez
que la transformation ne perturbe pas le reste des lments du
document et agrandit la photo partir du centre sans affecter la
mise en page environnante.
fig 4.03: La photo du milieu survole par la souris, agrandie laide dune transformation
CSS.
Vous pouvez galement utiliser la proprit optionnelle transform-origin pour dcaler lorigine de la transformation avec
les valeurs top, bottom, center ou encore un pourcentage
(consultez http://bkaprt.com/CSS3/8/)2.
Par exemple, pour que la photo sagrandisse partir du coin infrieur gauche de son contenant au lieu du centre, on crirait ceci:
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
}
2. Adresse complte : http://www.w3.org/TR/css3-2d-transforms/#transformorigin
57
Openmirrors.com
CSS3.indd 57
20/12/10 0:19:10
Une ombre porte approprie

Nous allons pousser le dtail et ajouter une ombre porte la
photo au survol. Cest loccasion dutiliser la proprit CSS3
box-shadow pour donner limpression que la photo largie se
soulve de la page.
Lombre porte, trop souvent utilise comme cache-misre par
les designers en panne dinspiration, est une affaire dlicate. Il
est facile de semporter et den mettre des tonnes. Mais dans ce
cas, nous essayons dajouter de la profondeur llargissement
de la photo; cela devrait donc bien fonctionner.
La syntaxe de box-shadow est la mme que celle de la proprit
text-shadow que nous avons utilise au chapitre 3. Seule diffrence, box-shadow requiert les prfixes de navigateur pour fonctionner sous Safari, Chrome et Firefox. (Opera 10+ et IE9 Beta
supportent la proprit box-shadow sans prfixe.) Ajoutons les
rgles correspondantes.
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
Nous avons ajout une pile de proprits box-shadow pour les

navigateurs WebKit et Mozilla compatibles, en terminant par la
version sans prfixe, comme dans les exemples prcdents.
Sur le plan de la syntaxe, nous appliquons ici une ombre noire
et transparente 50% (afin quelle se fonde dans larrire-plan)
sur limage survole, 4px du sommet, 4px de la gauche et avec
un flou de 10px.
CSS3.indd 58
58
20/12/10 0:19:10
fig 4.04: La photo survole, agrandie avec lapplication de box-shadow.
La figure 4.04 montre lombre apparaissant maintenant en

mme temps que la transformation scale lorsque la photo est
survole. Cette combinaison donne limpression que la photo
largie ressort de la page.
Lissage du zoom avec une transition

Enfin, ajoutons une transition pour lisser la transformation
et obtenir un effet de zoom avant/arrire au survol. Cet effet
qui ncessitait auparavant lutilisation de Flash ou JavaScript
est maintenant ralisable dans de nombreux navigateurs avec
seulement quelques lignes de CSS3.
Voici le code CSS complet de notre petite galerie de photos avec
la pile de transitions:
ul.galerie li {
float: left;
margin: 0 10px;
padding: 10px;
border: 1px solid #ddd;
list-style: none;
}
59
Openmirrors.com
CSS3.indd 59
20/12/10 0:19:11
ul.galerie li a img {
float: left;
width: 200px;
-webkittransition: -webkit-transform 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
}
-webkittransform: scale(1.5);
}
Notez cette fois-ci que nous appliquons une transition la

transformation scale, do lutilisation des prfixes appropris
devant les proprits transition et transform.
TRANSFORMER LEXPRIENCE
Maintenant que tout est en place, le rsultat est plutt impressionnant pour quelques lignes CSS ! Nous avons charg les
navigateurs compatibles de grer les effets au lieu dinjecter du
Flash ou du JavaScript.
Une fois de plus dans cet exemple particulier, cest dans la
couche dexprience que nous avons choisi dutiliser pleinement CSS3: quand la photo est survole, nous offrons une vue
amliore. Les navigateurs qui ne supportent pas ces proprits
nen mourront pas.
Les utilisateurs dInternet Explorer, par exemple, verront simplement une galerie de miniatures cliquables, et cest tout fait suffisant.
CSS3.indd 60
60
20/12/10 0:19:11
Si le traitement du survol tait critique, il nous faudrait repenser

notre usage de CSS3 dans la conception lexprience visuelle.
ROTATE , SKEW ET TRANSLATE

En plus de scale, il existe trois autres types de transformation:
la rotation (rotate), la dformation (skew) et la translation
(translate). (La translation dplace un lment selon des coordonnes x/y). Essayons rapidement chacune dentre elles sur
notre galerie de photo pour voir leur fonctionnement.
fig 4.05: Une photo survole, agrandie et pivote sur la gauche laide dune
transformation rotate.
Ajout dune rotation

Si nous voulons que la photo pivote lorsquelle est survole,
tout en conservant lagrandissement, nous pouvons ajouter la
transformation rotate suivante la rgle:hover:
-webkit-transform: scale(1.5) rotate(-10deg);
-moz-transform: scale(1.5) rotate(-10deg);
-o-transform: scale(1.5) rotate(-10deg);
transform: scale(1.5) rotate(-10deg);
}
61
Openmirrors.com
CSS3.indd 61
20/12/10 0:19:12
Lors du survol de la photo, celle-ci est agrandie mais galement

pivote de 10 degrs dans le sens antihoraire laide de rotate
(fig 4.05). Cet effet fonctionnera dans Safari, Chrome, Firefox et
Opera. Une valeur ngative, comprise entre -1deg et -360deg,
fera pivoter llment dans le sens antihoraire, et une valeur
positive comprise entre 1deg et 360deg dans le sens horaire.
Nous pouvons galement appliquer, en plus du traitement du
survol, des rotations diffrentes chaque lment de la liste
dans son tat de base, afin que les photos (et leur cadre) aient
lair davoir t jetes sur la table au hasard. (fig 4.06).
fig 4.06: Lutilisation de rotate donne limpression que les photos sont disperses au
hasard sur la page.
Je rpte dans ce livre que le meilleur endroit pour appliquer

CSS3 est la couche dexprience, mais cela ne veut pas dire que
vous ne pouvez pas appliquer ces techniques la vue par dfaut,
du moment que le domaine critique nest pas affect et que les
navigateurs non compatibles ne rencontrent pas de problme.
CSS3.indd 62
62
20/12/10 0:19:12
En effet, si un navigateur ne supporte pas les rotations et que

les photos saffichent normalement, rien ne laissera supposer
quil y a un problme.
Pas de rotation? Pas de panique!

Un bel exemple dutilisation de rotate dans le design primaire
dune page est visible sur le blog de Panic Software (http://
www.panic.com/blog), qui utilise une rotation trs subtile
laide de CSS3 pour incliner les billets sur la gauche, comme des
feuilles de papier laisses sur un bureau (fig 4.07). Ce nest pas
un lment crucial du design, et si les billets apparaissent sans
rotation (fig 4.08), personne nen sera malade.
fig 4.07: Le blog de Panic Software

utilise une subtile rotation via CSS3
pour plus de ralisme.
fig 4.08: Sans rotation, le blog

est toujours impeccable, rien na lair
de manquer ou de ne pas fonctionner.
63
Openmirrors.com
CSS3.indd 63
20/12/10 0:19:13
Faire tourner le soleil

Un autre bon exemple de lutilisation approprie des transformations CSS se trouve dans Outside (http://outsideapp.com),
une superbe application mto pour iPhone (fig 4.09).
fig 4.09: Lapplication iPhone Outside utilise une rotation pour faire tourner le soleil.
Au sommet de la page se trouve le dessin dun soleil (fig 4.10)

qui tourne 360 laide de la transformation rotate. (Dans ce
cas, JavaScript est utilis pour animer la rotation dans les navigateurs non WebKit, mais nous parlerons danimations 100%
CSS au chapitre 6). Cette subtile amlioration de lexprience
est simple et approprie, car elle imite lanimation qui apparat
dans lapplication iPhone elle-mme. Le soleil ne tourne pas
dans les navigateurs qui ne supportent pas les transformations
CSS mais ce nest pas un problme. Rien ne semble manquer ou
ne pas fonctionner sur la version non anime du site.
CSS3.indd 64
64
20/12/10 0:19:14
fig 4.10: Le soleil de lapplication

Outside pivote et prend vie grce
CSS.
Les transformations, combines aux transitions, peuvent nous

aider mettre en valeur le message global de nos projets. Elles
sont un outil inestimable pour nous autres Web designers.
La transformation skew
La transformation skew prend deux coordonnes x et y et
dforme un lment sur deux axes. Par exemple, si lon voulait
appliquer une transformation skew aux photos de notre galerie,
on utiliserait le code CSS suivant (avec -5deg sur laxe des
abscisses et 30deg sur laxe des ordonnes) (fig 4.11):
-webkit-transform: scale(1.5) skew(-5deg, 30deg);
-moz-transform: scale(1.5) skew(-5deg, 30deg);
-o-transform: scale(1.5) skew(-5deg, 30deg);
transform: scale(1.5) skew(-5deg, 30deg);
}
fig 4.11: Utilisation de la transformation skew pour dformer la photo.
65
Openmirrors.com
CSS3.indd 65
20/12/10 0:19:14
Comme rotate, skew peut prendre un angle positif ou ngatif.

Vous pouvez galement utiliser la mme valeur pour x et y
comme ceci (fig 4.12):
-webkit-transform: scale(1.5) skew(30deg);
-moz-transform: scale(1.5) skew(30deg);
-o-transform: scale(1.5) skew(30deg);
transform: scale(1.5) skew(30deg);
}
fig 4.12: Dformation de la photo de 30 degrs sur les deux axes.
Bon, je vois bien que ce que nous venons de faire subir cette
pauvre photo nest pas franchement attrayant, et dailleurs
javoue que je nutilise pas skew trs souvent; pourtant, je suis
convaincu quon peut lui trouver une utilit.
Par exemple, on pourrait utiliser skew sur des blocs de texte
pour crer des graphismes en 3D, uniquement avec du HTML
smantique et schma CSS3 (fig. 4.13 et 4.14).
La transformation translate
Enfin, la transformation translate vous permet de dplacer
un lment depuis sa position dorigine lcran, selon des
coordonnes x et y.
CSS3.indd 66
66
20/12/10 0:19:15
fig 4.13: Une dmo de Paul Hayes utilisant skew et des transitions pour crer plusieurs
cubes en 3D partir de simples blocs dhypertexte.
(http://www.paulrhayes.com/experiments/cube/multiCubes.html).
fig 4.14: Web Trend Map utilise skew pour placer des avatars sur une grille isomtrique,
crant un mode de visualisation unique partir dlments normalement aligns
(http://webtrendmap.com).
67
Openmirrors.com
CSS3.indd 67
20/12/10 0:19:16
Par exemple, si nous voulions dplacer une image de la galerie

au survol, nous pourrions utiliser translate. Avec notre transition en place, ce mouvement sera fluide.
Voici la syntaxe pour dplacer limage de 20 pixels vers la droite
et de 40pixels vers le bas (fig 4.15):
-webkit-transform: scale(1.5) translate(20px, 40px);
-moz-transform: scale(1.5) translate(20px, 40px);
-o-transform: scale(1.5) translate(20px, 40px);
transform: scale(1.5) translate(20px, 40px);
}
fig 4.15: Utilisation de la transformation translate pour dplacer la photo au survol.
Si nous voulions dplacer limage vers la gauche et/ou le haut,

il nous faudrait utiliser des valeurs ngatives, par exemple
translate(-20px, -40px).
Tout comme les transformations susmentionnes, translate
ne perturbe pas le reste du document et se contente de dplacer
llment exactement l o vous lui dites daller. Vous navez
donc pas vous proccuper des marges internes et externes,
des lments flottants ou du positionnement absolu. Donnez
des coordonnes de translation un lment et il sy rendra.
CSS3.indd 68
68
20/12/10 0:19:16
DIFFRENTES TRANSFORMATIONS AU SERVICE

DU MESSAGE
Lexemple de la galerie de photos dmontre quel point il est
simple dutiliser scale, rotate, skew et translate avec des
transitions pour crer des expriences plus riches. La clef pour
bien utiliser ces transformations consiste identifier les situations o elles serviront vritablement le message.
On peut trs vite se laisser emporter avec les transformations,
simplement parce quelles sont amusantes et faciles implmenter. Appliquez-les avec parcimonie dans la couche dexprience et vous aurez un meilleur produit fini.
TRANSFORMER LA LUNE
Revenons notre site exemple sur la Lune, o jai utilis
plusieurs transformations et transitions pour gayer un peu la
galerie des miniatures (fig 4.16).
fig 4.16: Le diaporama de Things We Left on the Moon.
Au survol de chaque objet laiss sur la Lune, limage ragit

dune faon diffrence selon la nature de lobjet en question:
un donut, une tondeuse gazon, un chat, etc.
69
Openmirrors.com
CSS3.indd 69
20/12/10 0:19:17
Non seulement cette combinaison transformation/transition

est amusante et simple implmenter, mais en plus elle est
inoffensive pour les navigateurs qui ne supportent pas les bouts
de CSS3 qui rendent cette interaction possible.
Passons en revue chaque objet pour voir comment parfaire lexprience en combinant scale, rotate, le positionnement et la
proprit opacity avec des transitions.
tayer le message
En rflchissant au sens de chaque objet, on peut appliquer
une transformation et/ou une transition qui taye lhistoire de
lobjet en question.
Comment ragiraient un gros donut ou un fauteuil inclinable
linteraction? Nous pouvons utiliser des transformations CSS3
adaptes pour enrichir lexprience (fig 4.17).
fig 4.17: Les objets que lon va transformer.
CSS3.indd 70
70
20/12/10 0:19:17
Le balisage
Pour programmer ce curieux assemblage, la smantique est
plutt simple: une simple liste ordonne dimages hyperlies
accompagnes de lgendes.
<ol id="things">
<li id="things-1">
<a href="#"><img src="img/doughnut.png" /></a>
<h2>1 big doughnut</h2>
</li>
<li id="things-2">
<a href="#"><img src="img/mower.png" /></a>
<h2>1 lawnmower</h2>
</li>
<li id="things-3">
<a href="#"><img src="img/cat.png" /></a>
<h2>1 astro cat</h2>
</li>
<li id="things-4">
<a href="#"><img src="img/recliner.png" /></a>
<h2>1 recliner</h2>
</li>
<li id="things-5">
<a href="#"><img src="img/gnome.png" /></a>
<h2>1 magic gnome</h2>
</li>
</ol>
Vous remarquerez que nous avons ajout un id #trucs la liste ellemme, ainsi quun id chaque lment de la liste, afin de pouvoir
appliquer des transformations diffrentes chaque lment.
Styles de base pour chaque lment

Nous allons ensuite dfinir le style de base pour chaque
lment de la liste qui contient les images hyperlies. La dclaration suivante positionne les lments lhorizontale, active le
positionnement relatif pour le contexte dans lequel nous allons
ensuite placer chaque image de manire absolue, et enfin ajoute
un arrire-plan coins arrondis semi-transparent.
71
Openmirrors.com
CSS3.indd 71
20/12/10 0:19:18
ol#things li {
position: relative;
float: left;
margin: 0 15px 0 0;
padding: 10px;
background: #444; /* couleur de secours non RGBA */
background: rgba(255, 255, 255, 0.1);
list-style: none;
-o-border-radius: 4px;
border-radius: 4px;
}
Nous allons maintenant mettre limage du sol lunaire en arrireplan de chaque lment, et dfinir une largeur et une hauteur
spcifiques pour chaque lien (fig 4.18).
ol#things li a {
float: left;
width: 137px;
height: 91px;
background: url(../img/moon-137.jpg)
no-repeat top left;
}
fig 4.18: Les lments de la liste

avec le sol lunaire en arrire-plan.
CSS3.indd 72
72
20/12/10 0:19:18
Dclaration fourre-tout
Ltape suivante consiste crer une dclaration fourre-tout
qui active le positionnement absolu des images dans chaque
lment de la liste, donc par dessus larrire-plan du sol lunaire.
Nous allons positionner chaque lment diffremment selon
lobjet et utiliser diverses transformations, mais nous pouvons
dclarer position: absolute; pour toutes les images afin
de ne pas avoir dupliquer cette rgle pour chaque lment.
Nous allons galement ajouter une pile de transitions utilisant
la valeur all. Ainsi, toute transformation ou changement que
nous souhaitons appliquer sera liss par une transition, quelle
que soit la proprit CSS que nous dcidons de faire varier.
ol#things li a img {
position: absolute;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
Nous sommes maintenant prts ajouter la position exacte et

la largeur de chaque image, en utilisant les id que nous avons
ajouts prcdemment.
ol#things li#things-1 a img {
width: 60px;
top: 23px;
left: 26px;
}
width: 50px;
top: 20px;
left: 50px;
}
73
Openmirrors.com
CSS3.indd 73
20/12/10 0:19:18

width: 80px;
top: 19px;
left: 30px;
}
width: 70px;
top: 25px;
left: 45px;
}
width: 80px;
top: 20px;
left: 34px;
}
Jai cr des images dune rsolution suffisante pour que nous

puissions les agrandir sans dpasser les dimensions dorigine.
Nous allons maintenant ajouter un traitement :hover unique
sur chaque lment, sachant que notre dclaration fourre-tout
lissera et animera nimporte quel changement.
Agrandir le gros donut

Le gros donut devient encore plus gros au survol; nous allons
donc utiliser la transformation scale pour agrandir limage.
Souvenez-vous que limage dorigine est plus grande que les
dimensions dfinies dans la feuille de style, afin que nous puissions lagrandir sans perte de qualit.
ol#things li#things-1 a:hover img {
CSS3.indd 74
74
20/12/10 0:19:18
}
Ces rgles agrandiront le donut de 25% au survol. La figure 4.19

prsente ltat normal et ltat au survol avec le donut agrandi.
fig 4.19: Le gros donut est encore plus gros au survol grce la transformation scale.
Effet de perspective avec scale et un dplacement

Pour la tondeuse gazon abandonne sur la Lune, nous allons
faire deux choses:
1. Lagrandir laide dune transformation.
2. La dplacer vers le bas droite.
Ces deux changements combins la transition donnent limpression que la tondeuse vous fonce dessus (attention!). Leffet
est trs subtil, mais simple et efficace.
Nous allons ajouter un dplacement de cinq pixels vers le
bas et de 10 pixels vers la droite par rapport la position par
dfaut, ainsi que notre pile de transformations pour agrandir
la tondeuse de 20%.
75
Openmirrors.com
CSS3.indd 75
20/12/10 0:19:19

top: 25px;
left: 60px;
}
fig 4.20: Sur la tondeuse gazon, un scale et un dplacement crent un effet pseudotridimensionnel.
La figure 4.20 illustre ltat par dfaut et ltat au survol, lillusion quune tondeuse vous fonce dessus est complte.
Linsaisissable astrochat
Nous pouvons ajouter des transitions sur des proprits de
toute sorte (pas seulement des proprits CSS3); le simple fait
de lisser un dplacement de position peut donner limpression
que lastrochat vite la souris.
En ajustant la position left de limage au survol, la dclaration
fourre-tout lisse ce mouvement, donnant limpression que le
chat glisse dun ct lautre.
CSS3.indd 76
76
20/12/10 0:19:19
Nous allons dplacer le chat de 15 pixels vers la droite en

augmentant la valeur left de 30px 45px (fig 4.21):
left: 45px;
}
Plutt simple. Cest la transition CSS qui fait toute la diffrence

(quil est difficile de retranscrire sur une feuille de pulpe de
bois presse).
fig 4.21: Le matou glisse dun ct lautre, comme font souvent les chats.
Incliner le fauteuil
Un bon fauteuil est inclinable, et nous pouvons simuler cette
fonction du monde rel laide de la transformation rotate.
Ajoutons une pile de transformations pour faire lgrement
pivoter le fauteuil sur la gauche. Nous utiliserons les rgles
prfixe pour les navigateurs utilisant les moteurs WebKit,
Mozilla et Opera, en finissant par la vritable proprit transform lintention des futures implmentations.
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
77
Openmirrors.com
CSS3.indd 77
20/12/10 0:19:20
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
Nous avons utilis une valeur ngative pour incliner limage vers
la gauche (dans le sens antihoraire), et la transition se chargera une
fois de plus de fluidifier cette subtile rotation, parachevant lillusion dun fauteuil confortable et moelleux sur la Lune (fig 4.22).
fig 4.22: Le fauteuil sincline vers la gauche grce une transformation rotate utilisant
une valeur ngative.
La disparition du nain de jardin

Le dernier lment est un nain de jardin plutt dcontract
que nous allons faire partiellement disparatre, activit somme
toute parfaitement naturelle pour un lutin.
Nous allons utiliser la proprit opacity pour crer simplement
et rapidement un effet de survol qui rduit considrablement
la visibilit du nain de jardin. Grce la transition en place
pour tous les changements de proprit, la variation dopacit
sanimera dans les navigateurs qui supportent les transitions,
permettant notre petit ami de disparatre en toute fluidit.
La dclaration est simple:
CSS3.indd 78
78
20/12/10 0:19:20

opacity: 0.4;
}
La figure 4.23 montre la disparition du nain, qui devient

opaque 40% au survol de la souris.
fig 4.23: Le nain de jardin disparat presque au survol en rduisant son opacit.
Si vous voulez que cet effet fonctionne (sans les transitions)

sous Internet Explorer, il vous faudra utiliser la proprit filter
vue au chapitre 3.
Dgradation harmonieuse
Comme pour la galerie de photos tudie au dbut de ce
chapitre, la pince de CSS3 que nous ajoutons ici naffectera
pas les navigateurs non compatibles.
Au fond, ce qui compte vraiment, cest que chacun de ces
lments soit un lien cliquable. Le reste, cest du bonus pour
ceux qui peuvent bnficier dune exprience enrichie.
79
Openmirrors.com
CSS3.indd 79
20/12/10 0:19:20
RPTEZ APRS MOI: INTELLIGENT ET SUBTIL

En prenant un peu de temps pour rflchir au sens du contenu
que nous avons entre les mains, nous pouvons choisir dappliquer ds aujourdhui certaines proprits CSS3, ainsi que les
transitions et les transformations.
Ces petites touches sont la marque dun vritable artisan du
Web: une attention porte des dtails que tout le monde ne
relvera pas, un soin attentif apport aux vnements visuels
non critiques et la mise en valeur du message. Vu le nombre
de navigateurs qui supportent dj CSS3, et ceux qui y viendront dans un futur proche, quelques lignes de code supplmentaires ne mangent pas de pain.
Essayez dutiliser les transformations CSS avec modration. Il
est facile de tomber dans lexcs, mais en les employant bon
escient pour valoriser le message, elles peuvent faire toute la
diffrence.
Plus de whaou SVP

En parlant dexcs, la prochaine fois quun client ou quun
patron vous dit que a manque de punch ou quil faudrait
que a pulse un peu plus, ajoutez simplement la dclaration
suivante votre feuille de style (et assurez-vous que votre interlocuteur utilise Safari, Chrome, Firefox ou Opera, bien sr):
*:hover {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
Ce petit bout de CSS3 dit:Survole nimporte quel lment

de la page et il pivotera de 180 degrs. Essayez donc. Je vous
promets que vous allez faire une forte impression (fig 4.24).
CSS3.indd 80
80
20/12/10 0:19:21
fig 4.24: Tentative dillustration du chaos rsultant dune utilisation excessive

des rotations.
Le pire, cest quil y a des clients et des chefs qui risquent dadorer a.
Super! Jachte!
Soupir.
81
Openmirrors.com
CSS3.indd 81
20/12/10 0:19:21
Arrire-plans
multiples
Si vous maviez demand il y a deux ans quelle nouveaut
de CSS3 jattendais le plus fivreusement, jaurais sans doute
rpondu avec ferveur: Les images darrire-plan multiples!
cette poque, la possibilit dappliquer plus dune image darrire-plan au mme lment aurait pargn de srieux maux de
tte plus dun Web designer.
Pour crer une solution flexible et pare-balles ce problme
de conception, il nous faut trouver un moyen dappliquer
plusieurs arrire-plans en utilisant moins dimages et moins
de code. Nous avons jusqu prsent fait au mieux avec ce que
nous avions, mais la possibilit dappliquer plusieurs images
darrire-plan un mme lment en CSS3 laisse prsager des
jours plus heureux et moins de code taper.
La ralit, cest quentre temps, les navigateurs ont implment
lessentiel du module CSS3 sur les arrire-plans et les bordures
CSS3.indd 82
82
20/12/10 0:19:21
(http://bkaprt.com/css3/9/)1. Nombre des proprits dont

nous avons parl jusquici sont dj dcemment supportes
par Safari, Chrome, Firefox, Opera et IE9 Beta. De plus, des
proprits comme border-radius, box-shadow, les dgrads,
RGBA et opacity permettent dans certains cas de rsoudre
des problmes courants sans lintermdiaire daucune image.
Beaucoup de techniques qui ncessitaient auparavant lutilisation dimages sont maintenant ralisables laide de la seule
feuille de style. Les avantages sont vidents.
Si je salivais davance il y a quelques annes en pensant au
support des arrire-plans multiples, lexcitation est un peu
retombe, vu tous les autres outils que nous avons notre
disposition. Cela tant, il y a des applications merveilleuses
trouver ces arrire-plans multiples, et nous allons dtailler
une technique particulire dans ce court chapitre.
DFILEMENT PARALLAXE
Revenons notre site sur la Lune. Jai plac plusieurs images
darrire-plan dans llment body pour crer un environnement
spatial sur plusieurs couches. Au lieu dune seule image plate, jai
empil quatre PNG semi-transparents. Chacun dentre eux a son
propre positionnement horizontal afin de crer un effet danimation quand la fentre du navigateur est redimensionne (fig 5.01).
fig 5.01: Larrire-plan

du site exemple sur la Lune,
o quatre PNG sont empils
afin de renforcer la sensation
de profondeur.
1. Adresse complte: http://www.w3.org/TR/CSS3-background/
A r r i r e - p l a n s mu lt i p l e s
83
Openmirrors.com
CSS3.indd 83
20/12/10 0:19:23
Cette technique utilisant des calques dfilement diffrentiel

a t surnomme dfilement parallaxe . Nos amis de chez
Wikipedia la dfinissent ainsi:
Technique de dfilement spciale en infographie, apparue pour
la premire fois en 1982 dans le jeu darcade Moon Patrol. Cette
technique de pseudo-3D cre une illusion de profondeur dans un
jeu vido en 2D en faisant dfiler les images de larrire-plan plus
lentement que les images du premier plan. Cette technique sest
dveloppe partir des techniques de camra multiplane utilises
dans lanimation traditionnelle depuis les annes 40.
On trouve de plus en plus de bons exemples dapplication de
leffet parallaxe sur le Web. Un de mes favoris de longue date
est le site de Silverback (http://silverbackapp.com), un logiciel
de test dutilisabilit trs pratique dveloppe par Clearleft
(fig5.02).
fig 5.02: Redimensionnez la fentre du navigateur sur le site de Silverback et admirez

leffet tridimensionnel.
CSS3.indd 84
84
20/12/10 0:19:24
Jouez avec les dimensions de la fentre du navigateur: les plantes

accroches au sommet de la page se dplacent des vitesses
lgrement diffrentes, crant une impression de profondeur.
(Jy ai pass environ une heure lors de ma premire visite.)
videmment, tout le monde ne le verra pas; mais pour ceux
qui peuvent en profiter, cest un dtail gnial qui ne peut que
mettre le sourire aux lvres.
LA VIEILLE MTHODE: DES BALISES

SUPERFLUES
Alors, comment a marche? Paul Annett dtaille les techniques
quil a utilises pour crer leffet parallaxe du site de Silverback
dans un article publi sur Think Vitamin crit au dbut de
lanne 2008 (http://bkaprt.com/css3/10/).2
Pour appliquer les trois couches de feuillage, soit trois PNG diffrents, il vous faut au moins trois lments de niveau bloc. Ainsi,
deux div supplmentaires sont ncessaires pour encapsuler les
trois images dans les lments body, #midground et #foreground.
Voil ce que donnerait, grossirement, le balisage:
<body>
<div id="midground">
<div id="foreground">
<!contenu de la page -->
</div>
</div>
</body>
Le code CSS pour placer les images avec diffrentes positions

horizontales donne quelque chose de ce genre:
2. Adresse complte: http://thinkvitamin.com/design/how-to-recreate-silverbacksparallax-effect/
85
Openmirrors.com
CSS3.indd 85
20/12/10 0:19:24
body {
background: url(vines-back.png) repeat-x 20% 0;
}
#midground {
background: url(vines-mid.png) repeat-x 40% 0;
}
#foreground {
background: url(vines-front.png) repeat-x 150% 0;
}
Cette solution fonctionne trs bien, mais cest beaucoup plus

simple avec la nouvelle syntaxe du CSS3.
Regardons comment les arrire-plans multiples sont appliqus
au corps du site exemple sur la Lune, et comment crer un effet
parallaxe simple pour nos visiteurs qui peuvent en profiter.
LA NOUVELLE MTHODE: ARRIRE-PLANS

MULTIPLES VIA CSS3
Jutilise quatre PNG semi-transparents pour crer mon arrireplan spatial. Ils sont tous empils dans llment body pour
produire cette illusion de profondeur quand la fentre du navigateur est redimensionne par lutilisateur.
La figure 5.03 prsente les quatre PNG utiliss:
1. des nuages de poussire (clouds.png);
2. un dgrad du bleu au violet (space-bg.png);
3. un calque dtoiles (stars-1.png);
4. un autre calque dtoiles places au hasard (stars-2.png).
CSS3.indd 86
86
20/12/10 0:19:24
fig 5.03: Les quatre PNG semi-transparents empils pour former larrire-plan du site.
Syntaxe des arrire-plans multiples

Regardez comme il est facile de placer ces quatre images darrireplan dans llment body avec la nouvelle syntaxe du CSS3:
body {
background:
url(../img/stars-1.png) repeat-x fixed -130% 0,
url(../img/stars-2.png) repeat-x fixed 40% 0,
url(../img/space-bg.png) repeat-x fixed -80% 0,
url(../img/clouds.png) repeat-x fixed 100% 0;
background-color: #1a1a1a;
}
87
Openmirrors.com
CSS3.indd 87
20/12/10 0:19:25
Jempile ici les quatre images, en plaant les toiles en premier et

les nuages en dernier, dans une liste dlimite par des virgules
(remarquez que lordre de la pile commence par limage la plus
proche de lutilisateur). Jactive galement la rptition horizontale et je leur attribue des positions horizontales diffrentes ( laide
de valeurs ngatives et positives) afin que chaque couche dfile
une vitesse diffrente quand la fentre est redimensionne. Pour
finir, je verrouille leur position sur la page avec la valeur fixed.
La couleur darrire-plan quasi noire, #1a1a1a, est ajoute en
dernier dans une rgle background-color spare.
fig 5.04: Les quatre PNG empils les uns sur les autres avec la couleur darrire-plan noir
charbon.
Et voil (fig 5.04). Ce qui est gnial, cest quil ny a pas de code
superflu. Nous plaons toutes les images dans llment body
pour quelles apparaissent en arrire-plan du contenu de la
page, mais nous navons pas eu besoin de crer des div vides
pour appliquer les diffrentes couches.
CSS3.indd 88
88
20/12/10 0:19:25
Et linteroprabilit dans tout a?

Je le disais dans le premier chapitre, les arrire-plans multiples
sont supports par Safari 1.3+, Chrome 2+, Firefox 3.6+, Opera
10.5+ et IE9 Beta. En fait, ils en sont au mme stade que les
autres proprits CSS que nous avons utilises dans ce livre.
Nous avons une fois de plus choisi dutiliser ce petit bijou de
CSS3 dans le domaine non critique du design en raison de son
implmentation encore incomplte. Avec cet effet parallaxe, nous
pouvons enrichir larrire-plan et lexprience visuelle observe
en redimensionnant la page dans les navigateurs compatibles.
Solution de secours pour les autres navigateurs

Les navigateurs qui ne supportent pas encore les arrire-plans
multiples ignoreront lintgralit de la rgle background. Cest
prcisment pour cela que nous avons dfini backgroundcolor dans une rgle spare.
La figure 5.05 montre le rendu du site sous IE7, qui ignore les
images darrire-plan multiples que nous avons dclares, et naffiche que le noir charbon dfini par la rgle background-color.
fig 5.05: IE7 ignore la rgle qui dclare plusieurs images darrire-plan, nutilisant que la
couleur darrire-plan noir charbon.
89
Openmirrors.com
CSS3.indd 89
20/12/10 0:19:26
Le site est toujours fonctionnel, mais la perte de notre arrireplan spatial est contrariante. La solution consiste spcifier une
image darrire-plan unique au dbut de la dclaration, pour les
navigateurs (comme IE7 et 8) qui ne supportent pas les images
multiples. Nous pouvons ensuite outrepasser cette rgle avec
nos arrire-plans multiples (qui seront ignors par IE).
body {
background: url(../img/space-bg.png)
repeat-x fixed -80% 0;
background:
url(../img/stars-1.png) repeat-x fixed -130% 0,
url(../img/stars-2.png) repeat-x fixed 40% 0,
url(../img/space-bg.png) repeat-x fixed -80% 0,
url(../img/clouds.png) repeat-x fixed 100% 0;
background-color: #1a1a1a;
}
Pour limage de secours, vous pouvez choisir lune des images

utilises dans la dclaration multiple, ou mme crer une
version aplatie de tous les calques.
Pour notre site, jai choisi dutiliser simplement space-bg.png,
qui correspond au dgrad de couleurs (fig 5.06), offrant donc
une version sans toiles ni nuages de larrire-plan aux navigateurs qui ne supportent pas encore les images darrire-plan
multiples. Bien fait pour eux.
UTILISER LES ARRIRE-PLANS MULTIPLES

AUJOURDHUI
Dans la ligne des autres exemples de ce livre, nous pouvons
utiliser les arrire-plans multiples ds aujourdhui. Nous
prenons de lavance en utilisant une proprit CSS3 qui est
dj raisonnablement supporte par Safari, Chrome, Firefox et
Opera, ainsi quIE9 Beta. Au lieu de craindre les problmes dinteroprabilit, nous faisons le choix dappliquer cette proprit
CSS3.indd 90
90
20/12/10 0:19:26
fig 5.06: Une fois limage de secours en place, IE7 retrouve un peu de sa prestance
spatiale.
un vnement visuel non critique (un arrire-plan dfilement parallaxe).

Nous savons galement que si le navigateur ne supporte pas
les arrire-plans multiples, il ignorera lintgralit de la rgle
background. Pour compenser, nous pouvons dfinir une
image aplatie ou alternative dans une rgle place avant la rgle
multiple.
Maintenant que vous tes au point, vous pouvez commencer
exprimenter avec les arrire-plans multiples, jouer avec les
calques, le dfilement et le positionnement sans trop alourdir
votre code source. Cette technique donnera srement naissance toute sorte dapplications cratives quil me tarde de
dcouvrir.
91
Openmirrors.com
CSS3.indd 91
20/12/10 0:19:27
enrichir les
formulaires
Sur un site Web, les formulaires sont galement un point
dinteraction important, et leurs nombreux vnements visuels
font deux dexcellents candidats un enrichissement en CSS3.
Par dfaut, les lments de formulaire eux-mmes peuvent
prendre une apparence radicalement diffrente selon le navigateur ou le systme dexploitation. Rien ne nous empche den
prendre notre parti et mme daller dans le sens de ces variations, en enrichissant lexprience laide de portions de CSS3
dj fonctionnelles.
Il est important de concilier modifications subtiles et environnement familier, afin que vos formulaires restent faciles daccs.
Pour faire court, un champ de saisie doit ressembler un champ
de saisie. Maintenant que CSS est capable daltrer profondment le style des lments de formulaire (dans la plupart des
navigateurs), nous devons faire attention ne pas nuire leur
aspect le plus important: la fonctionnalit.
CSS3.indd 92
92
20/12/10 0:19:27
Cela tant, les possibilits de traitement des formulaires avec

CSS3 restent nombreuses si lon veut crer une exprience riche
dans les navigateurs compatibles, capable de se dgrader
harmonieusement dans tous les autres.
Ce chapitre nous donne galement une excuse pour parler de
trois outils de CSS3 que nous navons pas encore effleurs:
1. les nouveaux slecteurs;
2. les dgrads CSS;
3. les animations CSS.
Nous allons de nouveau utiliser notre site exemple sur la Lune

comme aire de lancement pour prsenter de nouvelles faons
inventives dutiliser CSS3 avec les formulaires. Plus particulirement, le formulaire dinscription New Thing Alerts se
trouvant dans la barre latrale de droite (fig6.01).
fig 6.01: Un formulaire simple

permettant de sinscrire pour recevoir
une alerte lorsque de nouveaux objets
sont laisss sur la Lune.
PROGRAMMATION DUN SIMPLE FORMULAIRE

DINSCRIPTION
Difficile de faire plus simple que ce formulaire. Quelques
champs avec des lgendes (label) et un bouton de type
submit.
En r i c h i r l e s f o r mu l a i r e s
93
Openmirrors.com
CSS3.indd 93
20/12/10 0:19:27
<form action="/" id="thing-alerts">

<fieldset>
<label for="alerts-name">Your Name</label>
<input type="text" id="alerts-name" />
</fieldset>
<fieldset>
<label for="alerts-email">Your Email</label>
<input type="text" id="alerts-email" />
</fieldset>
<fieldset>
<input type="submit" value="Subscribe" />
</fieldset>
</form>
La figure 6.02 prsente le formulaire avec le style par dfaut du

navigateur (sous Safari).
fig 6.02: Le formulaire vu sous Safari

avec le style par dfaut.
STYLE DES LMENTS FIELDSET ET LABEL

Nous allons commencer sculpter ce formulaire en appliquant
un peu de CSS aux lments fieldset et label un lger espacement entre chaque ligne.
#thing-alerts fieldset {
margin: 0 0 10px 0;
}
CSS3.indd 94
94
20/12/10 0:19:28
#thing-alerts label {
display: block;
font-weight: bold;
line-height: 1.4;
color: #666;
color: rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px #fff;
}
En regardant la figure 6.03, vous remarquerez que nous avons ajout

une marge de 10px sous chaque lment fieldset, et que nous avons
appliqu display: block aux lgendes afin quelles saffichent sur
une ligne spare. Nous avons galement donn un noir opaque
60% au texte, ainsi quune couleur de secours gris opaque pour les
navigateurs qui ne supportent pas encore RGBA. Nous avons galement appliqu un subtil reflet blanc avec text-shadow, pour donner
limpression que le texte est incrust dans larrire-plan.
fig 6.03: Les lments fieldset

et label sont maintenant styls.
Nous avons maintenant une belle marge de 10 pixels entre

chaque fieldset, mais nous navons pas besoin de cette marge
sous la dernire ligne (contenant le bouton de type submit) en
raison de la marge interne de la bote grise.
Cest un problme qui se pose frquemment : vous avez une
liste ou une succession dlments utilisant tous le mme style,
mais vous souhaitez styler le dernier lment diffremment.
95
Openmirrors.com
CSS3.indd 95
20/12/10 0:19:28
Au lieu dajouter class="last" llment final, servons-nous

de la pseudo-classe :last-child en CSS3 pour supprimer la
marge infrieure sans avoir modifier le balisage:
#thing-alerts fieldset {
margin: 0 0 10px 0;
}
#thing-alerts fieldset label {
display: block;
font-weight: bold;
line-height: 1.4;
color: #666;
color: rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px #fff;
}
#thing-alerts fieldset:last-child {
margin: 0;
}
Gardez lesprit que :last-child nest pas support par IE8

et moins, mais pour des ajustements de prsentation mineurs
comme celui-ci, cest une excellente alternative lajout dune
classe supplmentaire.
La figure 6.04 prsente le rsultat aprs la suppression de la
marge infrieure du dernire lment fieldset laide de la
pseudo-classe :last-child.
Autres slecteurs CSS3

Pendant que nous faisons bon usage de :last-child, jen
profite pour attirer votre attention sur lajout de nombreux
slecteurs trs pratiques en CSS3.
CSS3.indd 96
96
20/12/10 0:19:28
fig 6.04: Une fois la marge infrieure

du dernier lment fieldset
supprime, lespacement de notre
formulaire a fire allure.
Je vous recommande chaudement de lire larticle de Roger

Johansson sur le sujet, intitul CSS3 selectors explained
(http://bkaprt.com/css3/11/)1, dans lequel il prsente ces
nouveaux slecteurs et leur fonctionnement. Le support des
slecteurs CSS3 varie selon les navigateurs; ne manquez donc
pas de vous rfrer aux tableaux de larticle trs complet de
Peter-Paul Koch, CSS contents and browser compatibility
(http://bkaprt.com/css3/12/)2, ainsi qu la page Compatibilit
CSS et Internet Explorer de Microsoft (http://msdn.microsoft.com/fr-fr/library/cc351024(v=VS.85).aspx) pour savoir qui
supporte quoi.
STYLE DES CHAMPS DE SAISIE

Commenons maintenant ajouter les styles qui donneront nos champs de saisie par dfaut un aspect un peu plus
personnalis. Nous allons cette fois-ci utiliser un slecteur
dattribut CSS2.1 pour cibler exclusivement les lments input
type="text" (et non le bouton input type="submit").
1. Adresse complte : http://www.456bereastreet.com/archive/200601/css_3_
selectors_explained/
2. Adresse complte: http://www.quirksmode.org/css/contents.html
97
Openmirrors.com
CSS3.indd 97
20/12/10 0:19:29
Si nous dclarions simplement :

#thing-alerts input
nous ciblerions alors tous les champs du formulaire (le texte et

les boutons). Mais si nous prcisons:
#thing-alerts input[type="text"]
nous ne ciblerons que les champs de saisie.

Ce slecteur puissant nous permet de cibler diffrents lments
de formulaire directement dans la feuille de style, sans devoir
crer des classes supplmentaires. Cest magnifique.
Noubliez pas que les slecteurs dattribut sont supports par
IE7 et plus mais pas par IE6. Cela ne posera pas de problme si
nous nous contentons de modifier lapparence non critique de
ces lments de formulaire: IE6 ignorera ces rgles, ce qui est
tout fait acceptable dans ce cas.
La dclaration suivante applique une largeur, une marge interne
et une taille de police spcifiques, dsactive les bordures par
dfaut, ajoute une couleur darrire-plan et arrondit les coins
des champs de saisie laide de notre fidle pile de proprits
border-radius.
#thing-alerts fieldset input[type="text"] {
width: 215px;
padding: 5px 8px;
font-size: 1.2em;
color: #666;
border: none;
background-color: #fff;
border-radius: 4px;
}
CSS3.indd 98
98
20/12/10 0:19:29
fig 6.05: Les champs de saisie plats et

arrondis.
La figure 6.05 prsente le rsultat obtenu sous Safari (similaire

sous Firefox et Opera). Nous avons maintenant des champs
de saisie plutt sympas, mais nous allons ajouter un peu de
profondeur pour leur redonner lapparence de zones de texte
ditables.
LES DGRADS CSS

Une faon astucieuse dajouter une touche de profondeur
consiste faire appel aux dgrads CSS, une nouveaut de CSS3
qui permet de crer un dgrad dune couleur une autre sans
laide daucune image. Plutt sduisant comme ide, non?
Les dgrads CSS sont actuellement supports par Safari 4+,
Chrome 2+ et Firefox 3.6+ uniquement, mais comme toujours,
pour une application non critique, cest une solution flexible
qui se dgrade harmonieusement.
Les dgrads CSS peuvent tre utiliss partout o une image
peut tre dclare dans la feuille de style. En dautres termes,
background-image, list-style-image, border-image, ainsi
que le contenu gnr.
La syntaxe des dgrads CSS diffre quelque peu entre les
implmentations de Safari et de Firefox. La (trs prliminaire)
99
Openmirrors.com
CSS3.indd 99
20/12/10 0:19:29
spcification aurait plutt tendance pencher vers la solution

de Firefox. Voil un exemple typique de lutilit des prfixes de
navigateur dans le processus de dveloppement de la spcification: ces deux syntaxes diffrentes fonctionnent correctement
dans chaque navigateur alors que la spcification officielle est
encore en chantier.
Pour tre honnte, les deux syntaxes peuvent tre un peu droutantes. Il y a normment de commandes diffrentes, entre autres
pour affiner les couleurs et la direction du dgrad, etc.
Par exemple, voici la syntaxe pour crer un dgrad linaire
simple sur larrire-plan dun lment dans les navigateurs
WebKit et Mozilla:
#foo {
background-image: -webkit-gradient(linear,
0% 0%, 0% 100%, from(#fff), to(#999));
background-image: -moz-linear-gradient(0% 100%
90deg, #fff, #999);
}
Ce nest pas exactement intuitif, et il est difficile de retenir les

variantes de chaque navigateur.
La meilleure mthode que jaie trouve pour me simplifier la
tche consiste utiliser lexcellent diteur WYSIWYG de John
Allsopp (fig 6.06, http://bkaprt.com/css3/14/)3.
Utilisez cet outil pour crer visuellement les dgrads de votre
choix, puis rcuprez la syntaxe approprie pour Safari et
Firefox. Loutil de John dgrossit le travail pour vous. Et cest
extrmement utile, car je nai toujours pas russi mmoriser
le code (ainsi que les diffrences entre navigateurs).
Jonathan Snook a crit un article sur la syntaxe des dgrads qui
pourra galement vous tre utile: http://bkaprt.com/css3/15/4.
3.Adresse complte: http://www.westciv.com/tools/gradients/index-moz.html
4.Adresse complte : http://snook.ca/archives/html_and_css/multiple-bg-cssgradients
100
CSS3.indd 100
20/12/10 0:19:30
fig 6.06: Le merveilleux

outil de John Allsopp
permettant de crer
des dgrads CSS.
Le dgrad que nous allons ajouter nos champs de saisie est

trs lger afin de se fondre dans larrire-plan (fig 6.07). Aprs
avoir jou avec loutil de John Allsopp et entr quelques valeurs,
nous obtenons deux petites lignes de CSS:
#thing-alerts fieldset input[type="text"] {
width: 215px;
padding: 5px 8px;
font-size: 1.2em;
color: #666;
border: none;
0% 0%, 0% 12%, from(#999), to(#fff));
90deg, #fff, #999);
border-radius: 4px;
}
101
Openmirrors.com
CSS3.indd 101
20/12/10 0:19:30
fig 6.07: Gros plan sur le lger dgrad

au sommet de chaque champ de saisie
qui donne lillusion dun renfoncement.
Nous appliquons ici un dgrad linaire, mais CSS permet aussi

lutilisation de dgrads radiaux.
Vous remarquerez les diffrences de syntaxe entre les implmentations webkit et moz. En clair, nous ajoutons un lger dgrad
linaire qui passe du gris clair (#999) au blanc (#fff) sur seulement
12% de la hauteur du champ. Nous appliquons les rgles prfixe
background-image pour produire leffet dans Safari et Firefox.
La figure 6.08 prsente le rsultat, o lon peut voir nos champs
de saisie arrondis et habills dune lgre ombre interne, le tout
sans laide daucune image.
fig 6.08: Les champs de saisie avec

les dgrads CSS en place.
Les navigateurs qui ne supportent pas encore les dgrads

CSS ignoreront ces rgles background-image et afficheront
des champs de saisie entirement blancs. Et cest parfaitement acceptable. Par ailleurs, les ajustements, la flexibilit et
102
CSS3.indd 102
20/12/10 0:19:31
le degr de contrle permis par les dgrads CSS sont plutt

saisissants.
Nous allons les mettre un peu plus profit dans la prochaine
section sur le bouton submit.
UN VRAI BOUTON EN CSS3

Sil ne fallait choisir quun lment dinterface pour illustrer les
capacits de CSS3, ce pourrait tre le bouton. En combinant
plusieurs techniques vues dans ce livre, nous allons transformer
un bouton de formulaire de type submit parfaitement ordinaire
en un lment bien plus intressant, uniquement avec CSS (fig
6.09).
fig 6.09: Le bouton submit par

dfaut de Safari gauche, et
le bouton styl en CSS3 (sans
images!) droite.
La beaut de CSS3, cest que le fait de nutiliser aucune image

donne quelque chose de bien plus flexible. Si le navigateur ne
supporte pas les proprits utilises pour enrichir le graphisme
du bouton, pas de problme: lutilisateur verra simplement le
bouton de formulaire par dfaut.
Dtaillons les tapes requises pour transformer un bouton de
formulaire ordinaire en un magnifique bouton comme sur la
figure 6.09.
Style de base du bouton

Nous allons tout dabord ajouter une petite marge interne,
choisir la police Helvetica pour coller au reste du design, dsactiver les bordures et dfinir un arrire-plan blanc.
103
Openmirrors.com
CSS3.indd 103
20/12/10 0:19:31
#thing-alerts input[type="submit"] {
padding: 8px 15px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
}
La figure 6.10 prsente le style de base dans Safari. Nous avons

dj un rsultat totalement diffrent du bouton par dfaut.
fig 6.10: Un bouton submit sans bordure ni

arrire-plan.
Arrondi des coins

Ajoutons maintenant une pile de proprits border-radius
pour donner au bouton une forme de glule (fig 6.11).
#thing-alerts fieldset input[type="submit"] {
padding: 8px 15px;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
}
104
CSS3.indd 104
20/12/10 0:19:31
fig 6.11: Arrondi du bouton submit laide de

border-radius.
Aprs quelques ttonnements, nous avons choisi une valeur de

23px pour notre glule.
Application dun dgrad linaire

Appliquons maintenant au bouton un dgrad du gris clair
(#bbb) vers le blanc (#fff), de bas en haut. Nous allons une fois
de plus demander loutil de M. Allsopp de nous faire cadeau
des rgles destines Safari, Chrome et Firefox.
padding: 8px 15px;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
0% 0%, 0% 100%, from(#fff), to(#bbb));
background-image: -moz-linear-gradient(0 100%
90deg, #fff, #bbb);
}
105
Openmirrors.com
CSS3.indd 105
20/12/10 0:19:32
fig 6.12: Le dgrad CSS appliqu au bouton submit.
La figure 6.12 montre ltat actuel de notre bouton sous Safari.

Nous avons maintenant un bouton arrondi avec un dgrad CSS.
Jusqu maintenant, nous navons utilis aucune image : nous
avons simplement ajout quelques lignes notre feuille de style.
Ajout de text-shadow pour donner du relief

aux caractres
Ajoutons maintenant une ombre quasi blanche sous le texte
laide de la proprit text-shadow, pour donner limpression
que les caractres ont t frapps dans le bouton.
padding: 8px 15px;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
0% 0%, 0% 100%, from(#fff), to(#bbb));
background-image: -moz-linear-gradient(0 100%
90deg, #fff, #bbb);
}
Nous utilisons RGBA pour obtenir un blanc opaque 85% et

laisser le dgrad gris transparatre lgrement. Nous plaons
106
CSS3.indd 106
20/12/10 0:19:32
lombre un pixel sous le texte et lui appliquons galement un

flou dun pixel.
La figure 6.13 prsente un gros plan de lombre en place ainsi
que laspect gnral du bouton ce stade.
fig 6.13: Gros plan de la subtile

ombre que nous avons ajoute
pour donner un effet de relief.
Ajout de box-shadow sur le bouton

Pour parfaire notre petit bouton en CSS3, nous allons ajouter
une lgre ombre laide de la proprit box-shadow qui renforcera le relief. Le bouton se dmarquera ainsi mieux de larrireplan gris.
Voici la pile de proprits box-shadow pour les navigateurs qui
les supportent, ainsi que les implmentations futures:
padding: 8px 15px;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
0% 0%, 0% 100%, from(#fff), to(#bbb));
90deg, #bbb, #fff);
107
Openmirrors.com
CSS3.indd 107
20/12/10 0:19:33
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
fig 6.14: Gros plan de lombre

ajoute en dessous du bouton
pour donner du relief laide de
box-shadow.
La figure 6.14 prsente le rsultat dans Safari aprs avoir ajout une
ombre 1px en dessous du bouton avec un flou de 2px. Comme
couleur, nous avons choisi un noir opaque 50% laide de RGBA,
afin que lombre se fonde lgrement dans larrire-plan.
Et non seulement nous en avons fini avec notre bouton, mais
notre formulaire est enfin prt tre utilis. En quelques lignes
de CSS3, nous avons transform un triste formulaire par dfaut
en un lment dinterface bien plus lgant, et qui plus est assorti
au reste du design de notre page. Nous avons choisi dutiliser
CSS3 plutt que des images, solution qui se dgrade harmonieusement dans les navigateurs qui ne supportent pas encore ces
fonctions avances. Vrifions si vous ne me croyez pas.
ET LES AUTRES NAVIGATEURS?

Si nous visualisons notre formulaire sous Internet Explorer7,
un navigateur qui ne supporte absolument pas CSS3, nous
verrons un formulaire fonctionnel et parfaitement acceptable
108
CSS3.indd 108
20/12/10 0:19:33
fig 6.15: Sous IE7, le formulaire

ressemble un formulaire. Et
fonctionne comme un formulaire. Voil
qui est rassurant.
(fig 6.15). Cest une trs bonne nouvelle! Toutes les amliorations que nous avons ajoutes laide dune poigne de rgles
CSS3 dans la feuille de style ont t ignores sans problme, ne
laissant quun squelette de formulaire qui remplit parfaitement
sa fonction. Mission accomplie.
UTILISATION DE BOX-SHADOW POUR CRER

DES TATS FOCUS
Nous pouvons pousser le dtail de linteractivit en utilisant la
proprit box-shadow sur ltat :focus des champs. Cest un
effet simple et rapide implmenter, qui se dgrade harmonieusement comme toutes les proprits CSS3 susmentionnes.
Il suffit de crer une nouvelle dclaration en ajoutant la pseudoclasse:focus au slecteur dattribut des champs de saisie.
(Le paragraphe prcdent est parfait pour briser la glace avec
une inconnue. Vous me remercierez plus tard.)
#thing-alerts input[type="text"]:focus {
-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);
-moz-box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);
box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);
}
109
Openmirrors.com
CSS3.indd 109
20/12/10 0:19:33
Cette dclaration inclut une pile de proprits box-shadow qui

applique une ombre bleu clair opaque 50% autour des champs
de saisie lorsquils sont mis en focus. Nous pouvons voir le
rsultat la figure 6.16 : nous imitons le comportement par
dfaut du systme dexploitation qui met le champ slectionn
en surbrillance, mais nous avons beaucoup plus de contrle sur
lapparence en crant notre propre effet.
fig 6.16: Une ombre est applique

ltat:focus des champs de saisie
laide de la proprit box-shadow.
Et les navigateurs qui ne supportent pas encore box-shadow? Eh

bien, ils auront un champ de saisie ordinaire. Vous avez srement
devin ce que jallais dire... Oui, cest parfaitement acceptable.
AJOUT DANIMATIONS CSS POUR ENRICHIR

LINTERACTIVIT DU FORMULAIRE
Pour repousser encore les limites de box-shadow, nous pourrions animer lombre, par exemple la faire clignoter comme
si elle attendait que quelquun interagisse. Plongeons rapidement dans le monde des animations CSS pour voir ce quil est
possible de faire dans les navigateurs WebKit.
Je dis les navigateurs WebKit dans ce cas, car les animations CSS
(tout comme les transformations et les transitions CSS) taient
initialement dveloppes par lquipe de WebKit, avant de devenir
standard propos au W3C (http://bkaprt.com/css3/16/).5 Cependant,
contrairement aux transformations et aux transitions, les animations
5. Adresse complte: http://www.w3.org/TR/CSS3-animations/
110
CSS3.indd 110
20/12/10 0:19:34
ne sont encore implmentes dans aucun autre navigateur. Elles

fonctionnent actuellement dans Safari et Chrome, mais ni dans
Firefox ni dans Opera, et le support nest mme pas prvu dans IE9.
Pour cette raison, je naccorde pas autant dattention aux animations (pour le moment du moins). Et bien quelles soient puissantes
et excitantes, il reste encore voir si leur adoption se fera aussi
rapidement et intgralement que celle des transformations et des
transitions, dont le support est dj dcent (et croissant).
Toutefois, le concept et la syntaxe des animations CSS sont
plutt simples ; pour des vnements non critiques, on peut
dj samuser en injecter lintention des navigateurs WebKit.
Appliquons une animation simple ltat :focus des champs
de saisie pour voir comment a marche.
Travailler avec des keyframes

Pour construire une animation CSS, il faut tout dabord crer
une dclaration dimages cls (keyframes). Si vous avez quelques notions de programmation, il sagit de crer une fonction
laquelle on pourra faire appel ailleurs dans la feuille de style.
Une keyframe est une at-rule CSS spciale. Elle est similaire
une dclaration CSS, mais vous permet de lui attribuer un
identifiant et de spcifier des rgles CSS et des changements sur
une dure spcifique laide dune liste de valeurs en pourcentages (ou les mots-cls to et from).
Voyons plutt ce que cela donne dans la pratique. Nous allons
crer une animation simple qui fait apparatre et disparatre
lombre box-shadow que nous avons prcdemment applique
ltat:focus des champs du formulaire.
Nous lappellerons pulse, et nous allons dfinir trois rgles
lgrement diffrentes: une pour le point de dpart (0%), une
pour le milieu (50 %) et une pour la fin (100 %). Chaque rgle
ne fait quajuster le niveau dopacit de lombre bleue de 20%
90%, puis dans le sens inverse. En appliquant une transition ce
changement et en le rptant, on aura limpression que le champ
clignote lorsquil est slectionn dans les navigateurs WebKit.
111
Openmirrors.com
CSS3.indd 111
20/12/10 0:19:34
@-webkit-keyframes pulse {
0% {
}
50% {
}
100% {
}
}
Je ne spcifie ici que les rgles pour les navigateurs WebKit

laide du prfixe webkit-. Dans les autres exemples du livre,
nous avons choisi dcrire les rgles correspondant aux diffrents navigateurs qui supportent les proprits utilises, ainsi
que la rgle sans prfixe pour que le code soit durable. Dans
le cas prsent, vu que les animations CSS ne sont pour linstant supportes que par Safari et Chrome, et tant donn les
rserves des autres navigateurs concernant leur implmentation, jai choisi de ncrire que les rgles -webkit-.
Rfrencer la keyframe
La seconde tape de la cration dune animation CSS consiste
rfrencer la keyframe laide de la proprit animation.
Dans le cas prsent, nous voulons que le clignotement de
lombre se dclenche lorsquun utilisateur slectionne un
champ de saisie. Nous allons appeler la keyframe par son nom,
dfinir la dure de lanimation, activer une boucle infinie, et
enfin choisir une fonction de timing qui acclre puis dclre
(ease-in-out). Vous remarquerez que la syntaxe de lanimation
est semblable celle dune transition.
-webkit-animation: pulse 1.5s infinite ease-in-out;
}
112
CSS3.indd 112
20/12/10 0:19:34
Nous nous assurons ainsi que lanimation ne se dclenchera

que lorsquun utilisateur slectionnera un champ de saisie du
formulaire (sous Safari et Chrome uniquement).
Le rsultat est saisissant. Et si la technologie me permettait de
vous le montrer sur ce bout de papier, je le ferais. La figure 6.17
vous donnera, je lespre, une vague ide de ce qui se passe:
lombre clignote comme si le champ attendait quon interagisse
avec lui.
fig 6.17: Si vous parcourez cette image des

yeux rapidement, vous aurez une ide de
lanimation que nous venons dajouter
ltat:focus des champs de saisie.
Jai utilis la proprit animation abrge pour dfinir les

valeurs dans une seule rgle. Vous pouvez galement spcifier
chaque valeur avec sa propre proprit, comme ceci:
-webkit-animation-name: pulse;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
113
Openmirrors.com
CSS3.indd 113
20/12/10 0:19:35
Rutiliser lanimation sur le traitement du survol

du bouton
Ce qui est bien avec les keyframes, cest quelles peuvent tre
rutilises dans plusieurs dclarations de la feuille de style.
Par exemple, nous pourrions appliquer ce mme clignotement au bouton submit lorsquil est survol ou mis en focus.
Il mettra une sorte de lueur bleue clignotante, un peu comme
la Wii de Nintendo.
Il suffit dajouter cette mme rgle animation une nouvelle
dclaration :hover/:focus pour le bouton submit, comme
nous lavons fait avec les champs de saisie:
#thing-alerts input[type="submit"]:hover,
#thing-alertes input[type="submit"]:focus {
-webkit-animation: pulse 1.5s infinite ease-in-out;
}
Lanimation pulse que nous avons cre prcdemment pour

les champs de saisie fait apparatre et disparatre une ombre
bleue laide de box-shadow, et leffet fonctionne tout aussi
bien sur le bouton (fig 6.18), qui met une faible lueur au survol
ou lors de la mise en focus, comme sil attendait que lutilisateur
clique enfin.
fig 6.18: Tentative dillustration du clignotement de lombre du

bouton au survol de la souris.
114
CSS3.indd 114
20/12/10 0:19:35
Et les autres navigateurs?

En ajoutant des animations CSS, nous avons pour la premire
fois cibl un seul type de navigateur : ceux qui utilisent le
moteur WebKit. On peut dores et dj prdire un bel avenir
CSS3 au vu de sa rapide adoption par Firefox, Opera et mme
IE9, mais vous vous demandez peut-tre sil est trs utile dutiliser les animations CSS ce stade. Vous faites bien de vous
poser la question.
Soit les animations CSS resteront ltat de technologie WebKit,
soit elles suivront la voie des transitions et des transformations et
seront adoptes par les autres navigateurs. Quoi quil en soit, les
animations CSS sont simples, consomment peu de ressources,
et sont ignores sans problme par les navigateurs qui ne les
supportent pas. Les exemples que jai prsents taient plutt
rudimentaires et je nai fait queffleurer les possibilits offertes
avec une simple feuille de style et quelques balises. Cest une
petite rvolution qui mrite dtre exprimente.
MISEZ SUR LINTERACTION

Il est rare que des lments de formulaire soient des lments
critiques pour lidentit visuelle, et cest prcisment pour cela
que les formulaires offrent des opportunits denrichissement
fantastiques.
Les lments de formulaire peuvent prendre des apparences
trs diverses selon lenvironnement de lutilisateur, mais nous
pouvons embrasser ces diffrences en choisissant de les enrichir en CSS, tout en sachant que les navigateurs qui ne supportent pas encore CSS3 afficheront tout de mme des lments de
formulaire par dfaut, familiers et compltement fonctionnels.
115
Openmirrors.com
CSS3.indd 115
20/12/10 0:19:35
conclusion
Bon, revenons sur Terre et dcompressons un peu.
Nous avons voqu quantit de techniques gniales (si jose
dire) nous permettant dutiliser CSS3 ds maintenant dans
notre travail quotidien. Jespre quen dmontrant quel point
ces techniques peuvent enrichir la couche dexprience dans
les navigateurs qui les supportent tout en se dgradant harmonieusement dans les autres, je vous aurai donn envie de les
utiliser tous les jours, dans tous vos projets.
La vraie promesse de CSS3, cest de pouvoir rsoudre des
problmes de conception courants plus efficacement, avec
moins de code et plus de flexibilit. Du moment que vous (ainsi
que vos clients et vos chefs) acceptez quun site Web puisse tre
rendu diffremment par diffrents navigateurs et appareils, le
monde est vous. Bienvenue bord.
116
CSS3.indd 116
20/12/10 0:19:36
Au premier chapitre, j'ai dit que jentendais souvent : Jai

tellement hte dutiliser CSS3... quand il sera prt. Le but de
ce livre tait de prouver quil ny avait pas besoin dattendre.
Commencez exprimenter. Commencez utiliser CSS3 pour
les vnements visuels non critiques de vos designs. Maintenant
que vous savez ce qui marche, et surtout comment un lment
de design se comporte quand a ne marche pas, vous pouvez,
en quelques lignes de CSS, produire des effets qui exigeaient
auparavant beaucoup plus de temps et de code.
QUE FAIRE DES CLIENTS ET DES CHEFS

QUI NE VEULENT RIEN ENTENDRE?
Autre question que lon me pose souvent quand je parle de
CSS3: comment lutiliser dans le projet dun client? Comment
prsenter au client les avantages de CSS3 par rapport dautres
solutions ? La communication est la meilleure solution :
montrez vos clients les conomies de code et dimages.
Montrez-leur en quoi lexprience diffre dans les navigateurs
qui ne supportent pas encore CSS3. Expliquez les avantages et
les inconvnients.
Et si cela vous semble trop defforts, just do it.
Commencez ajouter du CSS3 dans vos projets quotidiens et
laissez vos clients et vos patrons le plaisir de le dcouvrir.
C'est en naviguant sur le site et en interagissant avec celui-ci
que vous avez dcouvert les exemples dcrits dans ce livre.
Cest intentionnel, videmment.
Souvent, jajoute ces petites amliorations sans rien dire dans
mes projets pour surprendre et merveiller le client qui les
dcouvre par hasard. Et surtout pour surprendre et merveiller
les visiteurs du client.
Vous voulez que a marche dans tous les navigateurs? Il vous
en cotera...
c o nc lu s i o n
117
Openmirrors.com
CSS3.indd 117
20/12/10 0:19:36
LE FUTUR DE CSS3
Et lavenir alors ? CSS3 englobe beaucoup, beaucoup plus de
choses, qui sont impossibles traiter dans un si petit livre. Je
voulais mintresser tout particulirement ce qui tait applicable ds aujourdhui et laisser de ct les modules plus exprimentaux qui ne bnficient pas dune implmentation aussi
consquente.
Mais lavenir sannonce radieux. De nouvelles proprits
sont implmentes chaque itration ou presque de WebKit,
Mozilla et Opera. Cette adoption rapide grce aux prfixes de
navigateur pousse linnovation. Restez la page et tenez-vous
au courant des dernires implmentations de ces navigateurs
pour mieux connatre la ralit du terrain.
Le futur dIE9 Beta sannonce galement trs intressant. Oui,
vous mavez bien lu. De plus en plus de proprits CSS3 sont
supportes par Internet Explorer, ce qui laisse prsager plein
de bonnes choses.
Un jour, nous pourrons nous servir de CSS3 non seulement
pour enrichir lexprience, mais galement pour les concepts
visuels critiques (la mise en page en particulier). Lattente est
longue, mais ncessaire pour que tout se droule correctement.
Pour patienter, nhsitez pas vous servir de ce qui fonctionne
dj. Vous, vos clients, et les citoyens du Web en tireront
profit.
118
CSS3.indd 118
20/12/10 0:19:36
LECTURES ET RESSOURCES
COMPLMENTAIRES
CSS3.info prsente lactualit et les derniers dveloppements de
CSS3 ainsi que des exemples:
http://www.CSS3.info
Visitez galement leur section preview pour voir les dmos de
proprits spcifiques:
http://www.CSS3.info/preview
Je vous ai dit de ne pas lire les spcifications, mais pour avoir
une vue densemble, vous prparer pour la suite et voir le statut
actuel des diffrents modules (brouillon de travail, recommandation candidate, etc.), visitez cette adresse:
http://www.w3.org/Style/CSS/current-work
Ou allez ici pour plus dinformations sur les modules eux-mmes,
voir comment ils sont rpartis et ce quils contiennent:
http://www.w3.org/TR/CSS3-roadmap
Les blogs de dveloppement de tous les principaux navigateurs sont le lieu idal pour se tenir au courant des dernires
implmentations. Je vous recommande chaudement de vous y
abonner pour savoir ce qui est adopt, rejet ou test:
http://webkit.org/blog
http://blog.mozilla.com
http://dev.opera.com/articles/css
http://blogs.msdn.com/b/ie
Plusieurs sites ont t crs sur le thme de linteroprabilit et
vous aideront dterminer dans quels navigateurs fonctionne
telle ou telle proprit:
http://caniuse.com
http://www.quirksmode.org/css/contents.html
http://html5readiness.com Ne vous laissez pas tromper par
lURL, ce site contient galement des infos sur CSS3!
c o nc lu s i o n
119
Openmirrors.com
CSS3.indd 119
20/12/10 0:19:36
Un certain nombre doutils en ligne offrent un environnement

visuel permettant de gnrer du code conforme la syntaxe du
moment, et sont dexcellents outils pour se former:
http://CSS3generator.com
http://CSS3please.com
http://gradients.glrzad.com
http://tools.westciv.com
http://border-radius.com
Et pour finir, des solutions en JavaScript peuvent vous aider
tendre le support de CSS3 de nombreux autres navigateurs.
Pour grer les vnements visuels critiques qui doivent imprativement fonctionner partout en utilisant CSS3, plusieurs
options soffrent vous:
http://www.modernizr.com
http://ecsstender.org
http://selectivizr.com/ mulation de slecteurs de pseudoclasse pour IE5.5-8.
Merci de mavoir lu! Maintenant allez et crez. Voyez grand et
codez petit.
120
CSS3.indd 120
20/12/10 0:19:36
index
Symboles
\
last-child 96
-chrome 11
-khtml 11
-ms 11
-o 11
ease 19
ease-in 19
ease-in-out 19, 50, 112
ease-out 19
filter 49, 50, 51, 79

Firefox 2, 7, 8, 9, 12, 17, 22,
35, 39, 40, 42, 43, 48, 53,
56, 58, 62, 80, 83, 89, 90,
99, 100, 102, 105, 111, 115
Flash 4, 15, 16, 18, 45, 59, 60
float 5, 37, 56
Aldrin, Buzz 29
all 24, 25, 44, 45, 73
Allsopp, John 100
animations CSS 16, 93, 110, 111,
115
Annett, Paul 85
Apollo 11 29
Armstrong, Neil 29
arrire-plans multiples 7, 8, 86,
87, 89, 90
Ate, Faruk 33
B
border-radius 7, 11, 36, 41, 42,
83, 98, 104
boutons 103, 106, 107
box-shadow 7, 8, 58, 83, 107,
109, 110, 111, 114
C
Chrome 7, 8, 9, 12, 18, 22,
35, 39, 40, 42, 43, 48, 53,
56, 58, 62, 80, 83, 89, 90,
99, 105, 111, 112, 113
couche d'exprience 4, 6, 16, 27,
28, 34, 36, 45, 52, 62,
69, 116
cubic-bezier 19
D
dclaration abrge 21
dclaration fourre-tout 73
dfilement parallaxe 83, 89
dgrads 83, 93, 99, 101, 102,
105
G
Gecko 12
Golden Record 31, 32
I
IE6 98
IE7 34, 89, 98
IE8 et infrieur 96
IE9 Beta 7, 8, 9, 49, 58, 83,
89, 90, 118
Internet Explorer 2, 9, 13, 34,
39, 49, 50, 60, 79, 97,
108, 118
interoprabilit 22, 89
J
JavaScript 4, 15, 16, 18, 26,
45, 59, 60, 64, 120
Johansson, Roger 97
jQuery 26
K
keyframes 111, 114
Koch, Peter-Paul 97
Konqueror 11
In d e x
121
Openmirrors.com
CSS3.indd 121
28/12/10 17:54:47
L
linear 19
list-style 56
M
Media Queries 10
Microsoft 11
modules 3
Mozilla 11, 18, 58, 77, 100, 118
multicolonne 10
48, 53, 56, 57, 58, 62, 80,

83, 89, 90, 94, 99, 100,
102, 103, 104, 105, 106, 108,
111, 112, 113
scale 56, 59, 69, 70, 74, 75
script.aculo.us 26
slecteurs CSS3 96
Silverback 84, 85
skew 61, 65, 66, 69
Snook, Jonathan 100
spcification CSS3 2, 5, 10, 17
SVG 16
NASA 125
opacity 7, 8, 9, 25, 45, 46,

47, 48, 49, 50, 51, 70, 78,
79, 83
Opera 7, 8, 9, 11, 12, 17, 18,
22, 23, 35, 39, 40, 42, 43,
48, 53, 56, 58, 62, 77, 80,
83, 89, 90, 99, 111, 115, 118
Outside 64
text-shadow 7, 8, 36, 39, 40,

95, 106
timing 19, 20, 24, 25, 112
transformations CSS 16, 36, 53,
54, 56, 64, 65, 68, 69, 70,
71, 73, 75, 77, 80, 110, 115
transform-origin 57
transitions CSS 14, 16, 17, 18,
23, 24, 26, 27, 28, 36, 42,
43, 46, 50, 59, 65, 69, 70,
76, 77, 80, 110, 115
translate 61, 66, 68, 69
Panic Software 63
prfixes de navigateur 10, 11, 12,
13, 14, 28, 42, 58, 100, 118
Prototype 26
pulse 111, 114
Voyager 1 et Voyager 2 31
R
RGBA 7, 9, 36, 38, 39, 40,
83, 95, 106, 108
rotate 61, 63, 64, 69, 70, 77
W
W3C 3
Web fonts 10
WebKit 11, 12, 16, 18, 21, 22,
53, 58, 64, 77, 100, 110,
111, 112, 115, 118
S
Safari 2, 7, 8, 9, 12, 16, 17,
18, 22, 35, 39, 40, 42, 43,
122
CSS3.indd 122
28/12/10 17:54:51
PROPOS DE A BOOK APART

Le Web design est une affaire de matrise multidisciplinaire et
de haute prcision. Cest justement lide qui se reflte dans
notre nouvelle collection de petits livres, destine tous ceux
qui crent des sites Web. Nous traitons les sujets mergents
et essentiels du design et du dveloppement Web avec style,
clart et surtout concision, parce quun designer-dveloppeur
qui travaille na pas de temps perdre.
Lobjectif de tous les livres de notre catalogue, cest de faire
toute la lumire sur un sujet dlicat, et de le faire vite pour
mieux retourner au travail. Merci de nous soutenir dans notre
mission: offrir aux professionnels les outils dont ils ont besoin
pour faire avancer le Web.
Openmirrors.com
CSS3.indd 123
28/12/10 17:54:51
PROPOS DE LAUTEUR
Web designer, auteur, mari
et pre, Dan Cederholm
vit Salem dans le
Massachusetts. Il est le
fondateur de SimpleBits,
un petit studio de design.
Expert reconnu dans le
domaine du Web design
standardis, Dan a travaill
avec YouTube, MTV,
Google, Yahoo, ESPN,
Fast Company, Blogger et
bien dautres. Il promeut
sa vision dun design
flexible et standardis travers son travail, ses crits et ses
confrences.
Dan est le cofondateur et le designer de Dribbble, une communaut pour les designers qui souhaitent partager en temps rel
leurs projets du moment. Avant cela, il a cofond Corkd, le
premier rseau social du Web destin aux amateurs de vin.
Dan est lauteur de trois best-sellers : Handcrafted CSS (New
Riders), Bulletproof Web Design, deuxime dition (New Riders)
et Web Standards Solutions, dition spciale (Friends of ED). Il est
accessoirement virtuose du ukull et friand de voyage spatial.
Photographie avec l'aimable autorisation de John Morrison, la NASA et Photoshop.
CSS3.indd 124
28/12/10 17:54:52

CSS3 Pour Les Web Designer PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

CSS3 Pour Les Web Designer PDF

Transféré par

Droits d'auteur :

Formats disponibles

Au sommaire

Les livres de ceux qui font le web

Code diteur : G12987

Utiliser CSS3 aujourdhui * Comprendre les transitions

Les feuilles de styles CSS sont devenues un outil

Les livres de ceux qui font le web

CSS3 pour les

Utiliser CSS3 aujourdhui * Comprendre les transitions

Les livres de ceux qui font le web

Les feuilles de styles CSS sont devenues un outil

Les livres de ceux qui font le web

CSS3 pour les

CSS3 pour les

Traduction autorise de louvrage en langue anglaise

Dans la mme collection

Le code de la proprit intellectuelle du 1er juillet 1992 interdit en effet expressment la

table des matires

Utiliser CSS3 aujourdhui

Broder avec CSS3

Enrichir les formulaires

1. Bulletproof web Design (NdT).

En se penchant sur le pass illustre de CSS, on y retrouve

nos clients et nos patrons. Ce fut une priode stimulante au

MAIS NE LISEZ PAS LA SPCIFICATION

css3 pour les Web Designers

TOUT LE MONDE PEUT UTILISER CSS3

Cibler la couche dexprience

css3 pour les Web Designers

Certains domaines, comme lidentit graphique, lutilisabilit et

interactions. Il est bien moins crucial davoir une exprience

PRINCIPALES PROPRITS CSS3 UTILISABLES

css3 pour les Web Designers

Images darrire-plan multiples

tableau 1.02: Proprits CSS3 et les navigateurs qui les supportent.

Images darrire-plan multiples

css3 pour les Web Designers

videmment, cette liste est loin dtre exhaustive. CSS3 contient

Ce dont nous ne parlerons pas

Dautres portions de la spcification CSS3 peuvent galement

Assurez-vous de dcouvrir ces autres modules quand vous

Ce mot-clef prcd dun tiret et attach au dbut du nom de

css3 pour les Web Designers

mentale est intgre un module CSS3 abouti, le navigateur

Fonctionnement des prfixes de navigateur

Les navigateurs utilisant WebKit (le moteur de Safari, Safari

Ne craignez pas les prfixes de navigateur!

css3 pour les Web Designers

Ne vous plaignez donc pas des prfixes de navigateur.

Pourquoi toutes ces rptitions?

css3 pour les Web Designers

Ctait lanne 1997 et je me trouvais dans un appartement

lanimation, le mouvement et linteraction. Mais maintenant que

LA QUEUE QUI REMUE LE CHIEN

css3 pour les Web Designers

Voil lexemple type dune innovation indpendante devenue

MAIS QUE SONT CES TRANSITIONS CSS?

Nous allons ensuite ajouter une dclaration pour ltat normal

fig 2.01: Ltat normal et ltat :hover

Ajoutons maintenant une transition ce changement de couleur

css3 pour les Web Designers

Vous remarquerez les trois parties de la transition dans la

LA FONCTION DE TIMING (OU: JAURAIS

Si comme moi vous dormiez en cours de gomtrie, pas de