{"id":1011,"date":"2022-12-23T18:35:12","date_gmt":"2022-12-23T17:35:12","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=1011"},"modified":"2022-12-23T18:35:13","modified_gmt":"2022-12-23T17:35:13","slug":"degrades-css","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/23\/degrades-css\/","title":{"rendered":"Les d\u00e9grad\u00e9s en CSS"},"content":{"rendered":"\n<p>Comme sous-entendu dans un pr\u00e9c\u00e9dent <a href=\"https:\/\/geekcommunicant.com\/blog\/2022\/12\/09\/gloubi-tuto-texte-degrade\/\" data-type=\"post\" data-id=\"991\">gloubi tuto<\/a>, il est maintenant possible avec CSS3 de cr\u00e9er des d\u00e9grad\u00e9s de couleurs.<\/p>\n\n\n\n<p>Pour CSS, les d\u00e9grad\u00e9s sont consid\u00e9r\u00e9s comme des images, et donc doivent \u00eatre utilis\u00e9s dans l\u2019attribut <code>background<\/code> ou <code>background-image<\/code> d\u2019une d\u00e9claration de style.<\/p>\n\n\n\n<p>Il existe en CSS 3 types de d\u00e9grad\u00e9s :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>les d\u00e9grad\u00e9s lin\u00e9aires : les couleurs sont \u00e9tal\u00e9es le long d\u2019un axe<\/li>\n\n\n\n<li>les d\u00e9grad\u00e9s radiaux : les couleurs sont \u00e9tal\u00e9es depuis un point dans deux axes<\/li>\n\n\n\n<li>les d\u00e9grad\u00e9s coniques : les couleurs sont \u00e9tal\u00e9es autour d\u2019un cercle<\/li>\n<\/ul>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Les d\u00e9grad\u00e9s lin\u00e9aires<\/h2>\n\n\n\n<p>Les d\u00e9grad\u00e9s lin\u00e9aires sont d\u00e9finis \u00e0 l\u2019aide de la fonction CSS <code><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/gradient\/linear-gradient\" target=\"_blank\" rel=\"noreferrer noopener\">linear-gradient()<\/a><\/code>.<\/p>\n\n\n\n<p>L\u2019utilisation basique consiste \u00e0 juste indiquer les diff\u00e9rentes couleurs \u00e0 \u00e9taler : <code>linear-gradient(purple, blue, green, yellow, orange, red)<\/code>.<\/p>\n\n\n\n<p>Appliqu\u00e9 sur une <code>&lt;div&gt;<\/code>, cela donne :<\/p>\n\n\n\n<div id=\"basic_linear\" class=\"gradient\"><\/div>\n<style type=\"text\/css\">\n.gradient {\nwidth: 500px;\nheight: 100px;\n}\n#basic_linear {\nbackground: linear-gradient(purple, blue, green, yellow, orange, red);\n}\n<\/style>\n\n\n\n<div style=\"height:1.63em\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Comme vous pouvez le voir, par d\u00e9faut, les couleurs sont \u00e9tal\u00e9es du haut vers le bas de l\u2019\u00e9l\u00e9ment sur lequel le d\u00e9grad\u00e9 est utilis\u00e9.<\/p>\n\n\n\n<p>Il est possible d\u2019indiquer un angle ou des mots-cl\u00e9s pour changer la direction du d\u00e9grad\u00e9, la rotation se faisant par rapport au centre de l\u2019\u00e9l\u00e9ment.<\/p>\n\n\n\n<div><code>linear-gradient(to left, purple, blue, green, yellow, orange, red)<\/code><\/div>\n<div class=\"gradient\" id=\"to_left_linear\"><\/div>\n<div style=\"margin-top: 1.625em;\"><code>linear-gradient(70deg, purple, blue, green, yellow, orange, red)<\/code><\/div>\n<div class=\"gradient\" id=\"deg70_linear\"><\/div>\n<style type=\"text\/css\">\n#to_left_linear {\nbackground: linear-gradient(to left, purple, blue, green, yellow, orange, red);\n}\n#deg70_linear {\nbackground: linear-gradient(70deg, purple, blue, green, yellow, orange, red);\n}\n<\/style>\n\n\n\n<div style=\"height:1.63em\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Les d\u00e9grad\u00e9s radiaux<\/h2>\n\n\n\n<p>Les d\u00e9grad\u00e9s radiaux sont d\u00e9finis \u00e0 l\u2019aide de la fonction CSS <code><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/gradient\/radial-gradient\" target=\"_blank\" rel=\"noreferrer noopener\">radial-gradient()<\/a><\/code>.<\/p>\n\n\n\n<p>Comme pour les d\u00e9grad\u00e9s lin\u00e9aires, l\u2019utilisation basique consiste \u00e0 simplement indiquer les diff\u00e9rentes couleurs \u00e0 utiliser : <code>radial-gradient(purple, blue, green, yellow, orange, red)<\/code>.<\/p>\n\n\n\n<p>Appliqu\u00e9 sur une <code>&lt;div&gt;<\/code>, cela donne :<\/p>\n\n\n\n<div id=\"basic_radial\" class=\"gradient\"><\/div>\n<style type=\"text\/css\">\n#basic_radial {\nbackground: radial-gradient(purple, blue, green, yellow, orange, red);\n}\n<\/style>\n\n\n\n<div style=\"height:1.63em\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Par d\u00e9faut, un d\u00e9grad\u00e9 radial adopte la forme d\u2019une ellipse, centr\u00e9e au centre de l\u2019\u00e9l\u00e9ment sur lequel le d\u00e9grad\u00e9 est appliqu\u00e9.<\/p>\n\n\n\n<p>Tout comme les d\u00e9grad\u00e9s lin\u00e9aires, il est possible de modifier ce comportement de base \u00e0 l\u2019aide de mots-cl\u00e9s. Ces mots-cl\u00e9s permettent de changer la forme du d\u00e9grad\u00e9 en cercle, ainsi que d\u00e9finir son centre et la mani\u00e8re dont il s\u2019\u00e9tale par rapport aux coins et c\u00f4t\u00e9s de l\u2019\u00e9l\u00e9ment.<\/p>\n\n\n\n<div><code>radial-gradient(circle at 10% 20%, purple,blue, green, yellow, orange, red)<\/code><\/div>\n<div class=\"gradient\" id=\"circle_10_20_radial\"><\/div>\n<div style=\"margin-top: 1.625em;\"><code>radial-gradient(closest-side at 50% 25%, purple, blue, green, yellow, orange, red)<\/code><\/div>\n<div class=\"gradient\" id=\"closest_side_50_25_radial\"><\/div>\n<style type=\"text\/css\">\n#circle_10_20_radial {\nbackground: radial-gradient(circle at 10% 20%, purple, blue, green, yellow, orange, red);\n}\n#closest_side_50_25_radial {\nbackground: radial-gradient(closest-side at 50% 25%, purple, blue, green, yellow, orange, red);\n}\n<\/style>\n\n\n\n<div style=\"height:1.63em\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<!--nextpage-->\n\n\n\n<h2 class=\"wp-block-heading\">Les d\u00e9grad\u00e9s coniques<\/h2>\n\n\n\n<p>Les d\u00e9grad\u00e9s coniques sont d\u00e9finis \u00e0 l\u2019aide de la fonction CSS <code><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/gradient\/conic-gradient\" target=\"_blank\" rel=\"noreferrer noopener\">conic-gradient()<\/a><\/code>.<\/p>\n\n\n\n<p>Comme pour les autres types de d\u00e9grad\u00e9s, l\u2019utilisation simple consiste \u00e0 indiquer uniquement les couleurs \u00e0 utiliser : <code>conic-gradient(purple, blue, green, yellow, orange, red)<\/code>.<\/p>\n\n\n\n<p>Cela donne ce r\u00e9sultat :<\/p>\n\n\n\n<div class=\"gradient\" id=\"basic_conic\"><\/div>\n<style type=\"text\/css\">\n.gradient {\nwidth: 500px;\nheight: 100px;\n}\n#basic_conic {\nbackground: conic-gradient(purple, blue, green, yellow, orange, red);\n}\n<\/style>\n\n\n\n<div style=\"height:1.63em\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Par d\u00e9faut un d\u00e9grad\u00e9 conique est centr\u00e9 au milieu de l\u2019\u00e9l\u00e9ment sur lequel il est appliqu\u00e9, et d\u00e9marre de 0\u00b0 (au milieu du c\u00f4t\u00e9 sup\u00e9rieur). Le centre ainsi que l\u2019angle de d\u00e9part peuvent bien entendu \u00eatre modifi\u00e9s.<\/p>\n\n\n\n<div><code>conic-gradient(at 25% 75%, purple, blue, green, yellow, orange, red)<\/code><\/div>\n<div class=\"gradient\" id=\"at25_75_conic\"><\/div>\n<div style=\"margin-top: 1.625em;\"><code>conic-gradient(from 38deg, purple, blue, green, yellow, orange, red)<\/code><\/div>\n<div class=\"gradient\" id=\"deg38_conic\"><\/div>\n<style type=\"text\/css\">\n#at25_75_conic {\nbackground: conic-gradient(at 25% 75%, purple, blue, green, yellow, orange, red);\n}\n#deg38_conic {\nbackground: conic-gradient(from 38deg, purple, blue, green, yellow, orange, red);\n}\n<\/style>\n\n\n\n<div style=\"height:1.63em\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Plus de personnalisation<\/h2>\n\n\n\n<p>Par d\u00e9faut, sur tous les types de d\u00e9grad\u00e9s, les diff\u00e9rentes couleurs sont r\u00e9parties de mani\u00e8re \u00e9quidistante le long du\/des axe(s) du d\u00e9grad\u00e9.<\/p>\n\n\n\n<p>Il est possible d\u2019indiquer pr\u00e9cis\u00e9ment la position des arr\u00eats de couleurs, en diff\u00e9rentes unit\u00e9s (px, %&#8230;), le long du d\u00e9grad\u00e9.<\/p>\n\n\n\n<div><code>linear-gradient(to right, red 25%, green 75%, blue)<\/code><\/div>\n<div class=\"gradient\" id=\"linear_place\"><\/div>\n<style type=\"text\/css\">\n#linear_place {\nbackground: linear-gradient(to right, red 25%, green 75%, blue);\n}\n<\/style>\n\n\n\n<div style=\"height:1.63em\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>La mani\u00e8re dont se passe la transition entre deux arr\u00eats de couleur est \u00e9galement modifiable en indiquant la position \u00e0 laquelle doit se trouver le milieu de cette transition, par rapport \u00e0 l&rsquo;ensemble du d\u00e9grad\u00e9. Par d\u00e9faut, le milieu de transition se trouve \u00e0 mi-chemin entre deux arr\u00eats de couleur.<\/p>\n\n\n\n<div><code>linear-gradient(to right, red, 15%, green, 95%, blue)<\/code><\/div>\n<div class=\"gradient\" id=\"linear_trans\"><\/div>\n<style type=\"text\/css\">\n#linear_trans {\nbackground: linear-gradient(to right, red, 15%, green, 95%, blue);\n}\n<\/style>\n\n\n\n<div style=\"height:1.63em\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>J&rsquo;esp\u00e8re que comme d&rsquo;habitude mon article vous a \u00e9t\u00e9 utile et que vous \u00eates maintenant devenus des pros des d\u00e9grad\u00e9s CSS ;-)<\/p>\n\n\n\n<p>Si vous voulez creuser un peu plus le sujet, je vous recommande la partie traitant des d\u00e9grad\u00e9s CSS sur <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/gradient\" target=\"_blank\">MDN Web Docs<\/a> (en anglais), qui m&rsquo;a servi de r\u00e9f\u00e9rence pour r\u00e9diger le pr\u00e9sent article.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Comme sous-entendu dans un pr\u00e9c\u00e9dent gloubi tuto, il est maintenant possible avec CSS3 de cr\u00e9er des d\u00e9grad\u00e9s de couleurs. Pour CSS, les d\u00e9grad\u00e9s sont consid\u00e9r\u00e9s comme des images, et donc doivent \u00eatre utilis\u00e9s dans l\u2019attribut background ou background-image d\u2019une d\u00e9claration &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2022\/12\/23\/degrades-css\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[53],"tags":[30,29],"class_list":["post-1011","post","type-post","status-publish","format-standard","hentry","category-css","tag-css","tag-html"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-gj","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":230,"url":"https:\/\/geekcommunicant.com\/blog\/2013\/08\/22\/et-maintenant-ajoutons-quelques-couleurs\/","url_meta":{"origin":1011,"position":0},"title":"[JavaScript\/HTML5] Et maintenant ajoutons quelques couleurs","author":"geekc","date":"22\/08\/2013","format":false,"excerpt":"Dans mon pr\u00e9c\u00e9dent article Amusons-nous avec les canvas, nous \u00e9tions arriv\u00e9s au r\u00e9sultat ci-dessous: Nous avons donc ici un effet que l'on aurait pu obtenir en CSS. Mais gr\u00e2ce aux <canvas> nous pouvons \u00e0 pr\u00e9sent remplir notre texte avec autre chose qu'une unique couleur ; avec les <canvas> on peut\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1171,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/04\/14\/texte-degrade-css\/","url_meta":{"origin":1011,"position":1},"title":"Un texte en d\u00e9grad\u00e9 avec CSS3","author":"geekc","date":"14\/04\/2023","format":false,"excerpt":"Comme indiqu\u00e9 \u00e0 la fin de mon gloubi tuto sur le texte en d\u00e9grad\u00e9, il est maintenant possible d'obtenir un r\u00e9sultat similaire uniquement avec CSS3. Les techniques CSS utilis\u00e9es Pour r\u00e9aliser un texte en d\u00e9grad\u00e9 avec CSS3, on utilise deux techniques : les d\u00e9grad\u00e9s et le d\u00e9coupage d'arri\u00e8re-plan (propri\u00e9t\u00e9 CSS\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1175,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/04\/21\/animer-degrade-css\/","url_meta":{"origin":1011,"position":2},"title":"Animer un d\u00e9grad\u00e9 en CSS","author":"geekc","date":"21\/04\/2023","format":false,"excerpt":"La semaine derni\u00e8re je vous ai pr\u00e9sent\u00e9 comment cr\u00e9er un texte en d\u00e9grad\u00e9 avec uniquement du CSS. Aujourd'hui je vais vous montrer comment animer ce d\u00e9grad\u00e9 au survol de la souris. Le principe L'\u00e9l\u00e9ment sur lequel on veut placer un d\u00e9grad\u00e9 ne laisse voir qu'une partie de ce d\u00e9grad\u00e9, et\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1085,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/27\/gloubi-tuto-texte-changeant-couleur\/","url_meta":{"origin":1011,"position":3},"title":"Gloubi tuto &#8211; texte changeant de couleur","author":"geekc","date":"27\/01\/2023","format":false,"excerpt":"Cette fois-ci encore, j\u2019ai d\u00e9cid\u00e9 de m\u2019attaquer \u00e0 un autre gloubi script d\u2019effet sur texte, le texte changeant de couleur. Une fois de plus, d\u00fb \u00e0 l\u2019\u00e9volution des technologies, plus besoin de JavaScript pour obtenir un r\u00e9sultat identique (ou en tout cas tr\u00e8s proche). Fonctionnement du script On indique au\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":991,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/09\/gloubi-tuto-texte-degrade\/","url_meta":{"origin":1011,"position":4},"title":"Gloubi tuto &#8211; un texte en d\u00e9grad\u00e9","author":"geekc","date":"09\/12\/2022","format":false,"excerpt":"Pour ce deuxi\u00e8me gloubi tuto, on s\u2019attaque \u00e0 un script qui a eu son petit succ\u00e8s sur Skyblog\u00a0: le texte \u00ab\u00a0arc-en-ciel\u00a0\u00bb (en d\u00e9grad\u00e9s). Script original et explication Pour voir le script original, qui fonctionne encore dans les navigateurs modernes, rendez-vous ici sur le site de notre N\u00e9m\u00e9sis dans la deuxi\u00e8me\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":10,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/06\/un-dancefloor-en-jquery\/","url_meta":{"origin":1011,"position":5},"title":"Un dancefloor en jQuery","author":"geekc","date":"06\/09\/2012","format":false,"excerpt":"Aujourd'hui, je vais vous expliquer comment cr\u00e9er en jQuery un effet de dancefloor \u00e0 la Saturday Night Fever (demo). Tout d'abord, de quoi est compos\u00e9 un tel \u00ab plancher de danse \u00bb ? Tout simplement de diff\u00e9rents carr\u00e9s\/cases, le tout contenu dans une surface d\u00e9finie. Ici le dancefloor sera une\u2026","rel":"","context":"Dans &quot;jQuery&quot;","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1011","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=1011"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1011\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=1011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=1011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=1011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}