Générateurs CSS

La semaine dernière, nous avons examiné les outils d'audit CSS, et cette semaine, nous examinerons des générateurs utiles pour tout le CSS : des dégradés aux ombres portées et aux courbes de Bézier en passant par les triangles et les échelles de type. Juste quelques outils utiles pour votre ceinture à outils, à garder à portée de main.

Générateur d'ombres CSS

Vous recherchez un outil qui générera automatiquement du code CSS pour des ombres de boîtes en couches vraiment lisses ? Eh bien, vous allez adorer SmoothShadow. Inspiré d'un article écrit par Tobias Ahlin Bjerrome, cet outil astucieux a été créé pour aider quiconque à générer le code dont il a besoin sur place.

Une fois que vous l'aurez essayé, il sera difficile de ne pas l'utiliser. Le petit outil vous permet de concevoir visuellement une ombre de boîte lisse en couches, mais également de modifier l'alpha, le décalage et le flou avec des courbes d'atténuation individuelles. Et c'est encore mieux : le créateur de l'outil, Philipp Brumm, a également publié SmoothShadow en tant que plugin Figma, afin que vous puissiez optimiser votre flux de travail comme vous l'avez toujours voulu.

Générateur de rayon de bordure CSS

Lorsque nous pensons à border-radius , nous pensons généralement à quelques valeurs simples - peut-être 8px ou 11px, ou peut-être 16px. Cependant, border-radius peut être assez fantaisiste, et le générateur fancy-border-radius vous permet de les générer facilement. L'outil fournit une visualisation non seulement des formes rondes simples, mais également des formes organiques, en utilisant huit valeurs combinées. Essentiellement, ce que nous créons, ce sont des ellipses superposées qui créent la forme finale. L'outil est également disponible en tant qu'outil CLI, vous pouvez donc également l'exécuter localement.

Générateur de courbes cubiques-bézier

Parfois, une animation ne semble pas juste, n'est-ce pas ? Peut-être que la durée est désactivée ou que l'assouplissement est bizarre, et le comprendre peut prendre un certain temps. Avec le cubic-bezier de Léa Verou, vous pouvez prévisualiser et comparer des animations , les ralentir et même les ajuster visuellement. Et puis copiez-collez l'extrait CSS pour le brancher immédiatement à votre projet.

Et si vous avez besoin d'animations CSS @keyframe basiques ou complexes, Keyframes.app fournit un éditeur visuel de chronologie similaire à un logiciel de montage vidéo. Vous pouvez ajouter des étapes, modifier la taille et la position, appliquer des transformations et des changements de couleur et faire copier-coller également le CSS. Ah et sans oublier le panneau Animation dans Chrome et Firefox pour le débogage également.

Atténuation des dégradés

Avec les dégradés, nous nous appuyons souvent sur des dégradés linéaires, passant d'une couleur à une autre. Cependant, les dégradés linéaires ont des bords durs là où ils commencent ou se terminent. Il existe un moyen d'améliorer légèrement les dégradés, avec des fonctions d'accélération. Andreas Larsen a donc construit un petit éditeur, Easing Gradients Editor, qui nous permet de créer et de prévisualiser des dégradés d'accélération en CSS. L'outil est également disponible en tant que plugin Sketch et plugin PostCSS. Vous pouvez utiliser un sélecteur de couleurs, mais malheureusement, vous ne pouvez pas encore ajouter de valeur de couleur HEX réelle.

Palettes de couleurs de visualisation de données

Parfois, vous avez besoin d'un type de couleur très spécifique pour une tâche très spécifique. Par exemple, si vous travaillez sur un projet de visualisation de données, par exemple des graphiques circulaires, des graphiques à barres groupées, des cartes, vous avez probablement besoin d'une série de couleurs visuellement équidistantes . C'est alors que le sélecteur de couleurs de données LearnUI peut devenir très utile. Dans de tels cas, il est préférable d'utiliser une gamme de teintes, afin que les utilisateurs puissent identifier les différences plus rapidement. Il est en effet plus facile de distinguer le jaune de l'orange que le bleu du bleu-mais-15%-plus clair .

