{"id":1171,"date":"2023-04-14T16:52:03","date_gmt":"2023-04-14T15:52:03","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=1171"},"modified":"2023-04-14T16:52:03","modified_gmt":"2023-04-14T15:52:03","slug":"texte-degrade-css","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2023\/04\/14\/texte-degrade-css\/","title":{"rendered":"Un texte en d\u00e9grad\u00e9 avec CSS3"},"content":{"rendered":"\n<p>Comme indiqu\u00e9 \u00e0 la fin de mon gloubi tuto sur le <a href=\"https:\/\/geekcommunicant.com\/blog\/2022\/12\/09\/gloubi-tuto-texte-degrade\/\" data-type=\"post\" data-id=\"991\">texte en d\u00e9grad\u00e9<\/a>, il est maintenant possible d&rsquo;obtenir un r\u00e9sultat similaire uniquement avec CSS3.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Les techniques CSS utilis\u00e9es<\/h2>\n\n\n\n<p>Pour r\u00e9aliser un texte en d\u00e9grad\u00e9 avec CSS3, on utilise deux techniques : les d\u00e9grad\u00e9s et le d\u00e9coupage d&rsquo;arri\u00e8re-plan (propri\u00e9t\u00e9 CSS <code><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/background-clip\" target=\"_blank\" rel=\"noreferrer noopener\">background-clip<\/a><\/code>).<\/p>\n\n\n\n<p>J&rsquo;ai d\u00e9j\u00e0 pr\u00e9sent\u00e9 ces deux techniques chacune dans un article d\u00e9di\u00e9 :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/geekcommunicant.com\/blog\/2022\/12\/23\/degrades-css\/\" data-type=\"post\" data-id=\"1011\" target=\"_blank\" rel=\"noreferrer noopener\">les d\u00e9grad\u00e9 en CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/geekcommunicant.com\/blog\/2023\/01\/13\/gloubi-script-texte-arriere-plan-defilant\/\" data-type=\"post\" data-id=\"1074\" target=\"_blank\" rel=\"noreferrer noopener\">texte avec un arri\u00e8re-plan d\u00e9filant<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Fusion !<\/h2>\n\n\n\n<p>Il est maintenant temps de rassembler ces deux techniques.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Premi\u00e8rement, voyons le HTML (tr\u00e8s simple) :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;span class=&quot;gradient_text&quot;&gt;Texte en d\u00e9grad\u00e9&lt;\/span&gt;\n<\/pre><\/div>\n\n\n<p>Concernant le CSS, ce n&rsquo;est pas plus compliqu\u00e9 que ce qui a d\u00e9j\u00e0 \u00e9t\u00e9 pr\u00e9sent\u00e9 pr\u00e9c\u00e9demment.<\/p>\n\n\n\n<p>D&rsquo;abord, on d\u00e9fini le d\u00e9grad\u00e9 :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; gutter: false; title: ; notranslate\" title=\"\">\nbackground: linear-gradient(90deg,#ff0000 0%, #ffb200 25%, #aaffc3 50%, #00e3ff 75%, #0000ff 100%);\n<\/pre><\/div>\n\n\n<p>Et ensuite on fait en sorte que cet arri\u00e8re-plan ne soit visible qu&rsquo;\u00e0 travers notre texte :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; gutter: false; title: ; notranslate\" title=\"\">\n-webkit-background-clip: text;\nbackground-clip: text;\ncolor: #0000;\n<\/pre><\/div>\n\n\n<p>Ce qui donne :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; gutter: false; title: ; notranslate\" title=\"\">\n.gradient_text {\n    background: linear-gradient(90deg,#ff0000 0%, #ffb200 25%, #aaffc3 50%, #00e3ff 75%, #0000ff 100%);\n    -webkit-background-clip: text;\n    background-clip: text;\n    color: #0000;\n}\n<\/pre><\/div>\n\n\n<p>R\u00e9sultat final :<\/p>\n\n\n\n<span class=\"gradient_text\">Le petit bonhomme en mousse<\/span>\n<style type=\"text\/css\">\n    .gradient_text {\n        background: linear-gradient(90deg,#ff0000 0%, #ffb200 25%, #aaffc3 50%, #00e3ff 75%, #0000ff 100%);\n        -webkit-background-clip: text;\n        background-clip: text;\n        color: #0000;\n    }\n<\/style>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Et voil\u00e0, vous \u00eates maintenant capable de cr\u00e9er un texte en d\u00e9grad\u00e9 avec seulement quelques lignes de CSS.<\/p>\n\n\n\n<p>\u00c0 bient\u00f4t pour d&rsquo;autres articles \u00e0 caract\u00e8re informatif.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Comme indiqu\u00e9 \u00e0 la fin de mon gloubi tuto sur le texte en d\u00e9grad\u00e9, il est maintenant possible d&rsquo;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 &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2023\/04\/14\/texte-degrade-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":[],"class_list":["post-1171","post","type-post","status-publish","format-standard","hentry","category-css"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-iT","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1011,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/23\/degrades-css\/","url_meta":{"origin":1171,"position":0},"title":"Les d\u00e9grad\u00e9s en CSS","author":"geekc","date":"23\/12\/2022","format":false,"excerpt":"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 de style. Il existe en CSS 3 types de d\u00e9grad\u00e9s\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":1171,"position":1},"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":230,"url":"https:\/\/geekcommunicant.com\/blog\/2013\/08\/22\/et-maintenant-ajoutons-quelques-couleurs\/","url_meta":{"origin":1171,"position":2},"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":991,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/09\/gloubi-tuto-texte-degrade\/","url_meta":{"origin":1171,"position":3},"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":1184,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/04\/28\/animer-variables-css\/","url_meta":{"origin":1171,"position":4},"title":"Animer les variables CSS","author":"geekc","date":"28\/04\/2023","format":false,"excerpt":"La semaine derni\u00e8re j'ai rapidement mentionn\u00e9 qu'il \u00e9tait maintenant possible d'animer les variables CSS. L'utilit\u00e9 des variables CSS Les variables CSS (\u00e9galement appel\u00e9es \"propri\u00e9tes personnalis\u00e9es\") permettent de stocker des valeurs sp\u00e9cifiques. Et ces valeurs peuvent \u00eatre modifi\u00e9es par des \u00e9v\u00e9nement JS ou des pseudos classes CSS (comme par exemple :hover).\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":1171,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1171","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=1171"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1171\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=1171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=1171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=1171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}