Motifs de fond créatifs utilisant des dégradés, des formes CSS et même des émoticônes

Online Coding Courses for Kids

Vous pouvez créer des rayures en CSS. C’est tout ce à quoi j’ai pensé en termes de modèles d’arrière-plan CSS depuis longtemps. Il n’y a rien de mal avec les rayures; les rayures sont cool. Ils peuvent être personnalisés en bandes larges et étroites, entrecroisés dans un motif à carreaux, et joués avec d’autres manières en utilisant l’idée d’arrêts durs. Mais les rayures peuvent aussi être ennuyeuses. Trop conventionnel, démodé, et parfois même désagréable.

Heureusement, nous pouvons évoquer beaucoup plus de modèles d’arrière-plan que vous ne pouvez même l’imaginer avec CSS, avec un code qui ressemble à l’esprit aux rayures.

Les motifs d’arrière-plan sont des images répétées sur un arrière-plan. Ils peuvent être effectués en référençant une image externe, comme un fichier PNG, ou peuvent être dessinés avec CSS, ce qui est traditionnellement fait en utilisant des dégradés CSS.

Les dégradés linéaires (et les dégradés linéaires répétés), par exemple, sont généralement utilisés pour les rayures. Mais il existe d’autres façons de créer des motifs de fond sympas. Voyons comment nous pouvons utiliser les dégradés d’une autre manière et lancer d’autres choses, comme les formes CSS et les emoji, pour pimenter les choses.

Modèles de dégradé

Il existe trois types de dégradés CSS.

Gradients linéaires (gauche), radiaux (centre) et coniques (droite)
  1. linear-gradient(): Les couleurs s’écoulent de gauche à droite, de haut en bas ou à n’importe quel angle que vous choisissez dans une seule direction.
  2. radial-gradient(): Les couleurs commencent à un seul point et émanent vers l’extérieur
  3. conic-gradient(): Similaire dans le concept aux dégradés radiaux, mais les arrêts de couleur sont placés autour du cercle plutôt que émanant du point central.

Je recommande de vérifier la syntaxe de tous les dégradés pour bien comprendre comment démarrer et terminer une couleur dans un dégradé.

Modèles de dégradés radiaux

Regardons d’abord les dégradés radiaux car ils nous donnent des choses très utiles: cercles et ellipses. Les deux peuvent être utilisés pour des motifs très intéressants et pourraient débloquer des idées pour vous!

background: radial-gradient()

Voici un schéma de répétition des pastèques en utilisant cette technique:

background: 
	radial-gradient(circle at 25px 9px, black 2px, transparent 2px), 
	radial-gradient(circle at 49px 28px, black 2px, transparent 2px), 
	radial-gradient(circle at 38px 1px, black 2px, transparent 2px), 
	radial-gradient(circle at 20px 4px, black 2px, transparent 2px), 
	radial-gradient(circle at 80px 4px, black 2px, transparent 2px), 
	radial-gradient(circle at 50px 10px, black 2px, transparent 2px), 
	radial-gradient(circle at 60px 16px, black 2px, transparent 2px), 
	radial-gradient(circle at 70px 16px, black 2px, transparent 2px), 
	radial-gradient(ellipse at 50px 0, red 33px, lime 33px, lime 38px, transparent 38px) 
	white;
background-size: 100px 50px;

Nous commençons par fournir une taille d’arrière-plan sur l’élément, puis empilons les dégradés à l’intérieur. Une ellipse forme les parties vertes et rouges. Des cercles noirs sont dispersés à travers pour représenter les graines de pastèque.

Les deux premiers paramètres d’une fonction de dégradé radial déterminent si la forme du dégradé est un cercle ou une ellipse et la position de départ du dégradé. Cela est suivi des valeurs de couleur du dégradé ainsi que des positions de début et de fin dans le dégradé.

Modèles de gradient conique

Les dégradés coniques créent des formes de rayons. Comme les dégradés linéaires et radiaux, les dégradés coniques peuvent être utilisés pour créer des motifs géométriques.

background: conic-gradient()

background: 
  conic-gradient(yellow 40deg, blue 40deg, blue 45deg, transparent 45deg), 
  conic-gradient(transparent 135deg, blue 135deg, blue 140deg, transparent 140deg) ;
background-size: 60px 60px;
background-color: white;

Le hic avec le gradient conique est qu’il n’est pas pris en charge dans Firefox, au moins au moment de la rédaction. Il vaut toujours la peine de garder un œil sur un soutien plus approfondi.

Bureau

ChromeFirefoxC’EST À DIREBordSafari
69NonNon7912,1

Mobile / Tablette

Android ChromeAndroid FirefoxAndroidiOS Safari
81Non8112.2-12.4

Icône Emoji motifs

C’est là que les choses commencent à devenir intéressantes. Plutôt que d’utiliser simplement des motifs géométriques (comme dans les dégradés), nous utilisons maintenant les formes organiques des emojis pour créer des motifs d’arrière-plan. 🎉

