La semaine dernière, nous avons examiné les outils d'audit CSS et cette semaine, nous allons examiner générateurs utiles pour tout CSS: des dégradés aux ombres portées et des courbes de Bézier aux triangles et échelles de caractères. Juste quelques outils utiles pour votre ceinture à outils, à garder près.
CSS Shadows Generator
Vous recherchez un outil qui générera automatiquement du code CSS pour des box-shadows vraiment lisses et superposés ? Eh bien, vous allez adorer SmoothShadow . Inspiré d'un article écrit par Tobias Ahlin Bjerrome cet outil astucieux a été créé pour aider n'importe qui à 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 d'ajuster l'alpha, le décalage et le flou avec des courbes d'accélération individuelles. Et c'est encore mieux: le créateur de l'outil, Philipp Brumm a également publié SmoothShadow en tant que plug-in Figma afin que vous puissiez optimiser votre flux de travail comme vous l'avez toujours voulu
CSS Border-Radius Generator
Quand 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 sont des ellipses qui se chevauchent qui construisent la forme finale. L'outil est également disponible en tant qu'outil CLI vous pouvez donc l'exécuter localement également.
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 Lea Verou, vous pouvez prévisualiser et comparer des animations les ralentir et même les ajuster visuellement. Et puis copiez-collez l'extrait de code CSS pour vous connecter immédiatement à votre projet.
Et si vous avez besoin de base ou des animations CSS @keyframe complexes, Keyframes.app fournit un éditeur de chronologie visuelle 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 le CSS. Ah et ne pas oublier le panneau d'animation dans Chrome et Firefox pour le débogage également.
Faciliter les dégradés
Avec les dégradés, nous nous appuyons souvent sur des dégradés linéaires, passant d'un dégradé à un autre. 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 sous forme de plug-in Sketch et de plug-in PostCSS . Vous pouvez utiliser un sélecteur de couleurs, mais vous ne pouvez malheureusement pas encore ajouter une valeur de couleur HEX réelle.
Palettes de couleurs de visualisation des 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 ex. Camemberts, histogrammes groupés, cartes – vous avez probablement besoin d'une série de couleurs visuellement équidistantes . C’est alors que LearnUI Data Color Picker 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 jaune de l'orange que bleu du bleu-mais-15% -lighter .
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 teintes 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és, interpolation, angle, accélération et la fluidité souhaitée
Des nuances de couleurs CSS aux triangles et aux fausses données
Imaginez que vous ayez juste besoin de trouver des styles de triangles 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 navigation 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 diviseurs de page, un compresseur SVG, SVG → convertisseur JSX un faux générateur de données, CSS curseurs et codes d'événements du 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 voulez mieux faire ressortir le texte sur une image d'arrière-plan, il y a une petite astuce: vous pouvez utilisez une superposition CSS gradient linéaire 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 à répondre: 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 très loin.
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 ajuster rapidement la teinte, la saturation, la luminosité et la température. De toute évidence, il dispose également de 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é au format CSS. L'outil est disponible en tant qu'application iOS, module complémentaire Adobe et extension Chrome.
Et si vous avez besoin de quelque chose d'un peu plus sophistiqué pour les dégradés de votre boîte à outils, CSSGradient.io est un autre outil pour tous vos besoins en dégradé – qu'il soit linéaire ou radial dégradés, nuances de couleurs ou 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.
CSS Color Gradients Generator
Hand-picking les couleurs pour créer un dégradé de couleurs nécessitent une expérience de 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 suffisamment en confiance pour vous attaquer à la tâche vous-même (ou si vous êtes pressé), le générateur de dégradés de couleurs que les gens de My Le tout nouveau logo créé vous soutient.
Alimenté par des algorithmes de dégradés de couleurs, le générateur crée des dégradés bien équilibrés basés sur une couleur que vous sélectionnez. Il existe quatre styles de dégradés différents allant d'un effet subtil à un effet nacré et à un dégradé de couleur intense et profond. Vous pouvez ajuster le dégradé avec des curseurs et, une fois que vous êtes satisfait du résultat, copiez-collez le code CSS généré pour l'utiliser dans votre projet.
Générateur d'échelle de type CSS
Et si vous voulez créer un système typographique fiable qui fonctionne bien à la fois sur mobile et sur ordinateur de bureau? Habituellement, vous vous fiez à des échelles typographiques établies, qui fournissent une hiérarchie typographique pour tout, des paragraphes aux légendes et aux 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 aux vues mobiles, les échelles moyennes pourraient bien fonctionner pour la vue du bureau et les grandes échelles pourraient 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 troisième majeure à la cinquième parfaite et générer une séquence de tailles de police avec un rapport d'incrémentation géométrique particulier. Vous pouvez ajuster les paramètres tels que line-height et le poids corporel, affiner le texte d'aperçu et obtenir le CSS généré – ou le modifier avec un spécimen de type sur CodePen. Vous pouvez également consulter le bon vieux Tim Brown » ModularScale.com .
Un autre bel outil est un Calculateur d'échelle typographique de Jean-Lou Desire qui, contrairement aux outils de Tim et Jeremy, génère un ] échelle modulaire 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 à l'échelle musicale. Le résultat est un dimensionnement plus fluide pour les concepteurs, avec quelques options supplémentaires pour composer plus de valeurs, par exemple.
CSS Capsize Generator
Pour minimiser les décalages de mise en page désorientants et coûteux pendant le chargement, nous devons faire correspondre la police de remplacement à la police Web. Le font-style-matcher de Monica Dinculescu nous permet de minimiser le décalage discordant en faisant correspondre la police de secours et les hauteurs et largeurs x-hauteurs et largeurs de la police Web prévue et nous pourrions utiliser f-mods pour faites la même chose avec les nouvelles propriétés CSS.
Par défaut, de nombreuses polices sont livrées avec des marges et des lignes prédéfinies, donc si une police de remplacement et une police Web sont différentes, la mise en page entière changera considérablement. Capsize ajuste la taille de la police, de sorte que la hauteur des majuscules soit un multiple de votre grille. Pour ce faire, il réduit l'espace au-dessus des 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 commutateur est transparent.
CSS Complex Selectors Generator
Imaginez que vous deviez créer un tableau des articles. Vous voudrez peut-être les garder sur la même ligne s'il y a 3 éléments ou moins, mais s'étendant ensuite sur deux lignes complètes pour 6 et 8 éléments, tout en étant juste une liste de cartes avec 10 éléments et plus. Comment le construiriez-vous? Bien que beaucoup de ces situations puissent être corrigées avec CSS Grid et Flexbox, vous pourriez parfois vous retrouver avec une situation assez complexe qui nécessiterait un sélecteur CSS assez complexe.
Dans ce but, Drew Minns a construit un générateur pour Quantity Selectors – 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 alors qu'il y a au moins 5 éléments et frères, ou au plus 10, ou peut-être entre 3 à 5 éléments.
Le sélecteur final peut ne pas être facile à comprendre, il vaut donc la peine de s'assurer que vous fournissez une explication correcte dans le code de ce qu'il est censé cibler.
CSS clip-path Generator
Grâce au clip -path nous pouvons créer des formes complexes en CSS en découpant un élément en une forme de base, que ce soit un simple cercle, un polygone fantaisie ou même une source SVG. Le CSS clip-path maker Clippy est un outil visuel qui vous aide à créer et personnaliser les chemins de clip directement dans votre navigateur.
Pour commencer, 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 instantanément vos modifications, mais les mettra également en évidence pour vous aider à comprendre comment vos choix influencent le code.
If the whole clip-path vous semble encore un peu abstrait ou si vous cherchez un exemple sympa de comment l'utiliser dans un projet réel, assurez-vous de vérifier l'effet pop-out que Mikael Ainalem a créé avec clip-path .
CSS Grid Layout Generator
CSS Grid Layout peut être assez simple mais parfois vous voudrez peut-être jouer avec les propriétés Grid pour déterminer quel serait le bon comportement pour votre mise en page. Pour commencer, nous pouvons utiliser le CSS Grid Generator de Sarah Drasner Drew Minns Griddy Ali Alaa CSS Grid Cheat Sheet Generator et LenioLabs LayoutIt – ils vous permettent tous de définir la grille et les conteneurs sur la grille, ainsi que les espaces, et il génère immédiatement le CSS. 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. Partant du plus grand mystère de tous (centrage) et couvrant tout, depuis le classique Holy Grail Layout et le «Deconstructed Pancake» jusqu'à l'application de la pince () et le respect des proportions, la collection Una est plein de petits détails qui ne manqueront pas de vous faciliter la vie en tant que développeur.
Chaque technique est accompagnée d'une démo, d'un CodePen à bricoler et d'informations sur la prise en charge des navigateurs. Una a également enregistré une vidéo dans laquelle elle explique chaque merveille d'une ligne plus en détail. Que vous soyez un débutant ou un pro, cette ressource vous sera certainement utile.
CSS Compound Grids Generator
Compound grids offrent une flexibilité énorme et beaucoup de place pour la créativité. Composés de deux ou plusieurs grilles de n'importe quel type (colonne, modulaire, symétrique et asymétrique) sur une page, ils peuvent occuper des zones séparées ou se chevaucher.
Un petit outil pour vous aider à générer des grilles composées et gagner du temps en dessinant des variations infinies vient maintenant de Michelle Barker: le générateur de grilles composées . Tout ce que vous avez à faire est de saisir le nombre de colonnes pour chacune de vos grilles, et elles seront fusionnées en 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, Modular Grid Calculator fournit une explication approfondie pour y parvenir dans InDesign.
Générateur de filtres CSS et de modes de fusion [19659003] 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 en piratant avec box-shadow . [19659094] Boîte-ombre contre ombre portée « /> Boîte-ombre contre ombre portée ( Grand aperçu )
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 le plus proéminent box-shadow . Cependant, il y a un gros avantage: l’ombre ne correspond pas à la boîte englobante d’un élément (ce qui est souvent le point de départ du piratage lors de l’utilisation de 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écoupée.
Il existe de nombreux filtres CSS donc si vous avez besoin de trouver juste le bon ensemble de filtres pour votre projet, l'éditeur de filtres CSS de Mads Stoumann pour tester tous les filtres supportés ainsi que quelques cadeaux que Mads a également fournis. De toute évidence, 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 voir comment certains effets visuels pourraient fonctionner ensemble, vous pouvez utiliser le CSS Duotone Generator de Rick Metzger. L'outil comprend des options pour le zoom, l'espacement, le flou et l'opacité de l'image, mais également tous les modes de fusion pour les images de premier plan et d'arrière-plan. Bien entendu, 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é pour les images 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 supports d'images les plus rapides et les plus esthétiques pour le Web, Joe Bell a décidé de trouver une solution lui-même. Le résultat: Support de plie .
Propulsé par une collection d'aides 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 (ce qui est recommandé), SVG, Base 64, Blurhash et l'expérimental Blurhash to CSS .
CSS Animations Generator
Il est assez facile de faire la différence entre une animation qui semble un peu décalée et une animation qui est très 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 animations Ladda (boutons avec -dans les indicateurs de chargement) 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 la mise à l’échelle avec des pseudo-éléments et respectez les préférences de mouvement des utilisateurs qui opt-in pour un mouvement réduit.
CSS Doodles Generator
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 motifs de dessin avec CSS . Le composant comprend de nombreuses fonctions utilitaires et des 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 favoris des outils utiles en un seul endroit nommé Tiny Helpers . Géré par Stefan Judis, vous êtes sûr de trouver toutes sortes d'outils: des API, l'accessibilité et la couleur, aux polices, performances, expressions régulières, SVG et Unicode.
Bien sûr, il y en a beaucoup plus partagés sur d'autres plateformes, comme le fil Twitter très utile de Josh W. Comeau mais aussi de Stefan Judis lui-même. Quoi que vous vouliez trouver et qui vous aidera à faire mieux et plus rapidement votre travail, vous le trouverez forcément là-bas!
Conclusion
Il y a littéralement des centaines de ressources disponibles, et nous espérons que certaines de celles énumérées ici se révéleront utiles dans votre travail quotidien – et surtout vous aideront à éviter certaines tâches routinières chronophages. Bonne génération!
Source link