Design & Graphisme

Le petit journal permanent de CSS3 — 100+ ressources pour commencer

Après mes petits journaux permanents consacrés à la typographie et à HTML5, voici un numéro spécial qui fait la part belle à CSS3. Ces nouvelles propriétés proposent des effets graphiques ou typographiques à votre page Web, mais pas seulement : CSS3, ce sont aussi des sélecteurs et des pseudo-classes qui vont nous faciliter l’intégration et nous permettre de repousser encore plus loin les frontières de l’univers et au-delà ! En attendant, voici des générateurs de code CSS3 en ligne classés par propriétés ; des ressources pour vérifier la compatibilité des navigateurs et quelques liens pour faire entrer dans le rang les plus récalcitrants ; des tutoriels et des exemples de tests et d’expérimentations diverses avec CSS3 qui devraient vous inspirer. Ce guide permanent sur CSS3 contient plus d’une centaine de liens, pour commencer.

Générateurs de CSS3

Multi-propriétés

  • CSS 3.0 Maker — Très bel outil pour générer les propriétés CSS3 Border Radius, CSS Transform, Box Shadow, Text Shadow, Text Rotation, RGBA, Font Face, Outline Offset, Transitions et CSS Gradient. Les nombreuses options sont accessibles par le biais de curseurs ou de boutons radio.
    La compatibilité avec les navigateurs est matérialisée par des icônes généreuses représentant les navigateurs concernés, qu’il s’agisse des navigateurs de bureau ou mobile. Le code est facilement copiable ou téléchargeable sous la forme d’un .zip. La prévisualisation des effets est très réussie, notamment en ce qui concerne les animations CSS.
  • CSS3 Generator — Un des meilleurs générateurs de CSS3 tant par le nombre de propriétés prises en compte que par la fluidité de l’interface. Au menu : Border Radius, Box Shadow, Text Shadow, RGBA, Font Face, Multiple Columns, Box Resize, Box Sizing, Outline, Transitions, Transform. Selectors et Gradients renvoient respectivement aux liens CSS3 Selectors Explained et Ultimate CSS Gradient Generator.
  • New! CSS3 Generator (oui, encore un) est un éditeur de CSS3 créé par Pascal von Seth. Cet outil en ligne permet d’éditer une dizaine de propriétés : background, border, border-radius, gradient, box-shadow, transform, opacity, font et text-shadow.
  • CSS3, Please! — Ce générateur de CSS3 multi-navigateurs prend la forme d’une page Web que l’on peut copier-coller telle quelle tout en pouvant modifier les valeurs soulignés qui se répercutent automatiquement sur l’ensemble de la déclaration concernée : coins arrondis, ombres portées sur les bloc et les textes, dégradés, RGBA, Rotation, Transitions et Font Face. Propose les propriétés spécifiques à Internet Explorer (filter et -ms-filter) pour les dégradés, la transparence RGB, la rotation des blocs et les polices de caractères.
  • CSS3 Sandbox : Gradients, CSS Transforms, Shadows, CSS Text Stroke — Parmi les nombreux outils et les ressources pour les professionnels du Web proposés par Western Civilisation, on trouve des outils pour faire du CSS3 comme Jourdain faisait de la prose !  Toutes les opérations s’effectuent à l’aide de curseurs et de sélecteurs de couleurs (Color Pickers). Les modifications se répercutent automatiquement dans le code qu’il suffit de copier lorsque vous avez terminé.
  • CSS3 Click Chart — Cette page fait plutôt office de pense-bête pour les principales propriétés CSS3 : exemple d’utilisation, informations et code.
  • CSS3 Generator — Interface très agréable pour prévisualiser les propriétés border-radius, box-shadow, background-gradient et opacity. Le générateur de code propose le support de IE7 & IE8.
  • CSS3.Me — Encore un générateur de propriétés CSS3 pour se simplifier la vie avec : border-radius, box-shadow, background-gradient et opacity. Fix pour IE7 et IE8.
  • CSS Prefixer — Ecrivez vos déclarations CSS3 et demandez les préfixes vendeurs, c’est aussi simple que ça !

