Quelques liens sur les gradients CSS

Récemment, la blogosphère semble accorder une attention particulière au sujet du gradient CSS, et les articles pertinents de mes signets sont devenus animés. Il m'est arrivé de saisir cette occasion pour organiser et partager des liens intéressants avec des articles.

• gradients coniques - Manuel Matuzovic a introduit les gradients coniques le jour 21 dans sa série CSS moderne de 100 jours, expliquant de manière facile à comprendre comme la couleur, l'angle, la position et les points d'arrêt de couleur. Le 22e jour, il l'a appliqué à nouveau au ::backdrop pseudo-élément. (Soit dit en passant, Twitter a accidentellement interdit son compte - si possible, aidons-le à le restaurer ensemble.)
• comprenez-vous vraiment le gradient radial CSS? - Cet article de Patrick Brosset est un travail au niveau du guide, et je l'étudie toujours attentivement. Mais j'ai apprécié ses explications et manifestations claires qui ont répondu à ma confusion de longue date sur la taille du gradient radial et la forme des mots clés. J'ai lié ce post à notre propre guide de gradient CSS!
• Gradient de fond hautement personnalisable - En parlant de gradients radiaux, le schéma de gradient radial des arrêts multicolores partagés par Scott Vandehey la semaine dernière a été largement diffusé. Son défi est de créer un motif dégradé qui prend en charge différentes variations de couleurs, ce qui serait un gâchis si vous n'utilisez pas de propriétés personnalisées, vous devez généralement créer un grand nombre de classes CSS et de valeurs de couleur pour chaque variation. De cette façon, il peut affecter une propriété personnalisée aux différentes couleurs et les valeurs de position de chaque point d'arrêt des couleurs, puis simplement mettre à jour ces valeurs en fonction du contexte. Plus important encore, les propriétés personnalisées peuvent être mises à jour via JavaScript, qui permet à Scott de créer un outil pour les modèles de dégradé personnalisés et de partager généreusement l'outil à la fin de l'article.
• CSS Halftone Match - Michelle Barker a effectué une rupture détaillée du modèle "demi-conte" d'Ana Tudor. Cet effet est un peu comme l'impression à l'encre dot-in dans des journaux à l'ancienne. Alors qu'Ana utilise Houdini pour l'animation et les effets de survol en bas, Michelle se concentre spécifiquement sur l'effet de demi-rolft lui-même et comment il est construit avec des gradients radiaux. J'aime particulièrement la façon dont Michelle montre comment passer d'une simple matrice de points à une matrice de points légèrement échelonnée. L'article se termine également par montrer comment utiliser les gradients linéaires comme image de masque pour créer un effet de fondu. J'ai également essayé ce modèle et je me suis retrouvé avec des effets intéressants qui ressemblaient à un filtre à encre floue.
• Une belle solution de barre de navigation - Eric Meyer fait face à un défi de conception de menu intéressant qui nécessite une ligne pointillée à partir du lien "Page actuel" et fait partie de la bordure pointillée plus grande sur le bord gauche du conteneur de contenu. Eric est toujours un excellent exemple de la façon de penser comme un développeur frontal, et il le fait ici, car il décrit l'alternative qu'il prend lorsqu'il rencontre des obstacles lors de l'utilisation de la méthode standard de réglage des éléments border-style: dotted - en utilisant des gradients linéaires.
• lignes en pointillés avec gradient de masque - Eric a complété le post précédent en montrant non seulement comment connecter la ligne pointillée de la bordure gauche à la ligne pointillée de l'image raster, mais aussi comment il a perfectionné sa conception en utilisant deux gradients de fond linéaires répétés comme images masquées des gradients de fond.merveilleux!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!