Avec l'outil, vous choisissez le nombre de couleurs dont vous avez besoin et si vous avez besoin d'une couleur d'arrière-plan claire ou foncée, et choisissez si vous voulez une palette par défaut, une palette de teinte unique ou une échelle de couleurs divergente. Une fois que vous l'avez, vous pouvez copier les valeurs hexadécimales et les exporter au format SVG pour les utiliser dans Sketch, Figma ou Adobe XD.

LearnUI fournit également un générateur de couleurs accessible et un générateur de dégradé assez sophistiqué, avec différents types de dégradé, interpolation, angle, assouplissement et la douceur que vous souhaitez que le dégradé soit.

Des nuances de couleur CSS aux triangles et aux fausses données

Imaginez que vous ayez juste besoin de trouver des styles de triangle CSS pour les éléments et les pseudo-éléments. Ou peut-être affiner un peu la palette de couleurs en explorant les teintes et les nuances d'une couleur donnée. Ou peut-être générer un dégradé CSS linéaire et radial pour une section de la page. Il n'est pas nécessaire de tout faire manuellement ou d'essayer de trouver ces extraits CSS partout sur le Web. Vous pouvez toujours les trouver sur Omatsuri.

Omatsuri signifie festival en japonais, et le site est un joli petit festival d'outils de navigateur open source pour un usage quotidien. Sur le site, vous trouverez un générateur de triangles, un générateur de nuances de couleurs, un générateur de dégradés, des séparateurs de pages, un compresseur SVG, un convertisseur SVG → JSX , un générateur de fausses données, des curseurs CSS et des codes d'événement de clavier. Conçu et construit par Vitaly Rtishchev et Vlad Shilov. Le code source du site est également disponible.

Superposition CSS avec générateur de contraste élevé

Si vous souhaitez que le texte se démarque mieux sur une image d'arrière-plan, il existe une petite astuce : vous pouvez utiliser une superposition de linear-gradient CSS avec une certaine opacité au-dessus de l'image pour améliorer le contraste des couleurs. Spotify, par exemple, utilise la technique.

Bien que tout cela ne nécessite qu'une seule ligne de code, il reste encore une question sans réponse : comment déterminer l'opacité à utiliser pour la superposition ? Le Optimal Overlay Finder vous aide à le découvrir. Vous téléchargez une image, entrez votre texte et choisissez vos couleurs de superposition et de texte, et l'outil vous montre un aperçu de ce à quoi ressemble la superposition lorsqu'elle est appliquée à votre image, ainsi que l'opacité optimale de la superposition. Un petit détail qui va un long chemin.

Générateur de palette de couleurs CSS

Il existe de nombreux outils fantastiques pour générer votre palette de couleurs, mais Coolors.co est un petit outil astucieux qui en fait juste assez pour générer des palettes et explorer différentes nuances d'une couleur. Vous pouvez créer une palette à partir de la photo ou d'un collage de photos, tester le daltonisme et régler rapidement la teinte, la saturation, la luminosité et la température. Évidemment, il propose également des palettes de couleurs tendance.

Vous pouvez également produire une palette de dégradés entre deux couleurs et créer et exporter votre propre dégradé en CSS. L'outil est disponible sous forme d'application iOS, de module complémentaire Adobe et d'extension Chrome.

Et si vous avez besoin de quelque chose de légèrement plus sophistiqué pour les dégradés dans votre boîte à outils, CSSGradient.io est un autre outil pour tous vos besoins en dégradés, qu'il s'agisse de dégradés linéaires ou radiaux, de nuances de couleurs ou d'arrière-plans dégradés.

De plus, Gradient Generator génère de 1 à 40 dégradés échelonnés à partir de deux couleurs de votre choix. Chaque dégradé est automatiquement présenté aux formats HEX, HSL et RVB. Il vous suffit de cliquer sur la valeur et elle sera immédiatement copiée dans votre presse-papiers.

Générateur de dégradés de couleurs CSS

La sélection manuelle des couleurs pour créer un dégradé de couleurs nécessite une expérience en conception et une bonne compréhension de l'harmonie des couleurs. Si vous avez besoin d'un dégradé pour un arrière-plan ou pour des éléments d'interface utilisateur mais que vous ne vous sentez pas assez confiant pour vous attaquer à la tâche vous-même (ou si vous êtes pressé), le générateur de dégradé de couleurs que les gens de My Brand New Logo ont créé a vous avez le dos.

