Astuces CSS qui utilisent un seul gradient

Les gradients

CSS sont un incontournable du développement frontal, offrant des options de style polyvalent. Bien que leur syntaxe puisse devenir complexe, cet article explore la puissance et la simplicité surprenantes réalisables avec Just One Gradient. Nous allons dépasser les utilisations de base pour débloquer des techniques avancées pour créer des motifs, des lignes de grille, des lignes pointillées, des effets arc-en-ciel, des animations de survol, des formes et des astuces d'image de bordure.

Oubliez la notion qu'un seul gradient est limite. Explorons son potentiel:

Génération de modèles de répétition

Les gradients excellent dans la création de modèles reproductibles. La fonction repeating-conic-gradient() est la clé ici. Un modèle de damier simple est obtenu avec:

background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 / 100px 100px;

Le réglage des arrêts de couleur donne différents résultats. Par exemple, la réduction de moitié de la couleur s'arrête (25% à 12,5%, 50% à 25%) crée un motif triangulaire. L'utilisation des variables CSS améliore la flexibilité, permettant une personnalisation facile de la couleur et de la taille. Des modèles plus complexes peuvent être visualisés en désactivant temporairement la répétition (no-repeat) pour isoler une seule tuile. Pour des plongées plus profondes dans la création de motifs, reportez-vous à ces ressources:

• Comment créer des modèles d'arrière-plan à l'aide de CSS et de gradient conique (blog Verpex)
• Apprenez CSS Radial-Gradient en construisant des modèles de fond (freecodecamp)
• Modèles d'arrière-plan, simplifiés par les gradients coniques (ana tudor)

Construire des grilles dynamiques

Étendez le concept de modèle pour créer des grilles flexibles. Les variables CSS contrôlent l'épaisseur, le nombre de cellules et la taille:

.grid-lines {
  --n: 3; /* rows */
  --m: 5; /* columns */
  --s: 80px; /* size */
  --t: 2px; /* thickness */
  width: calc(var(--m)*var(--s) + var(--t));
  height: calc(var(--n)*var(--s) + var(--t));
  background: conic-gradient(from 90deg at var(--t) var(--t), #0000 25%, #000 0) 0 0/var(--s) var(--s);
}

Le var(--t) assure des lignes complètes sur les bords. Les grilles réactives sont possibles en supprimant --m et en utilisant width: calc(round(down, 100%, var(--s)) var(--t)); pour ajuster dynamiquement le nombre de colonnes en fonction de l'espace disponible. L'importance de l'avenir implique d'utiliser calc-size(): width: calc-size(auto, round(down, size, var(--s)) var(--t));

Création de lignes pointillées

Les lignes pointillées verticales ou horizontales sont facilement créées:

.dashed-lines {
  --t: 2px;  /* thickness */
  --g: 50px; /* gap */
  --s: 12px; /* dash size */
  background: conic-gradient(at var(--t) 50%, #0000 75%, #000 0) var(--g)/calc(var(--g) + var(--t)) var(--s);
}

Expérimentez pour créer des versions horizontales. La combinaison de lignes en pointillés avec des grilles nécessite deux gradients, comme détaillé dans la collection de formes CSS de l'auteur.

Génération d'effets arc-en-ciel

Créer un gradient arc-en-ciel lisse nécessite une approche intelligente:

background: linear-gradient(90deg in hsl longer hue, red 0 0);

Le in hsl longer hue exploite l'interpolation de l'espace colorimétrique HSL, créant un spectre complet à partir d'une seule couleur. De même, une roue chromatique est créée avec background: conic-gradient(in hsl longer hue,red 0 0);

Implémentation des effets de survol

Les gradients offrent des effets de volants élégants, en remplacement du besoin de pseudo-éléments. Un exemple de soulignement glissant:

background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 / 100px 100px;

Formes complexes d'artisanat

Les gradients

sont étonnamment aptes à créer des formes complexes. Les techniques de génération des bordures en zigzag, des coins, des étincelles et des icônes (comme un signe plus) sont détaillés dans le "Guide moderne de l'auteur pour la fabrication de formes CSS" (Smashing Magazine) et la collection de formes CSS.

en utilisant des astuces d'image de bordure

La propriété border-image, combinée à des gradients, déverrouille d'autres possibilités créatives. Les exemples incluent les superpositions de gradient, les arrière-plans pleine largeur, les diviseurs de cap et les rubans. Ces effets nécessitaient traditionnellement des solutions de contournement complexes, mais le CSS moderne simplifie le processus.

Conclusion

La maîtrise des techniques à gradient unique élargit vos capacités CSS. Bien que cet article se concentre sur les gradients uniques, n'oubliez pas que la combinaison de multiples gradients déverrouille un potentiel encore plus grand. La clé est de comprendre le comportement de gradient pour créer des solutions CSS innovantes et efficaces.

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!