Share
Dans ce didacticiel, vous apprendrez à utiliser les dégradés sur le Web. Je vais vous donner quelques exemples, quelques exercices (comme comment créer des dégradés pour les bordures) et quelques ressources utiles qui faciliteront grandement la création de dégradés..
Autrefois, il n'était pas vraiment possible d'utiliser des dégradés sans utiliser d'images, mais les développements en CSS signifient qu'il est désormais simple et fiable de créer des dégradés à partir de nos feuilles de style..
Dans leur forme la plus simple, nous définissons les dégradés comme des images d’arrière-plan. Nous définissons l'image d'arrière-plan (en utilisant simplement le raccourci Contexte est tout à fait correct) soit comme un gradient linéaire ou un gradient radial, puis nous passons dans les couleurs de début et de fin:
.boîte fond: linéaire-dégradé (# 000046, # 1cb5e0);
Par défaut, un dégradé linéaire va du haut vers le bas, nous donnant à peu près ceci:
Nous pouvons changer le sens en ajoutant un nouveau paramètre avant les couleurs, par exemple:
.box background: linear-gradient (à droite, # 000046, # 1cb5e0);
De même, changer ce paramètre pour lire en haut à droite créerait un dégradé diagonal. Vous pouvez aussi rendre cette diagonale exacte en spécifiant quelque chose comme 45deg (ou quel que soit l'angle que vous choisissez).
Pour aller plus loin, vous n'avez pas besoin de vous arrêter à deux couleurs. Et vous pouvez aussi utiliser des noms de couleurs, comme ceci:
.boîte fond: linéaire-dégradé (à droite, orange, # ec38bc, # 7303c0, cyan);
Dans ce cas, chacune des quatre couleurs occupera une part égale de l’espace disponible, ce qui nous donnera un dégradé lisse et équilibré..
Si nous ne voulons pas d'une distribution uniforme, mais souhaitons qu'une couleur occupe plus d'espace qu'une autre, nous pouvons spécifier cette valeur sous forme de pourcentage directement après la couleur, comme suit:
.box fond: linéaire-dégradé (à droite, # f05053 80%, # e1eec3);
Nous donnant:
Ensuite, nous pouvons utiliser tout ce que nous avons appris jusqu'à présent et le changer pour l'afficher. radial gradients à la place. Eteindre gradient linéaire pour gradient radial est tout ce que vous devez faire ici.
.box background: radial-gradient (# fdbb2d, # 22c1c3);
Ce dégradé radial s'étire jusqu'à son élément parent, ce rectangle se termine donc par un dégradé semblable à une ellipse. Pour contraindre ce gradient afin qu’il reste un cercle, quelles que soient les proportions du parent, on peut ajouter le cercle mot clé comme suit:
.box background: radial-gradient (cercle, # fdbb2d, # 22c1c3);
Pour aller encore plus loin, nous pouvons aussi spécifier la source du dégradé de cercle, de sorte qu'il commence (par exemple) en haut à gauche du parent.
.box background: radial-gradient (cercle en haut à gauche, # fdbb2d, # 22c1c3);
L'effet est subtil, mais la différence entre cela et un simple dégradé linéaire pourrait bien correspondre à ce que vous recherchez..
Où pourrions-nous utiliser les dégradés de manière intéressante?
Voici un exemple de superposition, où le dégradé est légèrement transparent (il utilise rgba valeurs) et s’assoit sur une photo.
le Contexte property peut accepter plusieurs valeurs qui forment une pile, la première étant la plus haute et la dernière se trouvant au bas de la pile. Si nous définissons d'abord un dégradé, il se superposera à ce que nous définissons par la suite. Jetez un coup d'œil à cet extrait et voyez si vous pouvez comprendre ce qui se passe:
.hero background: linear-gradient (à droite, rgba (75, 123, 211, 0,5), rgba (22, 215, 177, 0,3)), url (https: //bg.jpg);
Voici l'effet résultant:
Avoir un dégradé sur le texte est un très bon effet, même si cela n’est pas totalement pris en charge au sens pur. Au lieu de cela, nous comptons sur clip de fond propriété (et son préfixe -webkit-background-clip ami), ce qui est un peu un bidouillage mais fonctionne très bien.
Nous commençons par un morceau de texte (un h1 dans ce cas) et appliquer un dégradé à son Contexte. le clip de fond propriété, à une valeur de texte, supprime ensuite l’arrière-plan de tout le bloc, à l’exception de la zone située derrière le texte. Le texte Couleur obscurcit le fond bien sûr, alors nous le faisons transparent afin de laisser briller le gradient:
h1 background-image: linear-gradient (à droite, # 0cebeb, # 20e3b2, # 29ffc6); -webkit-background-clip: texte; background-clip: texte; couleur: transparent;
Vous avez peut-être déjà vu les dégradés de bordure dans Envato Elements. Ils constituent un excellent moyen d'agrémenter votre interface utilisateur. C'est subtilement fait, mais jetez un coup d'œil au dégradé linéaire bleu à violet sur les bordures de ces boutons:
Pour atteindre cet effet, il existe plusieurs approches. La première consiste à nous donner d’abord un élément (une ancre, un conteneur, peu importe) une bordure transparente. Nous appliquons ensuite notre gradient en utilisant le image de bordure propriété. Enfin, nous avons mis bordure-image-tranche à 1, afin que le dégradé utilise le contour complet de la bordure.
.card1 border: 5px solid transparent; border-image: linear-gradient (jusqu'en bas, # 22c1c3, # fdbb2d); bordure-image-tranche: 1;
Voici le résultat:
Cette approche pose cependant quelques problèmes. d'abord, image de bordure n'est pas universellement pris en charge par tous les navigateurs, notamment les anciennes versions d'IE. Deuxièmement, cette approche ne vous permettra pas d'ajouter rayon de la frontière comme vous le voyez dans l'interface utilisateur Envato Elements. Alors regardons une approche alternative.
Nous commençons par donner à notre div un position: relative. Nous y ajoutons ensuite un pseudo-élément, ce qui donne à négatif la position absolue de ce que nous avons choisi comme largeur de bordure (5px dans ce cas):
.card2 :: after contenu: "; position: absolute; haut: -5px; bas: -5px; gauche: -5px; droit: -5px;
Cela nous donnera un bloc de gradient solide couvrant l’ensemble de notre div. Ajout d'un z-index de -1 garantira que le bloc de dégradé se déplace derrière la div.
Ensuite (ouf, il y a beaucoup d’étapes pour celui-ci) nous ajoutons un rayon de la frontière au pseudo-élément égal à celui de son parent (appliquons 10 pixels chacun). Et ensuite, nous donnons au parent un arrière-plan de ce que nous voulons; le même que le fond de la page le rendra transparent.
Enfin, nous nous tournons à nouveau vers notre ami clip de fond, l'appliquer au parent et cette fois en lui donnant une valeur de rembourrage. Cette dernière action permet de s’assurer que le remplissage de la div se situe au bord de la frontière et.
Donc, cette dernière approche n'est pas réellement une frontière au sens vrai du terme, mais elle produit l'effet recherché.
Une troisième approche est possible, cette fois en utilisant boîte ombre pour obtenir l'effet. Je vous recommande de jeter un coup d'œil au mixin Border-gradient de John Grishin sur CodePen pour voir comment cela fonctionne..
Alors voilà! Ce guide de base sur les dégradés CSS vous a donné le point de départ dont vous avez besoin, ainsi que l’utilisation des dégradés sur le Web. Si vous avez déjà vu d'autres utilisations créatives des dégradés dans la nature, déposez-les dans la section commentaires..
Accentsconagua