Propulsé par des algorithmes de dégradé de couleurs, le générateur crée des dégradés bien équilibrés en fonction d'une couleur que vous sélectionnez. Il existe quatre styles de dégradés différents qui vont du subtil à l'effet nacré et au dégradé de couleurs intense et profond. Vous pouvez ajuster le dégradé avec des curseurs et, une fois que vous êtes satisfait du résultat, copier-coller le code CSS généré pour l'utiliser dans votre projet.

Générateur d'échelle de type CSS

Et si vous vouliez créer un système typographique fiable qui fonctionne aussi bien sur mobile que sur ordinateur ? Habituellement, vous vous basez sur des échelles typographiques établies, qui fournissent une hiérarchie typographique pour tout, des paragraphes aux légendes et en-têtes. Type-Scale de Jeremy Church est un petit outil fantastique qui vous aide à créer une échelle typographique et à l'exporter en CSS. Les petites échelles conviennent généralement bien aux vues mobiles, les échelles moyennes peuvent bien fonctionner pour la vue de bureau et les grandes échelles peuvent bien fonctionner pour les sites marketing.

L'outil fournit 8 échelles de caractères harmonieuses prédéfinies (mais vous pouvez également en définir une personnalisée), de la tierce majeure à la quinte parfaite et générer une séquence de tailles de police avec un taux d'incrémentation géométrique particulier. Vous pouvez ajuster les paramètres tels que line-height et l'épaisseur du corps, affiner le texte d'aperçu et obtenir le CSS généré - ou le modifier avec un spécimen de type sur CodePen. Alternativement, vous pouvez également consulter le bon vieux ModularScale.com de Tim Brown.

Un autre outil charmant est un calculateur d'échelle typographique de Jean-Lou Desire qui, contrairement aux outils de Tim et Jeremy, génère une échelle modulaire en utilisant trois propriétés de définition (le terme initial, le rapport d'incrémentation et le nombre de tailles dans l'échelle) similaires à la gamme musicale. Le résultat est un dimensionnement plus fluide pour les concepteurs, avec quelques options supplémentaires pour composer plus de valeurs, par exemple pour des notes d'accompagnement plus petites ou de grands blocs de citation.

Calculateur de hauteur de ligne

Si vous construisez une échelle de texte basée sur une grille de base, vous devez répondre à une question délicate : quelle est la bonne hauteur de ligne pour chaque taille de texte sur votre échelle ? Le calculateur Good Line-Height de Fran Perez fait le calcul pour vous.

Pour calculer les résultats, il vous suffit d'entrer trois paramètres : la taille de la police, le multiplicateur et la hauteur des lignes de la grille. La taille de la police est la clé pour garantir que votre texte repose bien sur la grille de base, quelle que soit la taille du texte, le multiplicateur vous permet de contrôler la distance entre les lignes et la hauteur des lignes de la grille définit la hauteur de chaque ligne dans votre grille de base.

Générateur de cap fluide

Grâce à clamp() , vous pouvez définir une taille de police qui grandit avec la fenêtre mais qui ne descend pas en dessous ou au-dessus de la taille de police minimale et maximale que vous définissez. Pour vous aider à trouver les valeurs CSS parfaites pour votre en-tête fluide et à contrôler sa mise à l'échelle dans différentes fenêtres, Erik Andre Jakobsen a créé l'outil Typographie fluide.

Vous entrez la taille de police minimale et maximale ainsi que la largeur minimale et maximale de la fenêtre d'affichage, et l'outil calcule non seulement la règle clamp() pour vous, mais vous montre également une démonstration de ce à quoi ressemblent les spécifications lorsqu'elles sont appliquées à un en-tête réel.

Un autre générateur utile pour vous aider à comprendre la règle clamp() pour votre projet vient de Maxime Roudier. Il fonctionne de manière similaire à l'outil d'Erik, mais vous permet également de sélectionner une famille de polices et une plage que vous ajustez avec un curseur au lieu d'entrer des valeurs minimales et maximales concrètes.

Générateur de chavirage CSS

