Je m’intéresse en ce moment à ce qui touche à HTML5 et CSS3 qui représente l’avenir du web. Voici une liste d’outils trouvés au gré de mes recherches / lecture …
Font
CSS3 apporte le support des polices personnalisées via @font-face qui permet de télécharger et d’utiliser une police disponible sur internet.
- http://www.typetester.org/ : Permet de comparer le rendu de différentes polices et de ses configurations.
- http://www.google.com/webfonts –> « Dépôts » (repository) de font utilisable simplement. Plus besoin d’uploader sur votre serveur votre police. Actuellement plus de 200 fonts sont disponible.
- http://somadesign.ca/projects/fontfriend/ : il s’agit d’un marque page sous la forme d’un code JavaScript qui une fois lancé sur la page que vous souhaitez affiche une fenêtre permettant la modification de tout ce qui touche au texte (taille de la police, police, …). Les Google web fonts sont supportés ainsi que vos polices via un drag n’ drop. Un Must !!
Générateur
Boite à outils
- http://www.css3generator.com/ : le + complet : supporte border-radius, box-shadow, text-shadow, RGBA, colonne multiple, box-sizing, outline, transitions, transformation. De plus, il indique la compatibilité des différents navigatuer de chaque propriété.
- http://css3gen.com/ : supporte border-radius, box-shadow et text-shadow
- http://css-tricks.com/examples/ButtonMaker/ : générateur de boutons
Générateur de dégradé CSS3/ Background
Voici quelques éditeurs qui vous permettront de tirer parti de la fonctionnalité de gradient des backgrounds en CSS3
- http://www.colorzilla.com/gradient-editor/ : liste de gradient pré-configurés, possibilité de générer le code en important une image ou via une URL.
- http://www.display-inline.fr/projects/css-gradient/ -> Outils français. Téléchargement au format PNG possible.
- http://gradients.glrzad.com/
- http://leaverou.me/css3patterns/ : Pattern en CSS3
Transformation
CSS3 permet d’effectuer des transformations (rotations, agrandissement / réduction, translation et déformation) ainsi que des animations. Voici une liste d’outils permettant de générer le code CSS de ceux avec des outils graphiques :
Compatibilité
- modernizr : librairie JavaScript permettant d’ajouter à la balise html la liste des fonctionnalités supportées par le navigateur.
- http://code.google.com/p/html5shim/ : script permettant de rendre compatible les nouvelles balise de HTML5 sous IE (version antérieure à IE9)
- http://html5test.com/ : indique la compatibilité des nouveautés HTML5 avec votre navigateur
Divers
- http://html5boilerplate.com/ : Permet de créer une arborescence pour bien débuter et utiliser HTML5/CSS3. Inclus les bonnes pratiques pour le développement de site en HTML5 (utilisation de modernizr, jquery, reset CSS, …)
- http://www.cascader.co/ : supprime le code inline et l’externalise dans une CSS externe
- http://csswarp.eleqtriq.com/ : génération du HTML + CSS pour un texte sur un chemin
- http://primercss.com/index.php : génère le fichier CSS de base en fonction des id et classe d’un code html
- http://prefixmycss.com/ : ajoute les préfixes pour les navigateurs ==> -moz / -webkit
- http://www.alsacreations.com/page/squelettor : Génère le corps d’un fichier HTML par défaut en fonction d’un doctype
Cheat Sheet
Des petites antisèches pour :
Je mettrais à jour cette liste d’outils avec mes nouvelles trouvailles. N’hésitez à l’en faire découvrir 😉
Tweet