Quelques liens sur les dégradés CSS

De temps en temps, l'air du temps du blogging semble se rassembler autour d'un certain sujet et c'est comme si les articles enregistrés dans mon dossier de favoris avaient une conversation. La conversation qui s'y déroule actuellement porte uniquement sur les dégradés CSS et j'ai pensé lier certaines des pièces les plus intéressantes.

• Jour 22 : dégradés coniques — Manuel Matuzovic a examiné les dégradés coniques au jour 21 de sa série de 100 jours sur le CSS moderne, offrant un aperçu de haut niveau des couleurs, des angles, du placement et des arrêts de couleur. Puis, sur Jour 22, il l'utilise sur le ::backdrop pseudo-élément. (Au fait, Twitter de façon inattendue suspendu son compte — aidons à redresser ce vaisseau si nous le pouvons.)
• Comprenez-vous vraiment les dégradés radiaux CSS ? - Patrick Brossette a fait un travail digne d'un guide ici et, honnêtement, je suis toujours en train de le parcourir. Mais j'apprécie déjà ses explications claires et ses démonstrations de choses que je bouffe encore, comme les mots-clés pour la taille et la forme d'un dégradé radial. Je fais déjà le lien dans le nôtre Guide des dégradés CSS!
• Dégradés d'arrière-plan hautement personnalisables — Hé, en parlant de gradient radial, Scott VandeheyLa recette d'un avec plusieurs arrêts de couleurs a fait le tour de la semaine dernière. Son défi était de créer un motif de dégradé capable de prendre en charge différentes variations de couleurs, ce qui serait normalement un fouillis de classes CSS et de valeurs de couleur pour chaque variation s'il n'était pas utilisé. propriétés personnalisées. De cette façon, il peut attribuer une propriété personnalisée pour les différentes couleurs et valeurs de placement pour chaque arrêt de couleur, puis simplement mettre à jour les valeurs en fonction du contexte. De plus, la façon dont les propriétés personnalisées peuvent être mises à jour avec JavaScript a permis à Scott de construire un outil pour personnaliser son motif de dégradé, qui est généreusement partagé à la fin du post.
• Modèles de demi-teintes CSS - michelle barker avec une ventilation détaillée des modèles « demi-teintes » d'Ana Tudor. L’effet ressemble un peu à l’impression à l’encre en pointillés des journaux de la vieille école. Pendant qu'Ana utilise Houdini sous le capot pour les effets d'animation et de survol, Michelle s'intéresse spécifiquement à l'effet de demi-teinte lui-même et à la façon dont il est construit avec un dégradé radial. J'aime particulièrement la façon dont Michelle montre comment passer d'une simple grille de points à une grille dont le motif est un peu décalé. Et restez jusqu'à la fin pour voir comment elle ponctue l'effet avec un mask-image qui utilise un dégradé linéaire pour créer un effet de fondu. J'ai un peu riffé ce modèle, aussi, et j'ai fini avec quelque chose d'intéressant qui ressemble à un filtre anti-taches d'encre qui coule.
• Une solution de barre de navigation fringante — Eric Meyer s'est vu confier un défi de conception intéressant pour un menu dans lequel une ligne pointillée sort du lien « page actuelle » et fait partie d'une bordure pointillée plus grande le long du bord gauche du conteneur de contenu. Eric est toujours un excellent exemple de comment penser comme un développeur front-end, et il le fait ici en décrivant l'itinéraire alternatif qu'il a emprunté en utilisant une pente linéaire lorsqu'il a rencontré un obstacle avec l'approche standard de réglage border-style: dotted sur l'élément.
• Lignes pointillées dégradées masquées — Eric avec un suivi de ce dernier lien montrant non seulement comment il a connecté les tirets d'une bordure gauche aux tirets d'une image raster, mais aussi comment son œil perspicace en matière de conception l'a convaincu de changer sa solution pour imiter la résolution inférieure du tirets de l'image en utilisant deux dégradés d'arrière-plan linéaires répétitifs comme mask-image sur le dégradé de fond. Tellement ringard et génial !