Générateurs de CSS

Outils permettant de créer à la volée des codes CSS

Bien pratique... les générateurs de CSS permettent principalement de gagner du temps et de palier à l’oubli et/ou à la complexité de certains codes.
Je vous présente ici une sélection de quelques générateurs choisis.

Vous trouverez sur le Web un grand nombre d’outils vous permettant de générer du code CSS à utiliser dans vos feuilles de styles.

Générateurs de border-radius

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator : cet outil très complet vous permet de générer des contours dont chaque "coin" possède deux données, ce qui permet d’avoir des formes plus avancées qu’un simple arrondi. Par contre il ne donne pas les variation pour navigateur -moz-border-radius et -webkit-border-radius qu’il vous faut ajouter à la main.
https://cssgenerator.org/border-radius-css-generator.html : contrairement au générateur de la fondation Mozilla, celui-ci vous propose une interface en curseur ainsi que le code pour le border lui-même
https://border-radius.com/ : cet outil très simple vous permet de générer le code pour des arrondis réguliers.
http://www.outils-web.com/page-generateur-CSS-arrondi.asp : un petit dernier qui propose les arrondis simple et le choix du type de bordures ainsi que son épaisseur (mais pas sa couleur).

Générateurs de dégradés

http://www.css3factory.com/linear-gradients/ : très bon générateur donnant un code complet y compris sur les orientations du dégradé. Son seul défaut est de ne pas prendre la transparence des couleurs.
https://bfotool.com/fr/css-gradient : très précis sur le choix des couleur, cet outil vous propose aussi les code en -moz-linear-gradient, -webkit-gradient, -webkit-linear-gradient, -o-linear-gradient... pour une parfaite compatibilité avec les différents navigateurs
https://cssgradient.io/ : un générateur très complet de dégradé pour vos background. Il permet d’introduire autant de couleur que vous voulez dans vos dégradés ainsi que leur niveau de couche alpha
https://gradients.app/fr/new : celui-ci ne permet le choix de couleur que dans une palette, mais permet le téléchargement d’un fichier PNG en plus du code CSS

Générateurs d’ombre

https://alvarotrigo.com/shadow-gradients/ : ce générateur permet de créer des ombre en gradient. Ce ne sont pas des box-shadows, mais l’utilisation de pseudo-classes before et after qui permettent cela.
https://fr.makingcss.com/box-shadow : générateur de box-shadows.
https://shadows.brumm.af/ : celui-ci présente une interface en courbes et curseurs.

Générateurs de formes

https://www.cssportal.com/css3-shapes/ ; ce n’est pas vraiment un générateur, mais cette page vous donne les codes CSS pour les principales figures géométriques.
https://bennettfeely.com/clippy/ : plus avancé que le précédent, cette interface vous permet de mettre en place les codes pour vos clip-path (équivalent à l’écrétage en CSS) vous permettant de mettre vos images dans des formes géométriques. À partir de formes prédéfinies, vous pouvez bouger les coins pour obtenir de nouvelle formes.

Générateurs de boutons

https://www.bestcssbuttongenerator.com/ : transformer vos lien (balise a) en bouton. À partir d’une série de modèle, vous pouvez changer différents paramètres dont les couleurs de fond et de bordure. L’interface propose aussi les codes pour les état hover et active.
https://neumorphism.io/#e0e0e0 : interface permettant de générer des codes CSS façon neumorphisme. De nombreux paramètres dont les ombres internes, lueurs et ombres externes... Ces codes sont applicable à n’importe quel élément HTML et peuvent donc aussi être appliqué à des div.
https://www.htmlcssbuttongenerator.com/btnGenerator.html. Plutôt utilisé pour des balises button, les codes générés peuvent êrte appliqués à d’autres éléments comme les liens. À noter qu’en cas de choix d’une police, l’interface vous propose aussi le code pour charger la police depuis GoogleFont.

Générateur pour élément de formulaire

https://doodlenerd.com/html-control/css-textbox-generator : habillage pour champ input.
[http://danielstern.ca/range.css/#/>http://danielstern.ca/range.css/#/] : habillage pour élément range.

Générateur de "layout"

Générateur pour la valeur CSS clamp : https://min-max-calculator.9elements.com (permet de définir des valeurs Max et Min et une valeur intermédiaire préférée.
Générateur de grid : https://grid.layoutit.com/
Générateur de flexbox : https://the-echoplex.net/flexyboxes/
Générateur de page Bootstrap : https://www.layoutit.com/ qui permet de créer des pages sous bootstrap avec cliqué-glissé d’élément du framework

Générateurs polyvalents

http://css3generator.com/ : vous choisissez le type d’élément dont vous voulez générer le code CSS
https://fr.makingcss.com/gradient : outre les dégradés, ce générateur permet aussi de générer le code pour des ombre (texte et boite), les border-radius, mais aussi les transitions et les transformations
https://fr.w3docs.com/css3-maker/border-radius : ce générateur vous propose dans la même interface les code pour les border-radius, les codes RGBA, les box et text shadows, les transformations... mais pas les dégradés
https://html-css-js.com/css/generator/ : outre les dégradés, les transformation et les border-radius, cette interface vous propose aussi de générer des styles pour vos tableaux, des habillages de polices et des bordures et outline de styles avancés.

Générateur de formulaire

http://haoxi.free.fr/generateur-form/ : cette interface vous permet de générer le formulaire HTML et le fichier PHP d’ajout des données dans une BDD (il faudra mettre les codes de connexion quand même !-)

Générateur de scroll

https://scrollbar.app/ : cette interface vous permet de générer le code CSS pour changer le paramétrage de la scrollbar !