Pour minimiser les changements de mise en page désorientants et coûteux lors du chargement, nous devons faire correspondre la police de secours à la police Web. Le matcher de style de police de Monica Dinculescu nous permet de minimiser le décalage discordant en faisant correspondre la police de secours et les hauteurs et largeurs x de la police Web prévue et nous pourrions utiliser f-mods pour faire la même chose avec de nouvelles propriétés CSS.

Par défaut, de nombreuses polices sont livrées avec des marges et des interlignes prédéfinis, donc si une police de secours et une police Web sont différentes, la mise en page entière changera de manière significative. Capsize ajuste la taille de la police, de sorte que la hauteur des lettres majuscules soit un multiple de votre grille. Il le fait en coupant l'espace au-dessus des lettres majuscules et en dessous de la ligne de base. Ainsi, en conservant la même hauteur de ligne dans une police de secours et une police Web, l'outil génère des "nombres magiques" pour s'assurer que le changement est transparent.

Générateur de sélecteurs complexes CSS

Imaginez que vous deviez créer une table d'éléments. Vous voudrez peut-être les garder sur la même ligne s'il y a 3 éléments ou moins, mais s'étendre ensuite sur deux lignes complètes pour 6 et 8 éléments, tout en n'étant qu'une liste de cartes avec 10 éléments et plus. Comment le construiriez-vous ? Bien que bon nombre de ces situations puissent être résolues avec CSS Grid et Flexbox, vous pourriez parfois vous retrouver avec une situation assez complexe qui nécessiterait un sélecteur CSS assez complexe.

À cette fin, Drew Minns a construit un générateur de sélecteurs de quantité - des sélecteurs CSS complexes qui permettent d'appliquer des styles aux éléments en fonction du nombre de frères et sœurs. Par exemple, lorsque vous souhaitez appliquer des styles à tous les éléments lorsqu'il y a au moins 5 éléments et frères, ou au plus 10, ou peut-être entre 3 et 5 éléments.

Le sélecteur final n'est peut-être pas facile à comprendre, il vaut donc la peine de s'assurer que vous fournissez une explication appropriée dans le code de ce qu'il est censé cibler.

Générateur clip-path CSS

Grâce à la propriété clip-path , nous pouvons créer des formes complexes en CSS en coupant un élément à une forme de base, qu'il s'agisse d'un simple cercle, d'un polygone fantaisie ou même d'une source SVG. Le créateur clip-path CSS Clippy est un outil visuel qui vous aide à créer et à personnaliser des chemins de clips directement dans votre navigateur.

Pour commencer, vous sélectionnez une forme et un arrière-plan de démonstration dans le menu de Clippy. Vous pouvez ensuite faire glisser les points de la forme pour créer la forme de votre choix. Le code CSS à code couleur reflétera non seulement vos modifications instantanément, mais les mettra également en évidence pour vous aider à comprendre comment vos choix influencent le code.

Si tout le clip-path vous semble encore un peu abstrait ou si vous cherchez un exemple sympa de la façon de l'utiliser dans un projet réel, assurez-vous de vérifier l'effet pop-out que Mikael Ainalem a créé avec clip-path .

Générateur de disposition de grille CSS

La mise en page de la grille CSS peut être assez simple, mais parfois vous voudrez peut-être jouer avec les propriétés de la grille pour déterminer quel serait le bon comportement pour votre mise en page. Pour commencer, nous pouvons utiliser CSS Grid Generator de Sarah Drasner, Griddy de Drew Minns, CSS Grid Cheat Sheet Generator d'Ali Alaa et LayoutIt de LenioLabs - ils vous permettent tous de définir la grille et les conteneurs sur la grille, ainsi que les lacunes, et il génère le CSS tout de suite. Si vous avez besoin de plus de conseils sur Flexbox, Flexbox Patterns contient de nombreux exemples avec lesquels jouer.

Ou vous pouvez utiliser une seule ligne de solutions CSS. Una Kravets a construit 1-Line Layouts, une collection de dix techniques modernes de mise en page et de dimensionnement CSS. En commençant par le plus grand mystère de tous (le centrage) et en couvrant tout, de la mise en page classique du Saint Graal et de la "crêpe déconstruite" à l'application de clamp() et en respectant le rapport d'aspect, la collection d'Una est pleine de petites friandises qui ne manqueront pas de vous rendre la vie en tant que développeur plus facile.

