Modèles de fond créatifs utilisant des gradients, des formes CSS et même des emojis

Au-delà des rayures simples, CSS offre une boîte à outils étonnamment polyvalente pour fabriquer des modèles de fond dynamiques. Alors que les rayures ont leur place, explorons des approches plus imaginatives en utilisant des gradients, des formes et même des emojis.

Les modèles d'arrière-plan, essentiellement répétés, peuvent provenir de l'extérieur (comme les PNG) ou générés directement au sein du CSS, tirant souvent parti des gradients. Les gradients linéaires, fréquemment utilisés pour les rayures, ne sont que le début. Plongeons dans des applications plus créatives.

Modèles basés sur le gradient

CSS fournit trois types de gradient:

1. linear-gradient() : crée une transition de couleur linéaire dans une direction spécifiée.
2. radial-gradient() : Les couleurs rayonnent d'un point central, formant des cercles ou des ellipses.
3. conic-gradient() : Les couleurs sont distribuées autour d'un cercle, produisant des effets de type rayon. (Remarque: la prise en charge du navigateur peut varier.)

Comprendre la syntaxe du gradient - définir les arrêts de couleur et les positions - est crucial pour la création efficace de motifs.

Exemples de gradient radial

Les gradients radiaux offrent l'avantage de générer des cercles et des ellipses, idéal pour les motifs uniques.

 Contexte: gradient radial (<gradient values=""> ));</gradient>

Voici un exemple de motif de pastèque:

 arrière-plan: 
    Radial-Gradient (cercle à 25px 9px, noir 2px, transparent 2px), 
    Radial-Gradient (cercle à 49px 28px, noir 2px, transparent 2px), 
    Radial-Gradient (cercle à 38px 1px, noir 2px, transparent 2px), 
    Radial-Gradient (cercle à 20px 4px, noir 2px, transparent 2px), 
    Radial-Gradient (cercle à 80px 4px, noir 2px, transparent 2px), 
    Radial-Gradient (cercle à 50px 10px, noir 2px, transparent 2px), 
    Radial-Gradient (cercle à 60px 16px, noir 2px, transparent 2px), 
    Radial-Gradient (cercle à 70px 16px, noir 2px, transparent 2px), 
    Gradient radial (ellipse à 50px 0, rouge 33px, citron vert 33px, citron vert 38px, transparent 38px) 
    blanc;
taille arrière: 100px 50px;

Ce code superpose plusieurs gradients radiaux: ellipses pour la chair de pastèque et des cercles plus petits pour les graines. La propriété background-size contrôle la répétition du modèle.

Modèles de gradient conique

Les gradients coniques génèrent des formes rayonnantes. Bien que utile pour les modèles géométriques, n'oubliez pas que la compatibilité du navigateur doit être prise en compte.

 Contexte: gradient conique (<gradient values=""> ));</gradient>

Exemple:

 arrière-plan: 
 gradient conique (jaune 40deg, bleu 40deg, bleu 45deg, transparent 45deg), 
 gradient conique (transparent 135deg, bleu 135deg, bleu 140deg, transparent 140deg);
taille arrière: 60px 60px;
Color d'arrière-plan: blanc;

(Vérifiez Caniuse.com pour les informations de support du navigateur à jour.)

Modèles basés sur les emoji

Allons au-delà des formes géométriques et incorporons les formes organiques des emojis.

Emojis en couleur solide

Nous pouvons créer des motifs emoji en couleur solide en utilisant des ombres de texte et de texte transparents:

 Couleur: transparent;
Text-shadow: 0 0 noir;

Ces emojis peuvent ensuite être incorporés dans une image SVG et utilisés comme arrière-plan via une URL de données.

<svg>
<foreignobject>
  
</foreignobject></svg>

Contexte: URL ("Data: image / svg xml,<svg viewbox="" xmlns="" http:></svg> ");

Exemple:

 arrière-plan: 
    URL ("Data: image / svg xml, <svg viewbox="" xmlns="" http:><foreignobject height="" width=""><div black=""  color:transparent xmlns="" http:> ? ‍♀️</div></foreignobject></svg> "), 
    blanc; 
taille arrière: 60px 60px;

Gradient et emojis translucides

Des techniques similaires peuvent être utilisées pour créer des motifs d'emoji gradient ou translucides en ajustant l'ombre de texte ou en utilisant background-clip: text; .

Méthodes SVG Text et CSS element()

Bien que moins largement pris en charge, en utilisant SVG<text></text> Les éléments ou la fonction CSS element() offrent des approches alternatives pour créer des modèles basés sur les emoji. Cependant, la compatibilité du navigateur doit être soigneusement évaluée avant la mise en œuvre.

Conclusion

La capacité de la propriété background à accepter plusieurs valeurs permet la superposition créative et la combinaison de techniques. Expérimentez avec différents gradients, emojis et formes pour découvrir vos propres modèles de fond uniques. N'oubliez pas de toujours vérifier la compatibilité du navigateur pour des fonctionnalités moins largement prises en charge.

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!