CSS3 Pour Les Web Designer

Les livres de ceux qui font le web

Dan Cederholm

CSS3 pour leS WeB DeSIGNerSprface 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 aujourdhuichapitre 2

Comprendre les transitions CSS3chapitre 3

Broder avec CSS3chapitre 4

Transformer le messagechapitre 5

Arrire-plans multipleschapitre 6

Enrichir les formulaireschapitre 7

Conclusion Index

avant-proposUn 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 satisfaire1. 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 spCiFiCationDemandez 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 Css3Jentends 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 dexprienceDepuis 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 CSS3Pour dfinir lexprience visuelle dun site Web, on peut tablir deux catgories : le domaine critique et le domaine non critique (tableau 1.01).

CRITIQUEidentit visuelle Utilisabilit accessibilit Mise en page

NON CRITIQUEinteraction 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 aUJoUrdHUiLa 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.

PROPRITborder-radius

SUPPORTE PAR

9 beta

text-shadow1.1+ 2+ 3.1+ 9.5+

box-shadow3+ 3+ 3.5+ 10.5+ 9 beta

images darrire-plan multiples1.3+ 2+ 3.6+ 10.5+ 9 beta

opacity1.2+ 1+ 1.5+ 9+ 9 beta

rgba3.2+ 3+ 3+ 10+ 9 beta

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

border-radiusArrondit 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-shadowProprit 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-shadowAjoute 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 multiplesCSS3 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; }

opacityDfinit 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 % */ }

RGBARGBA 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 pasJai 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 naviGateUrJe 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-

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 navigateurComment 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;

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 optimalQuand 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

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/

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.

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

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 CHienDveloppes 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.)

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/

Openmirrors.com

Un eXemple simpleCommenons 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 :Transition-me !

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.

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).

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 transitionRevenons 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; }

transitions abrGesNous 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 retardateurSi 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 ?

Openmirrors.com

interoprabilitComme 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 transitionsVoici 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 et2. adresse complte : http://www.opera.com/docs/specs/presto23/css/transitions/ 3. adresse complte : https://developer.mozilla.org/en/Css/Css_transitions

Opera, ainsi que dans les futures versions des navigateurs qui choisissent de supporter la proprit.

tats de transitionJe 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; }

Openmirrors.com

appliQUer Une transition plUsieUrs propritsAdmettons 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 potentiellesAu lieu de lister plusieurs proprits, on peut utiliser la valeur all pour appliquer une transition toutes les proprits disponibles.

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-

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 sUbtilComme 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

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/

Openmirrors.com

Broder aveC Css3Nous 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 CasPour 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 WebEn 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

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)

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)

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.

sUrprise et merveillementUn 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

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.

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),

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 lUnePrenons 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.

fig 3.08 : la barre de navigation suprieure de notre tude de cas au survol, enrichie en Css3.

Dabord, le balisageComme nous sommes des pros de la smantique, nous allons baliser la barre de navigation suprieure avec une bonne vieille liste non ordonne.

Things Stuff Junk About

Pas de bouleversement cataclysmique pour le moment, juste une structure approprie pour commencer appliquer des styles.

Positionnement des lmentsCommenons 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; }

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 RGBAAjoutons 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 RGBARGBA a beau tre un outil incroyablement flexible permettant de spcifier un niveau dopacit en plus de la couleur, il nest pas

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-shadowPour 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.

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 focusNous 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.

#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-radiusPour 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.

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.

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

Ajout dune transitionPour 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);

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;

On voit bien que la valeur all est sensiblement plus concise et efficace pour appliquer une transition plusieurs changements.

Broder lexprienceNous 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 opaCitYNous 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

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 cliquablesLa 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 balisageComme 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 :

Opacit et efficacit des imagesJai 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 listeLes premiers lments de style vont permettre de centrer les images dans le pied de page, et de les placer lhorizontale (fig 3.18).

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.

fig 3.19 : prsentation de ltat :hover des icnes dans le pied de page obtenu en ajustant la proprit opacity

La manip pour IEHeureusement, 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;

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 transitionPour 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;

-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 toileComme 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.

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 !

4Openmirrors.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

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 dCHellePrenons 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.

1. http://www.w3.org/Tr/Css3-2d-transforms/#abstract

C s s 3 p o U r l e s W e b d es i gNe rs

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 styleAjoutons 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;

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 survolCest 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.

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

Openmirrors.com

Une ombre porte approprieNous 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.

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 transitionEnfin, 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; }

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 leXprienCeMaintenant 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.

Si le traitement du survol tait critique, il nous faudrait repenser notre usage de CSS3 dans la conception lexprience visuelle.

rotate, sKeW et translateEn 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 rotationSi 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); }

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.

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.

Openmirrors.com

Faire tourner le soleilUn 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.

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 skewLa 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.

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 translateEnfin, la transformation translate vous permet de dplacer un lment depuis sa position dorigine lcran, selon des coordonnes x et y.

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).

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.

diFFrentes transFormations aU serviCe dU messaGeLexemple 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 lUneRevenons 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.

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 messageEn 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.

Le balisagePour programmer ce curieux assemblage, la smantique est plutt simple : une simple liste ordonne dimages hyperlies accompagnes de lgendes. 1 big doughnut 1 lawnmower 1 astro cat 1 recliner 1 magic gnome

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 lmentNous 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.

Documents

CSS3 Pour Les Web Designer