Dégradés (Gradients)

  • Générateur de dégradés CSS — Propose un nombre illimité de couleurs pour vos dégradés CSS3, quatre directions, une prévisualisation en direct, des options pour les anciens navigateurs et une compatibilité étendue pour IE et Opera pour utiliser les dégradés obliques sous Opera 9.5+ (en utilisant un fond SVG) et activer les filtres de dégradés sous IE. Propose une table de compatibilité des options des dégradés pour IE 5.5 — 8, Firefox < 3.6 et 3.6+, Google Chrome < 4  et 4, Safari < 4 et 4, Opera < 9.5 et 9.5+.
  • Ultimate CSS Gradient Generator — Editeur de dégradés pour générer les déclarations CSS3 à travers des sélecteurs de couleurs et des curseurs très proches de l’Outil Dégradé de Photoshop. Lire Dégradés CSS3 WYSIWYG avec Ultimate CSS Gradient Generator.
  • CSS3 Gradient Generator — Sélectionnez la direction de votre dégradé, le format HEX ou RGB, les couleurs de votre choix : lorsque l’exemple dynamique vous plait, copiez le code mis à jour à la volée.
  • Quick 3-Color CSS3 Gradient Generator — Lorsque vous avez choisi vos trois couleurs, vous pouvez copier un des trois bouts de code en fonction de la direction que vous voulez pour votre dégradé : Top to Bottom, Left to Right ou Radial.
  • CSS3 Gradient Button Generator — Cet outil est conçu en Flash par esprit de conciliation entre les deux mondes que sont devenus le développement HTML5/CSs3/Javascript et Flash. L’interface est spartiate, mais complète. L’outil propose la gestion des état `:hover` et `:active`, ce qui être très pratique pour créer des boutons.
  • CSS3 Gradients — Le point sur les dégradés CSS3 introduit en 2008 par le moteur de rendu Webkit.
  • CSS3 Patterns Gallery — Collection de backgrounds composés de motifs éditables réalisés principalement avec les propriétés de création de dégradés.

Coins arrondis

  • Border Radius — Ce générateur de coins arrondis permet de choisir un rayon d’arrondi différent pour chaque angle ou identique pour tous. Il affiche directement la règle CSS avec les propriétés CSS3 pour WebKit et Gecko, en plus du format spécificié par le W3C, bien évidemment.
  • CSS3 Rounded Corner Generator — Choisissez le rayon de vos arrondis à l’aide de curseurs intuitifs. Possibilité de saisir également la couleur de fond pour le bloc, la largeur et la couleur de la bordure.
  • CSS Corners — Permet de spécifier l’arrondi, le dégradé et le padding pour votre bloc.

Border Image

  • Border Image Generator — Cette propriété fait partie des plus prometteuses pour les intégrateurs Web voulant utiliser des images pour avoir de belles bordures personnalisées. Avec Border Image Generator, il suffit de charger une image depuis votre poste de travail et de faire glisser les quatre curseurs pour déterminer la part de chaque côté qui apparaitra dans les bordures (Top, Right, Bottom, Left). Il est possible de jouer sur la taille et la répétition verticale ou horizontale des portions de l’image. Le code source de Border Image Generator est disponible sur github.

Boutons

Les bords arrondis, les ombres portées et les dégradés sont de bons candidats pour donner à certains liens l’apparence de boutons de type Call to Action. Voici quelques générateurs qui vous permettront de les paramétrer «vite fait, bien fait».

  • CSS3 Button Generator — Plusieurs paramètres sont pris en compte : le texte (famille, couleur, taille, ombre) ; le bloc (ombre, padding) ; la bordure (coin arrondi, couleur, style, largeur) ; le fond (dégradé, couleur de départ, couleur de fin) ; et l’état :hover du bouton. CSS3 Button Generator Propose d’ajouter les styles spécifiques à Internet Explorer pour l’affichage des dégradés.
  • Button Maker — Trois curseurs permettent respectivement de régler le padding, la taille du texte et le rayon de l’arrondi du bloc. Sept sélecteurs de couleur proposent la gestion des couleurs du dégradé : Top Gradient Color, Bottom Gradient Color, Top Border Color, Hover Background Color, Text Color, Hover Text Color et Active Background Color.
  • We Love Buttons — Set de boutons réalisés en CSS3 avec une feuille de style CSS prête à l’emploi.

Colonnes

  • Générateur de multi-colonnes en CSS3 — La répartition d’un pavé de texte en plusieurs colonnes qui est une pratique courante dans la presse est désormais à la portée de tous ! Spécifiez le nombre de colonnes et l’espace qui les sépare, la présence ou non d’un séparateur de colonnes, sa largeur, et son style.

Font-face

Media Queries

  • CSS3 Media Queries — Spécifications du W3C concernant le module Media Queries permettant d’adapter une page web selon les critères techniques ou les pré-requis des agents utilisateurs comme la largeur, la hauteur, l’orientation, la couleur, la résolution, etc.
  • Les Media Queries CSS3 — Article de fond en français expliquant Media Queries.

