21 outils et générateurs CSS pour développeurs web
Les générateurs et outils CSS sont de plus en plus nombreux sur la toile, et facilitent la tâche des développeurs web en leur faisant gagner un gain de temps considérable, en particulier ceux qui génèrent du CSS3. Voici une liste non exhaustive de 21 ressources CSS à connaître et à tester dès maintenant !
| 1. Bear CSS | 8. CSS3 Button Generator | 15. Lorempixel |
| 2. CSS Type Set | 9. Ultimate CSS Gradient Generator | 16. HTML Ipsum |
| 3. Border Radius Generator | 10. CSS3 Gradient Generator | 17. CSSWarp |
| 4. CSS3 Generator | 11. 3D CSS Text | 18. Compare Ninja |
| 5. CSS3 Generator | 12. Variable Grid System | 19. CSS Ribbon Generator |
| 6. CSS3 Please | 13. CSS Load | 20. CSS Opacity Generator |
| 7. CSS3 Maker | 14. CSS Arrow Please | 21. prefixMyCSS |
1. Bear CSS
Bear CSS est un service qui permet de générer une feuille de style à partir d’un code HTML en prenant en compte les éléments et le balisage de la structure du document (id et classes CSS). Ainsi, vous gagnerez du temps au démarrage de la conception du style CSS. A noter que le balisage HTML5 n’est pas correctement géré.
2. CSS Type Set
CSS Type Set est un service qui permet de gérer la mise en forme d’un texte dans une interface simple et intuitive. Saisissez votre texte puis configuez son apparence en utilisant la barre d’outils : police, alignement, taille, couleur, etc. Une fois le style terminé, il ne vous reste plus qu’à récupérer le code CSS généré.
3. Border Radius Generator
Border Radius est un générateur déstiné uniquement à la propriété CSS3 border-radius qui permet de créer des coins arrondis sur un élément HTML. Le code est automatiquement généré avec un aperçu. A noter que la propriété n’est supportée par Internet Explorer qu’à partir de la version 9.
4. CSS3 Generator
CSS3 Generator est un générateur CSS3 spécialement conçu pour utiliser quatre propriétés en particulier : les bords arrondis (border-radius), les ombres (box-shadow), les dégradés de couleur (gradient) et l’opacité (opacity). La compatibilité IE7+ est assurée grâce aux filtres Microsoft.
5. CSS3 Generator
CSS3 Generator (même nom que le précédent) est un générateur CSS3 qui dispose de toutes les propriétés CSS3 classiques telles que border-radius, box-shadow, ou gradient, mais également des propriétés plus pointues comme transform, transition ou encore box-sizing. Bref, un générateur simple et complet.
6. CSS3 Maker
CSS3 Maker est un des générateurs CSS3 les plus complets du moment, qui met à disposition l’ensemble des propriétés telles que border-radius, box-shadow, gradient, transform, animation (via les keyframes), ou encore transition. Bref, tout y est, avec indication précise de la compatibilité navigateur. Vous pouvez également télécharger la source.
7. CSS3 Please
CSS3 Please est probablement l’un des tous meilleurs générateurs CSS3. Tout comme CSS3 Maker, il propose l’essentiel des propriétés existantes sous forme d’un éditeur de code où chaque ligne est éditable avec un aperçu du rendu final : border-radius, box-shadow, gradient, transition, @font-face, etc… Le tout accompagné des filtres Microsoft pour le support IE6+.
8. CSS3 Button Generator
CSS3 Button Generator est un générateur de bouton CSS3. Pas besoin de saisir une seule ligne de code, ni d’utiliser d’image. Le service met à disposition une interface permettant de configurer le texte du bouton, la box, la bordure, le background, et l’état « hover ». Point négatif non négligeable : le code CSS généré n’inclut pas le support d’Opera qui utilise pourtant plusieurs propriétés sans préfixe (ex : border-radius).
9. Ultimate CSS Gradient Generator
Ultimate CSS Gradient Generator, service développé par ColorZilla, vous permet de générer des dégradés CSS3, aussi bien « linear » que « radial », via des sélecteurs de couleurs et des curseurs. L’interface n’est pas sans rappeller Photoshop, et la création d’un dégradé personnalisé est très intuitive. Probablement ce qui ce fait de mieux en génération de « gradient » !
10. CSS3 Gradient Generator
CSS3 Gradient Generator est un générateur qui se focalise sur les dégradés à l’aide d’un ColoPicker. Facile à prendre en main, vous pouvez ajouter autant de couleurs que vous le voulez, les déplacer dans votre dégradé, et choisir la direction de celui-ci via des axes (horizontal, vertical, ou diagonale). Un des seuls générateurs à concurrencer Ultimate CSS Gradient Generator vu précédemment.
11. 3D CSS Text
3D CSS Text est un générateur de texte en trois dimensions. Le service utilise la propriété CSS text-shadow et génère plusieurs ombres pour simuler un effet de 3D. Vous pouvez paramétrer très précisément cet effet, notamment sa hauteur, son dégradé, son opacité et son angle d’inclinaison.
12. Variable Grid System
Basé sur le framework CSS 960 Grid System, le service Variable Grid System propose une interface simple de personnalisation de grille avec plusieurs options telles que le nombre de colonnes, la largeur des colonnes, et la largeur des marges. C’est un moyen rapide de générer une grille CSS sous-jacente calquée sur le standard 960 Grid System.
13. CSS Load
CSS Load est un générateur d’icônes de chargement (aussi appelées loader) entièrement en CSS, animation comprise. Vous devez choisir l’une des huits icônes proposées pour configurer vitesse d’animation, couleurs, et dimensions. L’animation est gérée via les keyframes CSS3 ; leur fonctionnement est proche de celui de la fonction jQuery animate().
14. CSS Arrow Please
CSS Arrow Please est un générateur de box avec flèche directionnelle, similaire à une infobulle, le tout conçu entièrement avec des propriétés et des pseudo-classes CSS. Le service propose quelques options pour la personnalisation (position, taille, bordure, etc) et crée automatiquement le code CSS associé.
15. Lorempixel
Lorempixel (anciennement Lorempixum) est l’équivalent du célèbre Lorem Ipsum pour les illustrations ! Un service très pratique pour intégrer un template HTML/CSS avec des images temporaires. Plus besoin de passer par Photoshop pour avoir des images aux bonnes dimensions ; il vous suffit de choisir la taille désirée, et le tour est joué ! Le service vous fournit alors une URL à insérer directement dans l’attribut src de votre image.
16. HTML Ipsum
HTML Ipsum, toujours en référence à Lorem Ipsum, est un service qui propose différents type de contenu HTML : paragraphe, liste ordonnée ou non-ordonnée, ou encore diverses balises (h1, h2, h3, a, strong, etc). Cela s’avère très pratique, par exemple pour simuler un texte structuré dans un WYSIWYG ou directement dans du code HTML.
17. CSSWarp
Similaire au rendu du plugin jQuery Bacon, CSSWarp est un générateur CSS3 disposant d’une interface facile à prendre en main pour déformer « physiquement » votre texte selon un cercle ou une courbe de Bézier. Pusieurs paramètres sont disponibles tels que l’ajout de points à la courbe, l’incurvation, ou encore l’alignement du texte.
18. Compare Ninja
Compare Ninja est un service vous permettant de créer en quelques minutes un tableau comparatif HTML/CSS avec un design personnalisé et attrayant ; choisissez un thème existant, le nombre de colonnes, le nombre de lignes, puis remplissez votre tableau avec des données. Le code HTML/CSS généré est valide W3C.
19. CSS Ribbon Generator
CSS Ribbon Generator est un générateur de rubans (ou ribbons) ; une des dernières tendances du webdesign. Il suffit de choisir un des quatre modèles pour le personnaliser (id et classes CSS, couleur, taille, ombre) à l’aide d’une prévisualisation. Une fois terminé, vous obtenez le code HTML/CSS correspondant prêt à l’utilisation (compatibilité IE7+).
20. CSS Opacity Generator
CSS Opacity Generator est un générateur d’opacité CSS. Il vous suffit de déplacer un curseur pour faire varier la valeur de l’opacité de l’aperçu. Le service génère alors automatiquement le code CSS correspondant pour les navigateurs modernes, mais également les filtres pour le support IE.
21. prefixMyCSS
prefixMyCSS est un service qui permet de rendre compatible des propriétés CSS avec tous les navigateurs en leur rajoutant les préfixes lorsque c’est nécessaire. Ainsi, vous pouvez rendre votre feuille de style « cross-browser » sans ajouter la moindre ligne de code ; l’outil le fait pour vous.
