CSS3 Pour Les Web Designer

Les livres de ceux qui font le web
2
No.
Dan Cederholm
CSS3 pour leS WeB DeSIGNerS

prface de Jeffrey Zeldman
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!
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 *
Au sommaire
Les livres de ceux qui font le web
Dan Cederholm
CSS3 pour leS WeB DeSIGNerS
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
1 15 28 53 82 92 116 121
chapitre 1
Utiliser CSS3 aujourdhui

chapitre 2
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
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).
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/
U T i l i s e r C s s 3 aU j o U r d h U i
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.
C s s 3 p o U r l e s W e b d es i g Ne rs
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
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).
CRITIQUE
identit visuelle Utilisabilit accessibilit Mise en page
NON CRITIQUE
interaction rcompenses visuelles ractivit 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
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.
PROPRIT
border-radius
SUPPORTE PAR
3+
3+
1+
10.5+
9 beta
text-shadow
1.1+ 2+ 3.1+ 9.5+
box-shadow
3+ 3+ 3.5+ 10.5+ 9 beta
images darrire-plan multiples

1.3+ 2+ 3.6+ 10.5+ 9 beta
opacity
1.2+ 1+ 1.5+ 9+ 9 beta
rgba
3.2+ 3+ 3+ 10+ 9 beta
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
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.
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
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-
10
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 Mozilla opera Konqueror Microsoft Chrome
webkit moz o khtml ms 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
-moz-border-radius: 10px; 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
12
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
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.
14
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
CoMpreNdrre les TraNsiTioNs Css
15
Openmirrors.com
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.)
16
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 chapitre 1, 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
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.
18
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
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; }
20
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
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; -webkit-transition: background 0.3s ease; -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
22
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; -webkit-transition: background 0.3s ease; -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
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 (fig 2.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.
24
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
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
26
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
3
28
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.
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
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)
30
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
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.
32
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
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.
34
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
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 (fig 3.08), o nous allons combiner border-radius, text-shadow et RGBA des transitions CSS pour crer une exprience qui surprend et merveille.
36
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
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
38
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
#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.
40
#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); } #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
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); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; } #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.
42
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
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; -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: color 0.3s ease-in-out, background 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; transition: color .3s ease-in-out background .3s ease-in-out;
44
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
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 :
46
<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 (fig 3.18).
47
Openmirrors.com
#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.
48
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 :
#footer-logos a img { border: none; opacity: 0.25; -ms-filter: "progid:DXImageTransform.Microsoft. Alpha(Opacity=25)"; /* Hack IE 8 */ filter: alpha(opacity = 25); /* Hack IE 5-7 */ } #footer-logos a:hover img, #footer-logos a:focus img { opacity: 0.6;
49
Openmirrors.com
-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=60)"; /* Hack IE 8 */ filter: alpha(opacity = 60); /* Hack IE 5-7 */ }
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,2 secondes) et une courbe de vitesse qui acclre puis dclre (ease-in-out).
#footer-logos a img { opacity: 0.25;
50
-ms-filter: "progid:DXImageTransform.Microsoft. Alpha(Opacity=25)'; /* Hack IE 8 */ filter: alpha(opacity = 25); /* Hack IE 5-7 */ -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; } #footer-logos a:hover img, #footer-logos a:focus img { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft. Alpha(Opacity=60)"; /* Hack IE 8 */ filter: alpha(opacity = 60); /* Hack IE 5-7 */ }
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
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 !
52
4
Openmirrors.com
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 :
TraNsForMer le Message
53
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> <li><a href="#"><img src="photo-2.jpg" /></a></li> 1. http://www.w3.org/Tr/Css3-2d-transforms/#abstract
54
C s s 3 p o U r l e s W e b d es i gNe rs
<li><a href="#"><img src="photo-3.jpg" /></a></li> </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
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.
56
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 :
ul.galerie li a:hover img { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 2. adresse complte : http://www.w3.org/Tr/css3-2d-transforms/#transformorigin
57
Openmirrors.com
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.
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); -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.
58
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
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; } ul.galerie li a:hover img { -webkittransform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); -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); }
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.
60
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 :
ul.galerie li a:hover img { -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); -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); }
61
Openmirrors.com
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.
62
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
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.
64
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) :
ul.galerie li a:hover img { -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
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) :
ul.galerie li a:hover img { -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.
66
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
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 40 pixels vers le bas (fig 4.15) :
ul.galerie li a:hover img { -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.
68
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
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.
70
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
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; -webkit-border-radius: 4px; -moz-border-radius: 4px; -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.
72
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; } ol#things li#things-2 a img { width: 50px; top: 20px; left: 50px; }
73
Openmirrors.com
ol#things li#things-3 a img { width: 80px; top: 19px; left: 30px; } ol#things li#things-4 a img { width: 70px; top: 25px; left: 45px; } ol#things li#things-5 a img { 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 { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25);
74
transform: scale(1.25); }
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
ol#things li#things-2 a:hover img { top: 25px; left: 60px; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }
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.
76
Nous allons dplacer le chat de 15 pixels vers la droite en augmentant la valeur left de 30px 45px (fig 4.21) :
ol#things li#things-3 a:hover img { 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.
ol#things li#things-4 a:hover img { -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg);
77
Openmirrors.com
-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 :
78
ol#things li#things-5 a:hover img { 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
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).
80
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
5
82
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
(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 M U lT i p l e s
83
Openmirrors.com
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 (fig 5.02).
fig 5.02 : redimensionnez la fentre du navigateur sur le site de silverback et admirez leffet tridimensionnel.
84
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
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).
86
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
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.
88
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
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
90
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
6
92
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.
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 (fig 6.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.
eNriChir les ForMUlaires
93
Openmirrors.com
<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; }
94
#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
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.
96
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
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; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
98
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
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
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; background-image: -webkit-gradient(linear, 0% 0%, 0% 12%, from(#999), to(#fff)); background-image: -moz-linear-gradient(0% 12% 90deg, #fff, #999); background-color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
101
Openmirrors.com
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
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
#thing-alerts input[type="submit"] { padding: 8px 15px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1; color: #444; border: none; background-color: #fff; }
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-family: Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1; color: #444; border: none; background-color: #fff; -webkit-border-radius: 23px; -moz-border-radius: 23px; -o-border-radius: 23px; border-radius: 23px; }
104
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.
#thing-alerts input[type="submit"] { padding: 8px 15px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1; color: #444; border: none; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb)); background-image: -moz-linear-gradient(0 100% 90deg, #fff, #bbb); background-color: #fff; -webkit-border-radius: 23px; -moz-border-radius: 23px; -o-border-radius: 23px; border-radius: 23px; }
105
Openmirrors.com
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.
#thing-alerts input[type="submit"] { padding: 8px 15px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1; color: #444; border: none; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb)); background-image: -moz-linear-gradient(0 100% 90deg, #fff, #bbb); background-color: #fff; -webkit-border-radius: 23px; -moz-border-radius: 23px; -o-border-radius: 23px; border-radius: 23px; }
Nous utilisons RGBA pour obtenir un blanc opaque 85 % et laisser le dgrad gris transparatre lgrement. Nous plaons
106
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 :
#thing-alerts input[type="submit"] { padding: 8px 15px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1; color: #444; border: none; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb)); background-image: -moz-linear-gradient(0% 100% 90deg, #bbb, #fff); background-color: #fff;
107
Openmirrors.com
-webkit-border-radius: 23px; -moz-border-radius: 23px; -o-border-radius: 23px; border-radius: 23px; -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 Explorer 7, un navigateur qui ne supporte absolument pas CSS3, nous verrons un formulaire fonctionnel et parfaitement acceptable
108
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
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
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
@-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2); } 50% { -webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.9); } 100% { -webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2); } }
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.
#thing-alerts input[type="text"]:focus { -webkit-animation: pulse 1.5s infinite ease-in-out; }
112
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 :
#thing-alerts input[type="text"]:focus { -webkit-animation-name: pulse; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; }
113
Openmirrors.com
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
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
7
116
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.
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 N C lU s i o N
117
Openmirrors.com
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
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 N C lU s i o N
119
Openmirrors.com
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
indeX
SymbOlES
\ last-child 96 -chrome 11 -khtml 11 -ms 11 -o 11
E
ease 19 ease-in 19 ease-in-out 19, 50, 112 ease-out 19
F
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
A
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
G
Gecko 12 Golden Record 31, 32
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
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
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
J
JavaScript 4, 15, 16, 18, 26, 45, 59, 60, 64, 120 Johansson, Roger 97 jQuery 26
D
dclaration abrge 21 dclaration fourre-tout 73 dfilement parallaxe 83, 89 dgrads 83, 93, 99, 101, 102, 105
K
keyframes 111, 114 Koch, Peter-Paul 97 Konqueror 11
iNdex
121
Openmirrors.com
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
N
NASA 125
T
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
O
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
P
Panic Software 63 prfixes de navigateur 10, 11, 12, 13, 14, 28, 42, 58, 100, 118 Prototype 26 pulse 111, 114
V
Voyager 1 et Voyager 2 31
W
W3C 3 Web fonts 10 WebKit 11, 12, 16, 18, 21, 22, 53, 58, 64, 77, 100, 110, 111, 112, 115, 118
R
RGBA 7, 9, 36, 38, 39, 40, 83, 95, 106, 108 rotate 61, 63, 64, 69, 70, 77
S
Safari 2, 7, 8, 9, 12, 16, 17, 18, 22, 35, 39, 40, 42, 43,
122
Css3 poUr les Web desigNers
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
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 Pour Les Web Designer