Chaque technique est accompagnée d'une démo, d'un CodePen à bricoler et d'informations sur la prise en charge du navigateur. Una a également enregistré une vidéo dans laquelle elle explique plus en détail chaque merveille d'une ligne. Que vous soyez débutant ou professionnel, cette ressource vous sera certainement utile.

Générateur de grilles composées CSS

Les grilles composées offrent une énorme flexibilité et beaucoup de place pour la créativité. Composées de deux ou plusieurs grilles de tout type (colonne, modulaire, symétrique et asymétrique) sur une même page, elles peuvent occuper des zones distinctes ou se chevaucher.

Un petit outil pour vous aider à générer des grilles composées et gagner du temps en dessinant des variations sans fin vient maintenant de Michelle Barker : le générateur de grilles composées. Tout ce que vous avez à faire est d'entrer le nombre de colonnes pour chacune de vos grilles, et elles seront fusionnées dans une grille composée. Un excellent ajout à votre boîte à outils numérique. Et si vous avez besoin de créer une grille modulaire, une grille multicolonne ou une grille manuscrite pour votre projet d'impression, la calculatrice de grille modulaire fournit une explication détaillée pour y parvenir dans InDesign.

Filtres CSS et générateur de modes de fusion

Le filtre CSS drop-shadow a un excellent support mais est plutôt sous-estimé - une vraie honte étant donné qu'il pourrait vous faire gagner beaucoup de temps avec box-shadow .

