Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Les livres de ceux qui font le web No. 2 CSS3 pour les WEB DESIGNERS Dan Cederh

Les livres de ceux qui font le web No. 2 CSS3 pour les WEB DESIGNERS Dan Cederholm préface de Jeffrey Zeldman Les livres de ceux qui font le web Les feuilles de styles CSS sont devenues un outil incontournable pour tous les web designers. Des sélecteurs avancés à la génération de contenu, en passant par le grand retour des web fonts, les dégradés, les ombres et les arrondis, jusqu’aux animations les plus complètes, CSS3 offre tout un univers de possibilités créatrices. Nul ne pouvait mieux vous guider à travers ces galaxies que le designer de renom, auteur et superstar du CSS, Dan Cederholm. Découvrez avec lui ce qui marche, comment ça marche, et que faire quand ça ne marche pas ! Au sommaire Utiliser CSS3 aujourd’hui * Comprendre les transitions CSS * La fonction de timing * Différer la transition * Transitions abrégées * Interopérabilité * Empiler les transitions * États de transition * Appliquer une transition à plusieurs propriétés * Appliquer une transition à toutes les propriétés potentielles * Propriétés CSS compatibles avec les transitions * Broder avec CSS3 * Effet de survol simple et flexible avec la propriété opacity * Brodez la toile * Transformer le message * Transformation d’échelle * Transformer l’expérience * Rotate, skew et translate * Différentes transformations au service du message * Arrière-plans multiples * Défilement parallaxe * La vieille méthode : des balises superflues * La nouvelle méthode : arrière-plans multiples via CSS3 * Enrichir les formulaires * Programmation d’un simple formulaire d’inscription * Style des éléments fieldset et label * Style des champs de saisie * Les dégradés CSS3 * Un vrai bouton en CSS3 * Et les autres navigateurs ? * Utilisation de box-shadow pour créer des états focus * Ajout d’animations CSS pour enrichir l’interactivité du formulaire * Conclusion * Le futur de CSS3 * CSS3 pour les WEB DESIGNERS Dan Cederholm éditions Eyrolles 61, bld Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com Traduction autorisée de l’ouvrage 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 l’anglais par Charles Robert © 2010 Dan Cederholm pour l’édition en langue anglaise © Groupe Eyrolles, 2011, pour la présente édition, ISBN : 978-2-212-12987-8 Dans la même collection HTML5 pour les Web Designers, Jeremy Keith, 2010, 96 pages. Le code de la propriété intellectuelle du 1er juillet 1992 interdit en effet expressément la photocopie à usage collectif sans autorisation des ayants droit. Or, cette pratique s’est généralisée notamment dans les établissements d’enseignement, provoquant une baisse brutale des achats de livres, au point que la possibilité même pour les auteurs de créer des œuvres nouvelles et de les faire éditer correctement est aujourd’hui menacée. En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage, sur quelque support que ce soit, sans autorisation de l’éditeur ou du Centre Français d’Exploitation du Droit de Copie, 20, rue des Grands Augustins, 75006 Paris. table des matières chapitre 1 Utiliser CSS3 aujourd’hui 1 chapitre 2 Comprendre les transitions CSS3 15 chapitre 3 Broder avec CSS3 28 chapitre 4 Transformer le message 53 chapitre 5 Arrière-plans multiples 82 chapitre 6 Enrichir les formulaires chapitre 7 Conclusion 92 116 Index 121 Avant-propos Un site Web, ce n’est pas la même chose qu’un dessin de site Web. Quand une personne crée un design sous Photoshop et qu’une autre personne le traduit en HTML et en CSS, le programmeur doit essayer de deviner et d’appréhender l’in- tention du designer. Ce processus d’interprétation ne va jamais sans heurts, sauf quand le programmeur s’appelle Dan Cederholm. Quand Dan code le design de quelqu’un d’autre, il a tout bon, y compris là où le designer a tout faux. Par exemple, Dan traduit forcément les dimensions fixes du design réalisé sous Photoshop en un code flexible, accessible et pare-balles. (Dan a inventé l’expression « Web design pare-balles1 » pour illustrer ses propos.) Pour Dan, flexible ne veut jamais dire vague. Les détails ont toujours leur importance. Car Dan n’est pas seulement un déve- loppeur d’interfaces brillant au service des utilisateurs, il est aussi designer jusqu’à la moelle. Il pense design, rêve design, il a même offert au monde une nouvelle façon de partager le design sur dribbble.com. Dan est également un pédagogue né, doublé d’un 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 d’ins- truire : il élève. Voilà pourquoi, chers amis, nous lui avons demandé d’être notre (et votre) guide pour CSS3. On n’aurait pu rêver de quelqu’un de plus intelligent, de plus expérimenté, de plus axé sur le design et les standards du Web que notre Dan interna- tional. Bon voyage ! Jeffrey Zeldman 1. Bulletproof web Design (NdT). 1 Utiliser CSS3 aujourd’hui En se penchant sur le passé illustre de CSS, on y retrouve quelques avancées majeures qui ont guidé nos carrières de Web designers. Ces techniques, ces articles et ces événements déter minants nous ont aidés à créer des sites Web flexibles et acces sibles dont nous pouvons être fiers, tant visuellement que techniquement. On peut dire que les choses commencèrent à devenir intéres santes en 2001, quand Jeffrey Zeldman écrivit « To Hell With Bad Browsers1 » (http://bkaprt.com/css3/1/)2, augurant les prémices de l’âge de CSS. Ce manifeste incitait les designers à ne pas se contenter d’utiliser les CSS pour gérer la couleur et la police des liens et à faire preuve d’initiative, sans se préoccuper de ces vieux navigateurs incapables de comprendre CSS1. Oui, CSS1. Les quelques années qui suivirent furent employées à créer et à partager des techniques utilisant CSS, dans le but de satisfaire 1. Au diable les mauvais navigateur ! (NdT) 2. Adresse complète : http://www.alistapart.com/articles/tohell/ 1 Utiliser CSS3 aujourd’hui 2 css3 pour les Web Designers nos clients et nos patrons. Ce fut une période stimulante au cours de laquelle nous avons expérimenté, repoussé les limites et trouvé des méthodes complexes pour résoudre les différences de rendu entre navigateurs — tout cela au nom d’une plus grande souplesse, d’une meilleure accessibilité et d’un code allégé. Aux alentours de 2006, CSS faisait de moins en moins parler de lui. La plupart des problèmes rencontrés avaient été résolus. Les bugs les plus courants des navigateurs pouvaient être contournés de diverses façons. Des groupes de soutien venaient en aide aux designers traumatisés par les bugs insondables d’Internet Explorer. Nos cheveux commençaient à grisonner (bon, les miens en tout cas). Blague à part, la cuvée des navigateurs du moment commen çait à croupir. Cette période de statu quo nous a, certes, permis de concevoir des approches reproductibles et d’établir des bonnes pratiques, mais les aficionados de CSS en quête d’outils plus puis sants commençaient, osons le dire, à s’ennuyer ferme. Heureusement, les choses évoluèrent. Les navigateurs commencè rent à offrir des mises à jour plus fréquentes (certains d’entre eux en tout cas). Firefox et Safari commençaient non seulement à se tailler une meilleure part de marché, mais bénéficiaient également d’un cycle de développement plus rapide, supportant les standards les plus répandus, ainsi que des propriétés plus expérimentales. Bien souvent, les technologies que ces navigateurs précurseurs choisissaient d’implémenter étaient reprises dans les brouillons des spécifications. En d’autres termes, c’étaient parfois les créateurs de navigateurs eux-mêmes qui faisaient avancer la spécification. MAIS NE LISEZ PAS LA SPÉCIFICATION Demandez à une tablée de Web designers « qui aime lire les spécifications ? », peut-être qu’une personne lèvera la main. (Si vous êtes cette personne, vous avez trop de temps libre.) Bien qu’elles soient importantes à titre de référence, il n’est claire ment pas dans mes habitudes de lire des spécifications dans leur intégralité, et je ne recommanderai à personne de se donner cette peine pour comprendre CSS3 dans son ensemble. 3 La bonne nouvelle, c’est que CSS3 est en fait une série de modules, conçus pour être implémentés séparément et indépendamment les uns des autres. C’est une très bonne chose. Cette approche segmentée a permis à certaines parties de la spécification d’évo luer plus (ou moins) vite que d’autres, tout en encourageant les créateurs de navigateurs à implémenter les morceaux les plus aboutis avant que CSS3 ne soit prêt dans son intégralité. Le W3C explique le choix de cette approche modulaire : Plutôt que d’essayer de faire rentrer des douzaines de mises à jour dans une seule spécification monolithique, il sera bien plus simple et plus efficace d’actualiser séparément différents éléments de la spécification. L’utilisation de modules permettra de mettre à jour CSS de manière plus précise et opportune, permettant ainsi à la spécification dans son ensemble d’évoluer de manière plus flexible et optimale.3 L’avantage de cette approche pour nous autres, Web designers, c’est qu’en plus de pouvoir expérimenter et de bénéficier de cycles de développement plus rapides, nous pouvons utiliser de nombreuses propriétés CSS3 sans avoir à attendre qu’elles deviennent des recommandations candidates, ce qui pourrait prendre des années. Évidemment, si vous aimez lire uploads/s3/ 02-css3-pour-les-web-designers-dan-cederholm.pdf