Transféré par

Informations du document

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

Transféré par

Droits d'auteur :

Formats disponibles

Les livres de ceux qui font le web

CSS3 pour leS WeB DeSIGNerS

Les livres de ceux qui font le web

CSS3 pour leS WeB DeSIGNerS

ditions EyrollEs 61, bld saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com

table des matires

Utiliser CSS3 aujourdhui

Comprendre les transitions CSS3

Broder avec CSS3

Enrichir les formulaires

1. Bulletproof web Design (NdT).

Utiliser Css3 aUjoUrdhUi

mais ne liseZ pas la spCiFiCation

toUt le monde peUt Utiliser Css3

Cibler la couche dexprience

prinCipales proprits Css3 Utilisables aUJoUrdHUi

images darrire-plan multiples

tableau 1.02 : proprits Css3 et les navigateurs qui les supportent.

Images darrire-plan multiples

Ce dont nous ne parlerons pas

WebKit Mozilla opera Konqueror Microsoft Chrome

webkit moz o khtml ms chrome

Fonctionnement des prfixes de navigateur

-moz-border-radius: 10px; border-radius: 10px; }

Ne craignez pas les prfixes de navigateur !

Pourquoi toutes ces rptitions ?

Comprendre les transitions Css

CoMpreNdrre les TraNsiTioNs Css