Comme l'explique Michelle Barker dans un article de blog, drop-shadow vous permet d'utiliser des valeurs pour le décalage x, le décalage y, le rayon de flou et la couleur, tout comme son frère plus important box-shadow . Cependant, il y a un gros avantage : l'ombre ne correspond pas à la boîte englobante d'un élément (qui est souvent là où le piratage commence lors de l'utilisation box-shadow ) mais aux parties non transparentes d'une image. Parfait si vous souhaitez appliquer une ombre portée à un logo PNG ou SVG transparent, par exemple, ou même à une forme détourée.

Il existe de nombreux filtres CSS, donc si vous avez besoin de trouver le bon ensemble de filtres pour votre projet, l'éditeur de filtres CSS de Mads Stoumann pour tester tous les filtres pris en charge, ainsi que quelques cadeaux que Mads a également fournis. Évidemment, le CSS est également généré à la volée.

Au-delà des filtres, il existe également de nombreuses options pour les modes de fusion CSS. Si vous souhaitez avoir un aperçu de la façon dont certains effets visuels pourraient fonctionner ensemble, vous pouvez utiliser CSS Duotone Generator de Rick Metzger. L'outil comprend des options de zoom, d'espacement, de flou et d'opacité de l'image, mais également tous les modes de fusion pour les images de premier plan et d'arrière-plan. Bien sûr, l'outil génère également du HTML et du CSS.

Générateur d'espaces réservés pour images floues

Un espace réservé d'image est un moyen efficace d'améliorer les performances perçues d'un site lors du chargement d'une image. Dans sa quête pour trouver les espaces réservés aux images les plus rapides et les plus beaux pour le Web, Joe Bell a décidé de trouver lui-même une solution. Le résultat : Placeholder.

Propulsé par une collection d'assistants Node.js, Plaiceholder transforme vos images en images d'espace réservé légères et floues. Vous avez le choix entre plusieurs approches : CSS (qui est recommandé), SVG, Base 64, Blurhash et le Blurhash expérimental vers CSS.

Générateur de héros

Êtes-vous fatigué de mettre en œuvre le même héros encore et encore? Le générateur de héros de Sarah Drasner est là pour vous aider. Il vous permet de générer des héros réactifs en quelques clics, en fonction de vos préférences.

Vous décidez du type de dégradé que vous souhaitez appliquer à votre image de héros, de la réduction du dégradé et de l'espacement des titres. Et si vous souhaitez inclure un bouton, le générateur vous offre également des options pour personnaliser les couleurs du bouton (y compris la couleur de survol et de dégradé) et le rayon du bouton. Une fois que vous êtes satisfait du résultat, vous pouvez copier et coller le code et l'utiliser immédiatement dans votre projet. Un vrai gain de temps !

Générateur de cartes-images

Les images cliquables vous permettent de créer des zones cliquables sur une image. Si vous souhaitez créer une image cliquable mais que vous ne voulez pas jouer avec les coordonnées pour définir les régions cliquables, imagemaps.net est là pour vous aider.

Le site dispose d'une interface utilisateur graphique pour rendre le processus plus simple. Une fois que vous avez téléchargé votre image, vous pouvez utiliser les outils Plume, Rectangle et Polygone pour dessiner vos régions cliquables. Pour les personnaliser et, surtout, leur donner leur fonctionnalité, vous pouvez ensuite nommer chaque région, lui attribuer un lien et ajuster sa couleur, sa hauteur et sa largeur. Un clic sur le bouton "Exporter" vous fournit la carte HTML et le code React que vous pouvez copier et coller dans votre projet.

Générateur d'animations CSS

Il est assez facile de faire la différence entre une animation qui semble un peu décalée et une animation qui est juste bien faite. Mais ajuster manuellement les animations ou les transitions des images clés peut prendre beaucoup de temps. Animista fournit une bibliothèque d'animations et de transitions que vous pouvez utiliser immédiatement. Il existe de nombreux préréglages pour les entrées et les sorties, les surlignages de texte, les actions des boutons et les effets d'arrière-plan. Une fois que vous avez défini une animation, vous pouvez copier-coller l'extrait CSS de l'animation, ainsi que le code généré par Autoprefixer.

CSS Wand fournit des animations de survol et de chargement , mais vous pouvez également utiliser les animations Ladda (boutons avec indicateurs de chargement intégrés) et Eric Spinners (avec intégration Vue.js). Et peut-être aimeriez-vous ajouter une touche fantaisiste aux transitions de survol avec Boop ! – gardez simplement à l'esprit de mettre à l'échelle avec des pseudo-éléments et de respecter les préférences de mouvement pour les utilisateurs qui optent pour un mouvement réduit.

Générateur de cuboïde CSS 3D

Jhey Tompkins est connu pour ses créations CSS 3D amusantes. Peut-être avez-vous déjà vu son hélicoptère qui se déplace comme par magie lorsque vous déplacez la souris ? La base de l'hélicoptère et d'autres expériences comme celles-ci sont des cuboïdes CSS réactifs qui peuvent être contrôlés avec des propriétés personnalisées CSS étendues.

Désormais, si vous souhaitez également donner vie à vos idées 3D, le générateur CSS Cuboid 3D de Jhey est là pour vous aider. Ajustez simplement les curseurs pour déterminer la hauteur, la largeur, la profondeur et la teinte de votre cuboïde, et vous avez déjà le code dont vous avez besoin pour faire rouler, tordre, glisser ou tout ce que vous prévoyez d'autre. S'amuser!

Générateur de doodles CSS

Nous pouvons donner vie aux mises en page les plus sophistiquées avec CSS, mais nous pouvons également générer des illustrations et des griffonnages ludiques. Yuan Chuan a construit , un composant Web pour dessiner des motifs avec CSS . Le composant comprend de nombreuses fonctions utilitaires et propriétés abrégées avec lesquelles jouer. En conséquence, le composant génère une grille de div s avec le CSS simple. Le code source est également disponible sur GitHub.

Petits assistants de développement Web utiles

Si vous avez besoin de quelques outils supplémentaires dans votre vie, heureusement, il y a beaucoup de bons développeurs Web qui rassemblent leurs outils utiles préférés en un seul endroit nommé Tiny Helpers. Maintenu par Stefan Judis, vous êtes sûr de trouver toutes sortes d'outils : des API, de l'accessibilité et de la couleur, aux polices, aux performances, aux expressions régulières, au SVG et à l'Unicode.

Bien sûr, il y en a beaucoup d'autres partagés sur d'autres plateformes, comme le très utile fil Twitter de Josh W. Comeau mais aussi de Stefan Judis lui-même. Peu importe ce que vous avez hâte de trouver et qui vous aidera à travailler mieux et plus rapidement, vous le trouverez forcément là-bas !

Emballer

Il existe littéralement des centaines de ressources, et nous espérons que certaines de celles répertoriées ici s'avéreront utiles dans votre travail quotidien et, surtout, vous aideront à éviter certaines tâches routinières et chronophages. Bonne génération !