{"id":5363,"date":"2016-10-04T13:37:22","date_gmt":"2016-10-04T11:37:22","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=5363"},"modified":"2016-10-31T17:33:46","modified_gmt":"2016-10-31T16:33:46","slug":"webdesign-degrades-couleurs-css","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/webdesign-degrades-couleurs-css","title":{"rendered":"Webdesign \u00e0 base de d\u00e9grad\u00e9s de couleurs en CSS"},"content":{"rendered":"

La mode des d\u00e9grad\u00e9s revient ces derniers temps. Depuis presque un an d\u00e9j\u00e0 les Long\/Big Gradients<\/em> en fond d’\u00e9l\u00e9ments sont de mise, souvent en fond de page de votre application ou site web. Qu’ils soient lin\u00e9aires, radiaux ou compl\u00e8tement abstraits, je vous pr\u00e9sente quelques id\u00e9es d’utilisation et le code CSS qui va avec, gr\u00e2ce \u00e0 l’utilisation de linear-gradient()<\/code> et radial-gradient()<\/code>, notamment.<\/p>\n

<\/p>\n

Le retour \u00e0 ces d\u00e9grad\u00e9s vient probablement de la place offerte \u00e0 la couleur par le flat design<\/a>, ce proc\u00e9d\u00e9 graphique qui consiste \u00e0 simplifier au maximum les interfaces, les couleurs et les effets graphiques pour faire la part belle \u00e0 la typographie, les couleurs et le contenu. (image, vid\u00e9o ou texte)<\/p>\n

La couleur prenant une place encore plus importante dans l’identit\u00e9 graphique d’une marque ou d’un produit, l’utilisation de beau, long et visibles d\u00e9grad\u00e9s peut facilement \u00eatre justifi\u00e9.
\nPartant de ce constat, regardons ensemble \u00e0 quels niveaux ces d\u00e9grad\u00e9s sont utilis\u00e9s, pour votre inspiration, et pour trouver des solutions techniques faciles \u00e0 impl\u00e9menter.<\/p>\n

Quelques utilisations des d\u00e9grad\u00e9s de couleurs<\/h2>\n

Je vais vous donner quelques exemples aper\u00e7u sur des sites, ci et l\u00e0, tout en combinant le visuel \u00e0 la solution technique. Mais dans un premier temps, vous prendriez bien une petite dose de couleurs avec ces quelques exemples d’utilisation sur des sites web plus ou moins connus.<\/p>\n

De grands fonds de site web<\/h3>\n

Je ne vais pas aller piocher tr\u00e8s loin puisque je vais prendre deux gros sites web tr\u00e8s modernes, ainsi que deux UI Kits plus ou moins connus en exemple. L’un utilise le fond d\u00e9grad\u00e9 pour mettre en avant une image sur un plan plus proche.<\/p>\n

\"Stripe\"<\/a>
Stripe \u2013 Mise en exergue du contenu gr\u00e2ce au d\u00e9grad\u00e9 de couleurs.<\/figcaption><\/figure>\n

L’autre utilise un d\u00e9grad\u00e9 de couleurs sur une photo pour cr\u00e9er une ambiance bien pr\u00e9cise.<\/p>\n

\"Deezer\"<\/a>
Deezer \u2013 Ambiance donn\u00e9e par une photo et un d\u00e9grad\u00e9 de couleurs<\/figcaption><\/figure>\n

Un autre exemple sur une image dans ce Freebie assez r\u00e9cent :<\/p>\n

\"Land<\/a>
Land IO – Freebie<\/figcaption><\/figure>\n

Et enfin un \u00ab\u00a0kit UI\u00a0\u00bb propos\u00e9 par Mike de Creative Mints qui pr\u00e9sente des d\u00e9grad\u00e9s multiples :<\/p>\n

\"UI<\/a>
UI Kit avec d\u00e9grad\u00e9s radiaux<\/figcaption><\/figure>\n

Voyons voir ce que l’on peut faire de tout cela en inspiration avec nos mimines et des lignes de code !<\/p>\n

La syntaxe de base<\/h2>\n

On va commencer par le d\u00e9but, la pr\u00e9sentation des diff\u00e9rentes syntaxes de d\u00e9grad\u00e9s, au moins pour les plus classiques.<\/p>\n

Le d\u00e9grad\u00e9 lin\u00e9aire<\/h3>\n

Je vous pr\u00e9sente la syntaxe de base officielle du linear-gradient()<\/code>.<\/p>\n

linear-gradient( [ [ <angle> | to <side-or-corner>,]?<color-stop> [, <color-stop>]+ )<\/code><\/pre>\n
Cela vous parle vachement, j’en suis s\u00fbr ! Allez, je vous donne un exemple d’utilisation et son r\u00e9sultat.<\/p>\n
.gradient {\r\n    background: linear-gradient(to right, #1DB1DD, #23D0D2);\r\n}<\/code><\/pre>\n
\n
Si vous ne voyez pas de d\u00e9grad\u00e9 sous ce texte c’est que vous devez changer de navigateur.<\/p>\n<\/div>\n
Pas trop compliqu\u00e9\u2026 si ? Passons \u00e0 la suite.<\/p>\n
Le d\u00e9grad\u00e9 radial<\/h3>\n
Voici maintenant celle du radial-gradient()<\/code>.<\/p>\n
radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <color-stop> [, <color-stop>]+ )<\/code><\/pre>\n
Cela vous parle tout autant que le pr\u00e9c\u00e9dent, hein ? :p
\nAllez, un autre exemple d’utilisation :<\/p>\n
.gradient {\r\n    background: radial-gradient(circle, #1DB1DD, #23D0D2);\r\n}<\/code><\/pre>\n
\n
Si vous ne voyez pas de d\u00e9grad\u00e9 sous ce texte c’est que vous devez changer de navigateur.
\nJ’agrandis un peu le bloc en hauteur pour que vous voyiez l’aspect radial du d\u00e9grad\u00e9.<\/p>\n<\/div>\n
Il existe des mani\u00e8res d’utiliser ces d\u00e9grad\u00e9s qui vous permettent d’avoir des r\u00e9p\u00e9titions de ces derniers, ou des formes plus ovales qu’arrondies suivi les param\u00e8tres utilis\u00e9s dans la fonction radial-gradient()<\/code> par exemple.<\/p>\n
Je vais essayer de ne pas me perdre dans ces usages complexes et vous pr\u00e9senter quelques cas pr\u00e9cis, avec images et d\u00e9monstration \u00e0 l’appuie.<\/p>\n
Des fonds splash avec effets radiaux<\/h3>\n
\"Leafee<\/a>
Leafee UI Kit<\/a><\/figcaption><\/figure>\n
Cet effet est int\u00e9ressant pour donner un aspect de profondeur et une ambiance \u00e0 votre site web. Je pense notamment \u00e0 des usages dans des th\u00e9matiques tr\u00e8s prononc\u00e9es : un restaurant, la photographie, l’art, etc. Le fait d’avoir plusieurs d\u00e9parts de d\u00e9grad\u00e9s rappel le flou de fond obtenu sur de la photographie de portrait ou de la macro, et pose un contexte visuel.<\/p>\n
Pour cr\u00e9er ce type de fond, deux solutions : une image de fond \u00ab\u00a0bitmap\u00a0\u00bb que vous laissez s’\u00e9tendre, le risque \u00e9tant de voir les \u00e9tapes du d\u00e9grad\u00e9s appara\u00eetre sur grands \u00e9crans, ou la solution de d\u00e9grad\u00e9s de couleurs en CSS.<\/p>\n
\"Le<\/a>
Le rendu de la d\u00e9mo<\/figcaption><\/figure>\n
D\u00e9mo CodePen<\/a><\/p>\n
Dans le CodePen pr\u00e9c\u00e9dent, vous verrez un bout de code CSS dans ce genre.<\/p>\n
html {\r\n\tbackground:\r\n\t\tradial-gradient(300px circle at 73% 60%, rgba(69,28,84,.8),rgba(69,28,84,0)),\r\n\t\tradial-gradient(280px circle at 52% 70%, rgba(220,123,67,.95),rgba(220,123,67,0)),\r\n\t\tradial-gradient(421px circle at 82% 82%, rgba(197,197,145,.95),rgba(197,197,145,0)),\r\n\t\tradial-gradient(450px circle at 42% 65%, rgba(192,40,89,1),rgba(192,40,89,0)),\r\n\t\tradial-gradient(480px circle at 40% 75%, rgba(192,40,89,1),rgba(192,40,89,0)),\r\n\t\tradial-gradient(480px circle at 38% 95%, rgba(192,40,89,1),rgba(192,40,89,0)),\r\n\t\tradial-gradient(435px circle at 65% 73%, rgba(235,188,143, 1), rgba(235,188,143, 0)),\r\n\t\tradial-gradient(850px circle at right top, rgba(147,17,87, 1), rgba(147,17,87, .9), rgba(209,64,97,.4), rgba(209,64,97,0)),\r\n\t\tradial-gradient(422px circle at right 75%, rgba(35,173,149, .95), rgba(35,173,149, 0)),\r\n\t\tradial-gradient(350px circle at right 50%, rgba(204,116,96,1), rgba(204,116,96,0)),\r\n\t\tradial-gradient(300px circle at right bottom, rgba(169,82,160, 1),  rgba(169,82,160, 0)),\r\n\t\tlinear-gradient(to right bottom, rgba(71,17,77, 0), rgba(71,17,77, 0.95) 40%, rgba(71,17,77, 0.5) 60%, rgba(71,17,77, 0)),\r\n\t\tlinear-gradient(to right, #1c062d, #b8205d);\r\n}<\/code><\/pre>\n
Pas loin de 13 d\u00e9grad\u00e9s, dont 11 radiaux et 2 lin\u00e9aires afin de composer ce fond en CSS. Pour vous faire gagner du temps, comprenez bien que les \u00ab\u00a0couches\u00a0\u00bb se superpose comme suit : le premier d\u00e9grad\u00e9 d\u00e9clar\u00e9 se trouve tout en haut de la pile. J’ai donc commenc\u00e9 par les d\u00e9grad\u00e9s principaux lin\u00e9aires pour avoir mes couleurs principales (les deux derniers d\u00e9clar\u00e9s), puis j’ai empil\u00e9 des d\u00e9grad\u00e9s radiaux pour faire \u00ab\u00a0des t\u00e2ches\u00a0\u00bb ci et l\u00e0.<\/p>\n
La d\u00e9claration 450px circle at 42% 65%<\/code> signifie en fran\u00e7ais : un cercle de 450px de diam\u00e8tre positionn\u00e9 \u00e0 42% (x) et 65% (y). Pour composer ces d\u00e9grad\u00e9s de couleurs sans surprise, chaque d\u00e9grad\u00e9 radial traite d’une seule couleur. Je pars du centre du radial avec une couleur opaque, pour aller vers l’ext\u00e9rieur sur cette m\u00eame couleur transparente.<\/p>\n
Si vous n’\u00eates pas inspir\u00e9s, Random Gradients Generator<\/a> vous propose des d\u00e9grad\u00e9s au pif.<\/p>\n
Les gros boutons ou appels \u00e0 l’action<\/h3>\n
Les d\u00e9grad\u00e9s ont tr\u00e8s longtemps \u00e9t\u00e9 utilis\u00e9s, et le sont encore, pour mettre en exergue certains \u00e9l\u00e9ments d’action. (des call-to-action<\/em> comme on les appelle)
\nJe souhaite vous pr\u00e9senter 3 variantes de boutons que je me suis amus\u00e9 \u00e0 int\u00e9grer il y a d\u00e9j\u00e0 de cela quelques mois.<\/p>\n
Les boutons classiques<\/h4>\n
\"gradient-button-ghost\"<\/p>\n
Voil\u00e0 un fond en d\u00e9grad\u00e9 de couleurs sur un bouton, et \u00e9galement sur son petit fr\u00e8re le bouton \u00ab\u00a0ghost\u00a0\u00bb. Pour cr\u00e9er ces deux effets, rien de plus simple que l’utilisation d’un background<\/code> et d’une border-image<\/code>.<\/p>\n
Voici le code HTML utilis\u00e9 ici :<\/p>\n
<a href=\"#\" class=\"button\">Button<\/a>\r\n<a href=\"#\" class=\"button ghost\">Button<\/a><\/code><\/pre>\n
Et le code CSS correspondant\u00a0:<\/p>\n
\/* Styles des boutons en g\u00e9n\u00e9ral *\/\r\n.button {\r\n\tpadding: 10px 25px;\r\n\tborder-width: 2px;\r\n\t\/* les d\u00e9grad\u00e9s en question *\/\r\n\tborder-image: linear-gradient(to right, #1db0dc, #23d0d3);\r\n\tbackground: linear-gradient(to right, #1db0dc, #23d0d3);\r\n\tcolor: #fff;\r\n\tcursor: pointer;\r\n\ttext-decoration: none;\r\n\tfont-size: 1em;\r\n\tfont-weight: bold;\r\n\t\/* On pr\u00e9voit une transition pour l'effet au survol *\/\r\n\ttransition: all 0.3s ease 0s;\r\n\tfilter: hue-rotate(0deg) saturate(1);\r\n}\r\n\r\n\/* Version Ghost \"simple\" *\/\r\n.button.ghost {\r\n\tbackground: transparent;\r\n\tcolor: #1db0dc;\r\n}<\/code><\/pre>\n
Comme vous le constatez, le code CSS n’est vraiment pas complexe. La difficult\u00e9 r\u00e9side peut-\u00eatre dans le type d’animation que vous pourriez lui appliquer. Pour ma part j’ai choisi de jouer sur les filtres de couleurs gr\u00e2ce \u00e0 filter<\/code>.
\nVoici le code que je vous propose pour le survol\/focus.<\/p>\n
.button:hover,\r\n.button:focus {\r\n\tfilter: hue-rotate(10deg) saturate(1.2);\r\n}<\/code><\/pre>\n
Le bouton rounded<\/em><\/h4>\n
\"gradient-button-rounded\"<\/p>\n
Comme pour les boutons pr\u00e9c\u00e9dents, la version \u00ab\u00a0pleine\u00a0\u00bb n’est pas tr\u00e8s complexe \u00e0 faire, sauf qu’ici nous ne pouvons pas utiliser de border-image pour la simple et bonne raison que le border-radius ne fonctionne pas de paire avec.
\nVoici le code HTML utilis\u00e9 ici :<\/p>\n
<a href=\"#\" class=\"button button-rounded\">Button<\/a>\r\n<a href=\"#\" class=\"button button-rounded ghost\">Button<\/a><\/code><\/pre>\n
Nous conservons la CSS pr\u00e9c\u00e9dente, mais nous allons la compl\u00e9ter avec ces styles :<\/p>\n
\/* Styles des boutons en g\u00e9n\u00e9ral *\/\r\n.button-rounded {\r\n\tposition: relative;\r\n\tborder-radius: 7px;\r\n\tborder-image: none;\r\n}\r\n.button-rounded::before,\r\n.button-rounded::after {\r\n\tcontent: \"\";\r\n\tz-index: -1;\r\n\tposition: absolute;\r\n\tborder-radius: 6px;\r\n}\r\n.button-rounded::before {\r\n\ttop: -2px;\r\n\tright: -2px;\r\n\tbottom: -2px;\r\n\tleft: -2px;\r\n\tbackground: linear-gradient(to right, #1DB0DC, #23D0D3);\r\n}\r\n\r\n\/* Version Ghost \"simple\" *\/\r\n.button-ghost.button-rounded::after {\r\n\ttop: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tborder-radius: 4px;\r\n\tbackground: #FFF;\r\n}<\/code><\/pre>\n
C’est un peu capillotract\u00e9 comme m\u00e9thode, mais nous avons besoin de cela pour cr\u00e9er un bouton \u00ab\u00a0ghost\u00a0\u00bb avec d\u00e9grad\u00e9 et angles arrondis combin\u00e9s. D’autres m\u00e9thodes existent, mais celle-ci me semblait la plus simple.<\/p>\n
Le \u00ab\u00a0Big rounded\u00a0\u00bb<\/h4>\n
\"gradient-big-circle-button\"<\/p>\n
Et juste pour le fun, on peut aussi faire facilement ce genre de gros boutons, id\u00e9al pour des appels \u00e0 l’action uniques sur une page web. Je vous laisse regarder le code sur le CodePen ci-dessous, rien de vraiment nouveau par rapport \u00e0 tout ce que nous avons d\u00e9j\u00e0 vu.<\/p>\n
Des d\u00e9grad\u00e9s sur CodePen<\/a><\/p>\n
Bonnes exp\u00e9rimentations \u00e0 vous, et n’h\u00e9sitez par \u00e0 nous pr\u00e9senter vos r\u00e9alisations !<\/p>\n","protected":false},"excerpt":{"rendered":"
La mode des d\u00e9grad\u00e9s revient ces derniers temps. Depuis presque un an d\u00e9j\u00e0 les Long\/Big Gradients en fond d’\u00e9l\u00e9ments sont de mise, souvent en fond de page de votre application ou site web. Qu’ils soient lin\u00e9aires, radiaux ou compl\u00e8tement abstraits, je vous pr\u00e9sente quelques id\u00e9es d’utilisation et le code CSS qui va avec, gr\u00e2ce \u00e0 […]<\/p>\n","protected":false},"author":4,"featured_media":6052,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[17,9,11],"tags":[250,33,749],"coauthors":[597],"class_list":["post-5363","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","category-tutoriels","category-veille-graphique","tag-couleurs","tag-design","tag-tendances"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/5363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=5363"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/5363\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/6052"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=5363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=5363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=5363"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=5363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}