Share
Les dégradés font un retour sournois. Pendant un certain temps, ils ont appartenu au monde de Miami Vice et de Tequila Sunrise, puis ils ont ajouté de la profondeur aux magazines des années 1980, puis il y a eu Geocities-ok, ne nous attardons pas sur le passé.
De nos jours, les dégradés sont utilisés de manière audacieuse sur le Web. mélanger des couleurs très saturées pour des effets extrêmement riches (même si cela ne convient pas à tous les goûts).
On dirait que tout le monde utilise à nouveau un dégradé diagonal comme en 1995. Le même en plus (L: Stripe, R: Google). pic.twitter.com/j3cXyWo9tq
- Eli Schiff (@eli_schiff) le 24 novembre 2015
Examinons quelques exemples que je suis tombés récemment sur nous pour voir si nous pouvons nous en inspirer..
Vous ne serez pas surpris de voir Spotify dans cette liste. Leurs graphismes des six derniers mois ont été remplis d'images bicolores et de dégradés riches, se terminant par leur fonction Year in Music.
Combinée au style fort, la marque visuelle de Spotify ne vous tape pas sur les épaules pour le moment, elle vous tient la tête contre l'ampli et augmente le volume..
Atomic a utilisé une approche similaire avec sa récente rétrospective sur les articles de design de 2015.
Ici, le violet et le fuchsia (inclinés à 45 degrés) donnent une belle profondeur isométrique et constituent un véritable spectacle de la page..
realfuturefair.com utilise une gamme de couleurs tout aussi spectaculaire, toujours à la diagonale, avec une graphique d'onde généré:
Mon ancien collègue Jeffrey Way est passé à l’horizontale en utilisant un violet subtil pour indigo sur laracasts.com:
Commenter utilise une esthétique moins rétro, choisissant plutôt de placer une image de dégradé semi-opaque sur le fond de la page principale:
Cela aurait pu être fait avec plus de ressources - l'image supplémentaire ajoute une autre requête http et 75 Ko à la page - mais c'est un effet élégant.
Web conférence Web Après-midi utilise un dégradé récurrent allant du bleu au violet sur leur page, ce qui est particulièrement efficace en tant que bordures de boutons:
Survolez le lien et tout le fond adopte le dégradé. Alors, comment ça se fait? Après quelques styles de base, on donne un dégradé linéaire à la bordure du bouton. image de bordure propriété. Cela nous permet effectivement de projeter une image sur la bordure, au lieu de s'appuyer sur le trait normal, bien que vous puissiez déclarer des propriétés de bordure standard. premier afin de laisser un repli si border-image n'est pas supporté.
Vous remarquerez ensuite que la propriété border-image est suivie de bordure-image-tranche: 1;. Cela détermine où l’image d’arrière-plan est découpée en tranches, afin d’être mise à l’échelle avec l’élément. La valeur 1 prend le premier pixel à gauche, en haut, à droite et en bas de notre "image" de dégradé, et mappe ces tranches aux huit régions de la bordure. En savoir plus sur le découpage sur MDN.
Ensuite, pour l'état de survol, le même dégradé est appliqué au remplissage d'arrière-plan. Ici c'est en action:
Jusqu'ici, nous avons couvert des gradients lisses; deux couleurs ou plus se fondant l'une dans l'autre le long d'une transition parfaite. CSS rend ce processus relativement simple et facile à maintenir de nos jours. Mais les dégradés peuvent aussi avoir un caractère sous forme de texture:
Sur worldseasiestdecision.org, cette texture de dessin approximative est utilisée pour donner plus de personnalité aux dégradés. Bon travail.
www.viens-la.com utilise également des images (par opposition à CSS) pour donner à leurs dégradés un peu de personnalité:
Un gradient similaire peut être vu répété dans les détails sur tout leur site:
Les dégradés ne se limitent pas aux arrière-plans et aux bordures, ils peuvent également ajouter un élément d’intérêt à la typographie:
Pierre Georges utilise ici un dégradé sur l’arrière-plan du bloc de paragraphe «Bonjour», puis le clip de fond propriété de restreindre la peint zone au texte. -webkit-text-fill-color: transparent; rend alors le texte réel transparent, de sorte que le dégradé soit visible de dessous.
Voici à quoi ressemble la syntaxe (webkit):
p background-image: -webkit-gradient (linéaire, haut gauche, haut droite, couleur-stop (0, # f24a70), couleur-stop (0.5, # c557d8), couleur-stop (0.99, # f24a70)); -webkit-background-clip: texte; -webkit-text-fill-color: transparent;
Besoin d'un peu plus d'inspiration? Consultez ces fichiers disponibles sur Envato Market:
Gradiente - thème Tumblr
RedRice - Thème multifonctions d'une page WordPress
QuickEvents - page de destination Unbounce réactive
Colormuse - Modèle de Muse de portfolio à une page
Accentsconagua