21 outils et générateurs CSS pour développeurs web

8 mai 2012

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.

Commentaires

  • Sybio

    J’utilise le générateur de css3.me mais il va vraiment falloir que je me penche sur les autres qui ont l’air tous aussi intéressants !

    • Personnellement, j’utilise souvent Gradient Generator de ColorZilla avec son système de dégradé repris de Photoshop, et Lorempixel pour intégrer des images temporaires (slider, vignettes, etc) ;-)

  • Welcominh

    Belle liste ici là ! C’est assez hétérogène.
    Autant certains sites, j’en vois l’utilité et la valeur ajoutée à la seule lecture de la description (Lorempixel, les gradient generators ou même le prefixMyCSS), autant certaines ressources comme le CSSLoad me glacent le sang par leur coté bling bling « faire du CSS3 pour faire du CSS3 ». En l’occurrence, un simple GIF animé de 3Ko est moins lourd et plus simple à mettre en place, au regard du source généré =D

    Petite suggestion d’amélioration de l’article Pierre : le rajout du sommaire des ressources sous forme de liste numérotée de chaque site. En haut et en bas de l’article, avec les ancres qui vont bien.

    En tout cas, bel article, on jurerait l’article « le boss de fin de stage » de Megaptery !

    • Les ancres sont désormais en place ;-)

      • Welcominh

        Mais t’es un génie Pierre !!

    • Pour revenir sur CSSLoad, l’intérêt n’est pas de « faire du CSS3 pour faire du CSS3 » mais de profiter des capacités qu’offre les propriétés CSS3 : pouvoir créer une icône de chargement complétement personnalisée, sans avoir de compétences Photoshop, que tu n’aurais pas trouvée sur Google Images. C’est donc la créativité et le rendu final qui nous intéressent, outre le fait d’utiliser du CSS3.

      • Welcominh

        Dans l’absolu on pourrait conclure cela. Or je constate de plus en plus à mon désarroi que ce qui fait ramer de nos jours, ce n’est plus la génération de la page (donc traitement coté serveur et requetes SQL), mais les technos client. A savoir donc tout le javascript. Un comble puisque ce dernier est censé utiliser du temps CPU et non réseau, qui lui, est d’ordre 1000 fois plus lent.

        Dans mon cas, ce qu’il m’est arrivé souvent est la situation suivante. Je cherche un gif animé de loading sur google images. J’en trouve 3~4 qui me plaisent et qui peuvent intégrer parfaitement mon site d’un point de vue design. J’hésite, je réfléchis à lequel mettre. J’hésite. S’écoule 5min.
        Et au bout d’un moment un éclair de lucidité me rappelle « Welcominh, t’hésite depuis 5min sur un pauvre loader gif animé 24×24 alors que n’importe lequel de ces 3 là peuvent faire l’affaire, et que personne fera waaaaaah mais quel loader de fou !!! ». Finalement j’en prends un vite fait et l’affaire est classée.
        Quel ne serait pas le débat avec un loader CSS3 fignolé aux petits oignons et au pixel près. Tout ca pour avoir 150 ligne de JS en plus et voir son temps CPU dégringoler davantage : /

        • welcominh

          Oups 150 lignes de JS. C’est plutot du CSS, mais bon ca reste de la techno cliente ;)

          • Au risque de me répéter, CSSLoad est un outil qui répond à un besoin très spécifique : celui de pouvoir créer et personnaliser à 100% une icône de chargement en ligne grâce à des propriétés CSS3. Une simple image te suffit alors que d’autres personnes cherchent à avoir un loader bien précis (taille, couleur, forme, etc)… Ce n’est pas « faire du CSS3 pour faire du CSS3 ».

  • LuciferX

    Merci bcp pour cette superbe liste, j’ai pu y dénicher de très bonnes ressources.

    De mon coté, je vous recommande http://css3.pascal-seven.de/ qui est générateur extrementent complet et agréble a utiliser, http://www.cssbuttongenerator.com/ pour des boutons en full css, ainsi qu’un générateur de colonnes en css3: http://debray.jerome.free.fr/index.php?outils/Generateur-de-multi-colonnes-en-css3

  • Une bonne alternative à Lorempixel (proposée par Fabinou) : http://placehold.it

  • Excellente liste, une vraie mine.
    Merci ;)

  • Inoune

    Merci pour ce billet! C’est vraiment très interressant!! ;)

  • gabriel Bellec

    vraiment merci pour toute les informations super :)

  • simpreal

    CSS sprite générateur:
    http://simpreal.org.ua/csssprites

  • hugomano
  • lkdjiin

    Merci pour cette liste, j’étais passé à coté de certains outils. Il y a aussi http://css3-drop-shadows.herokuapp.com/ L’interface est moche mais les ombres sont originales.

  • novamedia

    elle est tiptop cette liste

  • jahcool

    Un grand merci pour toutes ces sources !

  • Thanks for the excellent collection, You missed new tool http://www.easycss3.com