Modèles de fond, simplifiés par les gradients coniques

Firefox soutient désormais les gradients coniques! Cet article montrera comment simplifier les modèles de fond en utilisant des gradients coniques.

À partir de Firefox 75, les gradients coniques peuvent être activés. La méthode est: Accès about:config , trouver la mise layout.css.conic-gradient.enabled indicateur et définir sa valeur sur true (la valeur par défaut est false , double-cliquez pour changer). Une fois activé, vous pouvez tester CSS avec des gradients coniques dans Firefox.

Certains exemples de cet article fonctionnent également correctement avec le polyfill, mais certains utilisent des variables CSS dans les gradients coniques, de sorte que cette fonctionnalité doit être soutenue nativement.

Un avantage majeur du gradient conique est sa capacité à simplifier le modèle de fond. Regardons quelques exemples de la bibliothèque de motifs de dégradé linéaire créé par Lea verou il y a décennie et voyons comment les simplifier avec des gradients coniques.

Motif pyramide

Le motif d'origine utilise quatre gradients linéaires:

 arrière-plan:
  Gradient linéaire (315deg, transparent 75%, # d45d55 0) -10px 0,
  Gradient linéaire (45 degrés, transparent 75%, # D45D55 0) -10px 0,
  Gradient linéaire (135DEG, # A7332B 50%, transparent 0) 0 0,
  Gradient linéaire (45DEG, # 6A201B 50%, # 561A16 0) 0 0 0 # 561A16;
taille arrière: 20px 20px;

Le code est long et difficile à comprendre. Avec un gradient conique, vous pouvez obtenir le même effet avec une seule couche d'arrière-plan:

 $ s: 20px;
arrière-plan:
  gradient conique (à partir de 45deg, 
    # 561A16 25%, 
    # 6A201B 0% 50%, 
    # A7332B 0% 75%, 
    # D45D55 0%) 
    50% / # {$ s $ s};

Le code est plus concis et le volume est réduit de 260 octets à 103 octets, soit plus de la moitié.

Modèle de panneau d'échecs

Le motif d'origine utilise deux gradients linéaires:

 Color d'arrière-plan: #eee;
Image d'arrière-plan:
  gradient linéaire (45 degrés, noir 25%, transparent 25%, 
    transparent 75%, noir 75%, noir),
  gradient linéaire (45 degrés, noir 25%, transparent 25%, 
    transparent 75%, noir 75%, noir);
taille arrière: 60px 60px;
Position d'arrière-plan: 0 0, 30px 30px;

Après avoir simplifié avec un gradient conique:

 $ s: 60px;
arrière-plan:
  Répéter-gradient-gradient (# 000 0% 25%, #EEE 0% 50%) 
    50% / # {$ s $ s};

Le volume de code est passé de 263 octets à 73 octets, une réduction de plus de 70%.

Motif de la carte d'échecs diagonale

Le motif d'origine utilise également deux gradients linéaires:

 Color d'arrière-plan: #eee;
Image d'arrière-plan: 
  gradient linéaire (45 degrés, noir 25%, transparent 25%, 
    transparent 75%, noir 75%, noir),
  gradient linéaire (-45 degrés, noir 25%, transparent 25%, 
    transparent 75%, noir 75%, noir);
taille arrière: 60px 60px;

Après avoir simplifié avec un gradient conique:

 $ s: 60px;
arrière-plan:
  Répéter-Cronic-Gradient (à partir de 45Deg, 
    # 000 0% 25%, #eee 0% 50%) 
  50% / # {$ s $ s};

Le volume de code est passé de 229 octets à 83 octets, une diminution de près des deux tiers.

Half Diamond Match

Le motif d'origine utilise quatre gradients linéaires: (Le code d'origine et les explications détaillées sont omises ici, et les conclusions de base sont préservées)

Après simplification avec le gradient de cône, le volume de code est réduit de 343 octets à 157 octets.

Exemple supplémentaire: arrière-plan de ligne d'intersection

Les gradients coniques peuvent également facilement réaliser les effets qui étaient initialement nécessaires pour atteindre par plusieurs gradients linéaires. (Des explications détaillées sont omises ici, et les conclusions fondamentales sont conservées)

En résumé, les gradients coniques peuvent simplifier considérablement le code CSS des modèles de fond, améliorer la lisibilité et l'efficacité du code.

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!