Transformation & rotation

  • CSS WARP — Ce générateur CSS3 permet d’afficher du texte le long d’un tracé vectoriel irrégulier avec un système de points d’ancrage pour à la manière d’Illustrator et de son outil Plume.

CSS3 Cross Browser ?

Les possibilités graphiques chatoyantes offertes par CSS3 ne sont pas disponibles dans tous les navigateurs. Seuls les plus récents ont commencé à les implémenter via un préfixe «vendeur» (lire Vendor-prefixed CSS Property Overview). Pour s’en sortir, il est utile de connaitre les propriétés CSS prises en charge par les navigateurs que vous avez décidé de «supporter» dans le cadre de votre intégration, qu’il s’agisse de privilégier la «dégradation gracieuse» ou «l’amélioration progressive», en mettant en place une solution Javascript ou un composant HTC pour émuler les propriétés CSS3 qui manquent à l’appel.

Vérifiez la compatibilité avec les navigateurs

  • CSS3 Selectors Test — Teste une quarantaine de sélecteurs CSS3 et précise leur prise en charge par votre navigateur. Un lien vers le sélecteur affiche un exemple d’utilisation avec le code HTML associé.
  • HTML5 & CSS3 readyness — Votre navigateur est-il prêt pour CSS3 et HTML5 ?
  • When can I use… — Cette table de compatibilité permet de s’assurer que les navigateurs ciblés prennent en charge HTML5, CSS3, SVG, etc.
  • Web Browser Standards Support — Table de compatibilité très complète sur la prise en charge des propriétés et sélecteurs CSS 2.1 et CSS 3. A garder sous la souris !
  • CSS Compatibility and Internet Explorer — Le point sur la prise en charge des sélecteurs ou des attributs CSS disponibles dans les différentes versions d’Internet Explorer, par MSDN (réseau Microsoft pour développeurs).
  • HTML5 & CSS3 Support — Tableau de compatibilité inter-navigateurs pour CSS3 et HTML5.
  • CSS3 learning tool et Webkit CSS3 Generator sont deux outils interactifs plutôt basiques permettant de voir dans le navigateur les propriété est prise en charge.

Assurez (un peu) la compatibilité

  • CSS3PIE (Progressive Internet Explorer) — Composant HTC permettant à Internet Explorer (IE6 — IE8) de «rendre» quelques propriétés CSS3 (border-radius, box-shadow, linear-gradient).
  • IE-CSS3 — Fournit à Internet Explorer la prise en charge de quelques propriétés du nouveau standard CSS3.
  • Transformie — Plugin jQuery permettant d’utiliser les transitions CSS dans IE via les filtres natifs d’Internet Explorer
  • ecsstender –Say goodbye to the browser-specific properties and hacks cluttering your files and say hello to lean, mean CSS. With eCSStender, when you write the rules, browsers pay attention.
  • Modernizr — Ajoute des classes à l’élément <html> pour cibler les fonctions disponibles dans un navigateur spécifique. Pratique pour prévoir une dégradation gracieuse ou une amélioration progressive en fonction de vos contraintes d’intégration.
  • Selectivizr — Cette ressource Javascript rend disponible les différents sélecteurs et pseudo-classe CSS3 sur IE6 — IE8. Fonctionne avec de nombreuses bibliothèques JS comme jQuery, prototype, Mootools ou DoJo.
  • DD_Roundies — Petite bibliothèque Javascript permettant d’afficher des coins arrondis dans Internet Explorer via VML. Fonctionne plus ou moins bien dans IE6 — IE8. Il est possible de cibler uniquement Internet Explorer ou de forcer les propriétés `-moz-border-radius`, `-webkit-border-radius`, et `border-radius` dans les navigateurs compatibles.
  • -prefix-free — Pour seulement 2KB (gzippé) le script Javascript de Lea Verou ajoute automatiquement les préfixes «vendeur» pour les propriétés CSS3 et les navigateurs qui en ont besoin.

Tutoriels

Exemples CSS3

Expérimentations CSS3

Galerie CSS3

  • CSS3 Watch — Collection d’exemples d’utilisation créative, innovante ou inatendue de CSS3.
  • CSS3 Gallery — Showcase de designs de sites réalisés avec CSS.

Miscellanées

Linkographie

Ce guide sur CSS3 est en évolution constante et s’agrandit en fonction des découvertes et de vos suggestions. N’hésitez pas à vous manifester et à proposer vos liens et vos ressources CSS3 préférés.

Pour seulement 2KB (gzippé) le script Javascript

Publié le par Bruno Bichet