la QUeUe QUi remUe le CHien

mais QUe sont Ces transitions Css ?

CoMpreNdrre les TraNsiTioNs Css

fig 2.01 : ltat normal et ltat :hover du lien

Vous remarquerez les trois parties de la transition dans la dclaration :

la FonCtion de timinG (oU : JaUrais vraiment d sUivre Ces CoUrs de matHs )

CoMpreNdrre les TraNsiTioNs Css

a.foo:hover { background: #690; }

Transition abrge avec retardateur

CoMpreNdrre les TraNsiTioNs Css

empiler les transitions

CoMpreNdrre les TraNsiTioNs Css

appliQUer Une transition plUsieUrs proprits

fig 2.03 : ltat normal et ltat :hover du lien

appliQUer Une transition toUtes les proprits potentielles

QUelles sont les proprits Css Compatibles aveC les transitions ?

CoMpreNdrre les TraNsiTioNs Css

poUrQUoi ne pas plUtt Utiliser JavasCript ?

soYeZ malin, soYeZ sUbtil

5. adresse complte : http://trentwalton.com/2010/03/22/Css3-in-transition/

CoMpreNdrre les TraNsiTioNs Css

Broder aveC Css3

notre tUde de Cas

Messages dans lespace et sur le Web

fig 3.06 : le curieusement nomm http://dowebsitesneedtobeexperience dexactlythesameineverybrowser.com.

Positionnement des lments

La figure 3.09 prsente le rsultat. Notre liste est maintenant horizontale.

Styler la couleur des liens avec RGBA

Offrir une alternative RGBA

fig 3.11 : Un gros plan des liens semitransparents.

Style des tats hover et focus

fig 3.13 : ltat :hover, avec un arrire-plan semitransparent cr laide de rgba.

Arrondir leffet avec border-radius

fig 3.14 : arrondi des coins de larrire-plan avec borderradius.

Ajout dune transition

eFFet de sUrvol simple et FleXible aveC la proprit opaCitY

-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=60)"; /* Hack IE 8 / filter: alpha(opacity = 60); / Hack IE 5-7 */ }