Cela commence par des icônes emoji.

Motifs emoji unis

nous pouvons créer des icônes emoji en donnant aux emojis une couleur transparente et une ombre au texte.

color: transparent;
text-shadow: 0 0 black;

Ces icônes peuvent ensuite être transformées en une image qui peut être utilisée comme arrière-plan, à l’aide de SVG.


  
    
  

Le SVG peut ensuite être référencé par la propriété background en utilisant URL de données.

background: url("data:image/svg+xml,");

Et, voilá! Nous obtenons quelque chose comme ceci:

background: 
    url("data:image/svg+xml,
🏄‍♀️
"), white; background-size: 60px 60px;

Outre les emojis, il est également possible de dessiner des formes CSS et de les utiliser comme modèles. Les émojis sont moins de travail, cependant. Je dis juste.

Motifs emoji dégradés

Au lieu d’utiliser des icônes emoji simples, nous pouvons utiliser des icônes emoji dégradées. Pour ce faire, ignorez l’ombre du texte sur les emojis. Ajoutez un arrière-plan dégradé derrière eux et utilisez background-clip pour découper le fond dégradé à la forme des emojis.

color: transparent;
background: linear-gradient(45deg, blue 20%, fuchsia);
background-clip: text; /* Safari requires -webkit prefix */

Ensuite, comme précédemment, utilisez la combinaison de SVG et d’URL de données pour créer le motif d’arrière-plan.

Motifs emoji de couleur translucide

Cela revient à utiliser des icônes emoji de couleur bloc. Cette fois, cependant, nous enlevons l’opacité des couleurs en utilisant rgba() ou hsla() valeurs pour l’ombre du texte.

color: transparent;
text-shadow: 20px 10px rgba(0, 255, 0, .3), 
             0 0 red;

Motifs emoji texte SVG

Nous avons déjà examiné toutes les méthodes de travail auxquelles je pouvais penser pour créer des motifs de fond, mais je pense que je devrais également mentionner cette autre technique que j’ai essayée, qui n’est pas aussi largement prise en charge que je l’espérais.

J’ai essayé de placer les emoji dans un SVG élément au lieu du HTML ajouté à l’aide . Mais je n’ai pas pu créer une ombre solide derrière dans tous les navigateurs.

background: 
  url("data:image/svg+xml,🏄‍♀️")

Juste au cas où, j’ai également essayé d’utiliser des filtres CSS et SVG pour l’ombre, pensant que cela pourrait fonctionner. Ce n’était pas le cas. J’ai également essayé d’utiliser l’attribut stroke, pour au moins créer un contour pour les emoji, mais cela n’a pas fonctionné non plus.

CSS element() motifs

Je n’ai pas pensé au SVG lorsque j’ai pensé à convertir des icônes emoji ou des formes CSS en images d’arrière-plan. J’ai essayé CSS element(). C’est une fonction qui convertit directement un élément HTML en une image qui peut être référencée et utilisée. J’aime vraiment cette approche, mais la prise en charge du navigateur est une énorme mise en garde, c’est pourquoi je le mentionne ici à la fin.

Fondamentalement, nous pouvons déposer un élément dans le HTML comme ceci:

🐍

… Puis passez-le dans le element() fonction à utiliser comme une image sur d’autres éléments, comme ceci:

background: 
  -moz-element(#snake), /* Firefox only */
  linear-gradient(45deg, transparent 20px, blue 20px, blue 30px, transparent 30px) 
  white;
background-size: 60px 60px;
background-color: white;

Maintenant, cet emoji de serpent est techniquement une image que nous pouvons inclure dans le motif.

Encore une fois, le support du navigateur est inégal, ce qui rend cette approche super expérimentale.

Bureau

ChromeFirefoxC’EST À DIREBordSafari
Non4 *NonNonNon

Mobile / Tablette

Android ChromeAndroid FirefoxAndroidiOS Safari
Non68 *NonNon

Dans cette méthode, les emoji originaux (ou toute forme CSS d’ailleurs) utilisés pour le motif d’arrière-plan doivent être affichés à l’écran pour qu’ils apparaissent également dans le motif d’arrière-plan. Pour masquer cet emoji d’origine, j’ai utilisé le mode mix-blend – il masque en quelque sorte les emoji d’origine dans le HTML afin qu’il n’apparaisse pas sur la page.


J’espère que vous trouverez les méthodes de cet article utiles d’une manière ou d’une autre et que vous avez appris quelque chose de nouveau dans le processus! Essayez-les. Expérimentez avec différents emojis et formes CSS parce que les dégradés, bien que cool, ne sont pas le seul moyen de créer des motifs. background La propriété prend plusieurs valeurs, ce qui nous permet de penser à des façons créatives d’empiler les choses.

Close Menu