{"id":1175,"date":"2023-04-21T17:18:01","date_gmt":"2023-04-21T16:18:01","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=1175"},"modified":"2023-04-21T17:21:11","modified_gmt":"2023-04-21T16:21:11","slug":"animer-degrade-css","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2023\/04\/21\/animer-degrade-css\/","title":{"rendered":"Animer un d\u00e9grad\u00e9 en CSS"},"content":{"rendered":"\n<p>La semaine derni\u00e8re je vous ai pr\u00e9sent\u00e9 comment <a href=\"https:\/\/geekcommunicant.com\/blog\/2023\/04\/14\/texte-degrade-css\/\" data-type=\"post\" data-id=\"1171\">cr\u00e9er un texte en d\u00e9grad\u00e9<\/a> avec uniquement du CSS. Aujourd&rsquo;hui je vais vous montrer comment animer ce d\u00e9grad\u00e9 au survol de la souris.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Le principe<\/h2>\n\n\n\n<p>L&rsquo;\u00e9l\u00e9ment sur lequel on veut placer un d\u00e9grad\u00e9 ne laisse voir qu&rsquo;une partie de ce d\u00e9grad\u00e9, et on bouge le d\u00e9grad\u00e9 au survol de la souris.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Le code<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; gutter: false; title: ; quick-code: false; notranslate\" title=\"\">\n.gradient-text {\n    cursor: default;\n    \n    \/* On cr\u00e9\u00e9 un d\u00e9grad\u00e9 radial centr\u00e9 dans le fond *\/\n    background:radial-gradient(circle at 50% 50%, yellow, orange, red);\n\n    \/* \n        On fait en sorte que le degrad\u00e9 soit 2x plus large que le conteneur,\n        et on le cale \u00e0 droite\n    *\/\n    background-size: 200% 100%;\n    background-position: 100% 50%;\n    \n    background-clip: text; \n    -webkit-background-clip: text;\n    color: #0000;\n    \n    font-weight: bold;\n    font-size: 2em;\n    \n    \/* Pour une transition plus douce *\/\n    transition: background-position 2s;\n}\n\n.gradient-text:hover {\n    background-position: 0% 50%;\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">R\u00e9sultat<\/h2>\n\n\n\n<p><span class=\"gradient-text\">Le petit bonhomme en mousse<\/span><\/p>\n<style type=\"text\/css\">\n.gradient-text {\n    cursor: default;\n    background:radial-gradient(circle at 50% 50%, yellow, orange, red);\n    background-size: 200% 100%;\n    background-position: 100% 50%;\n    background-clip: text; \n    -webkit-background-clip: text;\n    color: #0000;\n    font-weight: bold;\n    font-size: 2em;\n    transition: background-position 2s;\n}\n\n.gradient-text:hover {\n    background-position: 0% 50%;\n}\n<\/style>\n\n\n\n<p>Notez qu&rsquo;il existe plusieurs m\u00e9thodes pour animer des d\u00e9grad\u00e9s. La m\u00e9thode pr\u00e9sent\u00e9e ici est ancienne.<\/p>\n\n\n\n<p>En effet, il est maintenant possible d&rsquo;animer des <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/Using_CSS_custom_properties\" target=\"_blank\" rel=\"noreferrer noopener\">variables CSS<\/a> en les d\u00e9clarant avec la notation <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/@property\" target=\"_blank\" rel=\"noreferrer noopener\">@property<\/a>, ce qui permet, par exemple, de n&rsquo;animer que la position x d&rsquo;un d\u00e9grad\u00e9.<\/p>\n\n\n\n<p>Cette notation n&rsquo;est actuellement compatibles qu&rsquo;avec les navigateurs de la famille Chromium et Safari. Mon petit coeur de fan de Firefox esp\u00e8re que cela sera rapidement impl\u00e9ment\u00e9&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La semaine derni\u00e8re je vous ai pr\u00e9sent\u00e9 comment cr\u00e9er un texte en d\u00e9grad\u00e9 avec uniquement du CSS. Aujourd&rsquo;hui je vais vous montrer comment animer ce d\u00e9grad\u00e9 au survol de la souris. Le principe L&rsquo;\u00e9l\u00e9ment sur lequel on veut placer un &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2023\/04\/21\/animer-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":[59],"class_list":["post-1175","post","type-post","status-publish","format-standard","hentry","category-css","tag-animation"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-iX","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1184,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/04\/28\/animer-variables-css\/","url_meta":{"origin":1175,"position":0},"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":1011,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/23\/degrades-css\/","url_meta":{"origin":1175,"position":1},"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":1171,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/04\/14\/texte-degrade-css\/","url_meta":{"origin":1175,"position":2},"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":230,"url":"https:\/\/geekcommunicant.com\/blog\/2013\/08\/22\/et-maintenant-ajoutons-quelques-couleurs\/","url_meta":{"origin":1175,"position":3},"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":1081,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/20\/gloubi-tuto-menu-images-reactives\/","url_meta":{"origin":1175,"position":4},"title":"Gloubi tuto &#8211; menu avec images r\u00e9actives","author":"geekc","date":"20\/01\/2023","format":false,"excerpt":"Nouvelle semaine, nouveau gloubi-tuto. Cette fois-ci, on s\u2019attaque \u00e0 un autre script de menu. M\u2019enfin script\u2026 pas cette-fois. M\u00eame si sur gloubiweb cela est pr\u00e9sent\u00e9 comme un script, il s\u2019agit en fait de CSS. Ce menu, qui est visible sur cette page, utilise la technique des sprites CSS. Pr\u00e9sentation de\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":40,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/26\/un-effet-de-porte-en-jquery\/","url_meta":{"origin":1175,"position":5},"title":"Un effet de porte en jQuery","author":"geekc","date":"26\/09\/2012","format":false,"excerpt":"Aujourd'hui nous allons voir comment cr\u00e9er en jQuery et jQuery UI un effet de porte, avec l'image se s\u00e9parant en 4 par les coins, r\u00e9v\u00e9lant ainsi un texte. Avant tout, il faut comprendre comment s'organiseront les diff\u00e9rentes couches: \u00e0 la base, on trouve la couche contenant le texte (z-index: 0)juste\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\/1175","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=1175"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1175\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=1175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=1175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=1175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}