D\u00e9grad\u00e9 Lin\u00e9aire (linear-gradient) en CSS – Tutoriel<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n\n<body>\n \n <p><strong>Le d\u00e9grad\u00e9 lin\u00e9aire en CSS<\/strong> est un outil puissant pour cr\u00e9er des arri\u00e8re-plans attrayants et dynamiques sur les sites web. Apprendre \u00e0 utiliser la propri\u00e9t\u00e9 <strong>linear-gradient<\/strong> de mani\u00e8re efficace peut transformer l’apparence visuelle de vos projets. D\u00e9couvrons ensemble comment cela fonctionne et comment l’impl\u00e9menter \u00e0 travers des exemples pratiques de code.<\/p>\n \n\n \n <h2 class=\"wp-block-heading\">Introduction au <strong>D\u00e9grad\u00e9 Lin\u00e9aire en CSS<\/strong><\/h2>\n \n\n \n <div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n <iframe src=\"https:\/\/player.vimeo.com\/video\/586651749?dnt=1&fullscreen=0&pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n\n \n <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n <\/div>\n\n \n <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n var iframe = document.getElementById('vimeoPlayer');\n var player = new Vimeo.Player(iframe);\n var isPopupDisplayed = false;\n\n player.on('play', function () {\n if (!isPopupDisplayed) {\n player.on('timeupdate', function (data) {\n if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n \/\/ Pause the video and display the popup\n player.pause().then(function () {\n if (window.innerWidth > 768) {\n document.querySelector('.desktop-popup').style.display = 'block';\n } else {\n document.querySelector('.mobile-popup').style.display = 'block';\n }\n fetchPriceAndUpdatePopup();\n isPopupDisplayed = true;\n });\n }\n });\n }\n });\n\n function fetchPriceAndUpdatePopup() {\n fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n .then(response => response.text())\n .then(html => {\n var parser = new DOMParser();\n var fetchedDoc = parser.parseFromString(html, 'text\/html');\n var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n document.getElementById('price').textContent = price;\n document.getElementById('priceMobile').textContent = price;\n document.querySelector('.desktop-popup del').textContent = originalPrice;\n document.querySelector('.mobile-popup del').textContent = originalPrice;\n })\n .catch(error => console.error('Error fetching the price:', error));\n }\n\n function closePopup() {\n document.querySelector('.desktop-popup').style.display = 'none';\n document.querySelector('.mobile-popup').style.display = 'none';\n player.play(); \/\/ Allows resuming the video only after closing the popup\n }\n });\n <\/script>\n \n\n \n <p>Un d\u00e9grad\u00e9 lin\u00e9aire en CSS est un gradient qui se transforme de mani\u00e8re fluide d’une couleur \u00e0 une autre le long d’une ligne droite. Vous pouvez contr\u00f4ler les couleurs, la direction, les points de d\u00e9part et d’arriv\u00e9e pour cr\u00e9er des effets visuels uniques. Voici comment commencer \u00e0 utiliser la propri\u00e9t\u00e9 <code>linear-gradient<\/code> pour ajouter ces effets \u00e0 vos projets.<\/p>\n \n\n \n <h3 class=\"wp-block-heading\">Syntaxe de Base de <code>linear-gradient<\/code><\/h3>\n \n\n \n <p>La syntaxe de base pour cr\u00e9er un d\u00e9grad\u00e9 lin\u00e9aire en CSS est la suivante :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>background: linear-gradient(direction, color-stop1, color-stop2, ...);<\/code><\/pre>\n \n\n \n <p>Voici un exemple simple :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>background: linear-gradient(to right, red, blue);<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">D\u00e9finir la Direction du D\u00e9grad\u00e9<\/h3>\n \n\n \n <p>La premi\u00e8re valeur dans <code>linear-gradient<\/code> est la direction du d\u00e9grad\u00e9. Vous pouvez sp\u00e9cifier des mots cl\u00e9s comme <code>to right<\/code>, <code>to left<\/code>, <code>to top<\/code>, <code>to bottom<\/code>, ou des angles. Par exemple :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>background: linear-gradient(45deg, red, blue);<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Ajouter des Points de Couleur Dans le D\u00e9grad\u00e9<\/h3>\n \n\n \n <p>Vous pouvez ajouter plusieurs points de couleur dans votre d\u00e9grad\u00e9 pour cr\u00e9er des transitions complexes. Chaque point de couleur est sp\u00e9cifi\u00e9 avec une couleur et une position facultative. Par exemple :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>background: linear-gradient(to right, red, yellow 25%, green 50%, blue 75%, violet);<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Exemples de D\u00e9grad\u00e9s Lin\u00e9aires en Acte<\/h3>\n \n\n \n <p>Voyons maintenant quelques exemples concrets de d\u00e9grad\u00e9s lin\u00e9aires que vous pouvez utiliser directement dans vos projets CSS.<\/p>\n \n\n \n <h4 class=\"wp-block-heading\">D\u00e9grad\u00e9 Horizontal Basique<\/h4>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>body {\n background: linear-gradient(to right, red, blue);\n}<\/code><\/pre>\n \n\n \n <h4 class=\"wp-block-heading\">D\u00e9grad\u00e9 Vertical Multi-Couleurs<\/h4>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>body {\n background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);\n}<\/code><\/pre>\n \n\n \n <h4 class=\"wp-block-heading\">D\u00e9grad\u00e9 Diagonal avec Points de Couleur<\/h4>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>body {\n background: linear-gradient(45deg, red, yellow 25%, green 50%, blue 75%, violet);\n}<\/code><\/pre>\n \n\n \n <h4 class=\"wp-block-heading\">D\u00e9grad\u00e9 R\u00e9p\u00e9titif<\/h4>\n \n\n \n <p>Pour cr\u00e9er des effets de bandes r\u00e9p\u00e9t\u00e9es, vous pouvez utiliser la fonction <code>repeating-linear-gradient<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>body {\n background: repeating-linear-gradient(\n to right,\n red 0%,\n red 10%,\n white 10%,\n white 20%\n );\n}<\/code><\/pre>\n\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser les D\u00e9grad\u00e9s Lin\u00e9aires pour Cr\u00e9er des Arri\u00e8re-Plans Dynamiques<\/h3>\n \n\n \n <p>Les d\u00e9grad\u00e9s lin\u00e9aires peuvent ajouter une dimension dynamique \u00e0 vos arri\u00e8re-plans, qu’il s’agisse d’incorporer des effets de survol, des animations, ou de cr\u00e9er des sections distinctives sur une page web. Voici un exemple d’arri\u00e8re-plan dynamique avec une animation de d\u00e9grad\u00e9 :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>@keyframes gradient {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}\n\nbody {\n background: linear-gradient(45deg, red, blue, yellow, green);\n background-size: 400% 400%;\n animation: gradient 15s ease infinite;\n}<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s Utilisant des D\u00e9grad\u00e9s Lin\u00e9aires<\/h3>\n \n\n \n <p>Poursuivons avec des exemples avanc\u00e9s o\u00f9 nous utilisons des d\u00e9grad\u00e9s lin\u00e9aires pour cr\u00e9er des mod\u00e8les plus complexes.<\/p>\n \n\n \n <h4 class=\"wp-block-heading\">Cr\u00e9ation d’un Drapeau avec des D\u00e9grad\u00e9s Lin\u00e9aires<\/h4>\n \n\n \n <p>Voici comment cr\u00e9er un drapeau tricolore en utilisant des d\u00e9grad\u00e9s lin\u00e9aires en CSS :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>.flag {\n width: 300px;\n height: 200px;\n background: linear-gradient(to right, blue 33.33%, white 33.33%, white 66.66%, red 66.66%);\n}<\/code><\/pre>\n \n\n \n <h4 class=\"wp-block-heading\">Cr\u00e9ation de Boutons avec des Effets de Survol D\u00e9grad\u00e9<\/h4>\n \n\n \n <p>Les d\u00e9grad\u00e9s lin\u00e9aires peuvent \u00e9galement \u00eatre utilis\u00e9s pour styliser les boutons avec des effets de survol attrayants :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>.gradient-button {\n padding: 10px 20px;\n border: none;\n color: white;\n background: linear-gradient(to right, cyan, blue);\n transition: background 0.5s;\n}\n\n.gradient-button:hover {\n background: linear-gradient(to right, blue, cyan);\n}<\/code><\/pre>\n \n\n \n <h4 class=\"wp-block-heading\">Utiliser des D\u00e9grad\u00e9s Lin\u00e9aires pour Cr\u00e9er des Effets de Texte<\/h4>\n \n\n \n <p>Vous pouvez appliquer des d\u00e9grad\u00e9s lin\u00e9aires au texte en utilisant la propri\u00e9t\u00e9 <code>-webkit-background-clip<\/code> et <code>color: transparent;<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>.gradient-text {\n font-size: 2em;\n background: linear-gradient(to right, red, blue);\n -webkit-background-clip: text;\n color: transparent;\n}<\/code><\/pre>\n \n\n \n <h2 class=\"wp-block-heading\">Conclusion<\/h2>\n \n\n \n <p>Les <strong>d\u00e9grad\u00e9s lin\u00e9aires en CSS<\/strong> sont des outils puissants pour enrichir visuellement vos projets web. En ma\u00eetrisant l’utilisation de la propri\u00e9t\u00e9 <code>linear-gradient<\/code>, vous pouvez cr\u00e9er des arri\u00e8re-plans dynamiques, des effets de survol personnalis\u00e9s, et des designs innovants. Continuez \u00e0 explorer les possibilit\u00e9s offertes par CSS pour d\u00e9couvrir de nouvelles techniques et am\u00e9liorer vos comp\u00e9tences. Pour plus de tutoriels sur CSS, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\">HTML5 et CSS3 de d\u00e9butant \u00e0 expert<\/a>. Pour apprendre \u00e0 cr\u00e9er des effets de texte avanc\u00e9s, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/effects-text-css\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n \n\n \n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-CSS3-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation CSS3 Offre 50%\" title=\"\"><\/a>\n \n\n \n <div class=\"internal-links\">\n <ul>\n <li><a href=\"https:\/\/wikiform","protected":false},"excerpt":{"rendered":"<p>D\u00e9grad\u00e9 Lin\u00e9aire (linear-gradient) en CSS – Tutoriel Le d\u00e9grad\u00e9 lin\u00e9aire en CSS est un outil puissant pour cr\u00e9er des arri\u00e8re-plans attrayants et dynamiques sur les…<\/p>\n","protected":false},"author":2,"featured_media":2722,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5403","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5403"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5403\/revisions"}],"predecessor-version":[{"id":5404,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5403\/revisions\/5404"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2722"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5403,"date":"2024-08-27T18:17:06","date_gmt":"2024-08-27T18:17:06","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/degrade-lineaire-css-linear-gradient\/"},"modified":"2024-08-27T18:17:09","modified_gmt":"2024-08-27T18:17:09","slug":"degrade-lineaire-css-linear-gradient","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/degrade-lineaire-css-linear-gradient\/","title":{"rendered":"7.8 D\u00e9grad\u00e9 Lin\u00e9aire en CSS : Utiliser linear-gradient"},"content":{"rendered":"\n\n\n\n \n \n \n D\u00e9grad\u00e9 Lin\u00e9aire (linear-gradient) en CSS – Tutoriel<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n\n<body>\n \n <p><strong>Le d\u00e9grad\u00e9 lin\u00e9aire en CSS<\/strong> est un outil puissant pour cr\u00e9er des arri\u00e8re-plans attrayants et dynamiques sur les sites web. Apprendre \u00e0 utiliser la propri\u00e9t\u00e9 <strong>linear-gradient<\/strong> de mani\u00e8re efficace peut transformer l’apparence visuelle de vos projets. D\u00e9couvrons ensemble comment cela fonctionne et comment l’impl\u00e9menter \u00e0 travers des exemples pratiques de code.<\/p>\n \n\n \n <h2 class=\"wp-block-heading\">Introduction au <strong>D\u00e9grad\u00e9 Lin\u00e9aire en CSS<\/strong><\/h2>\n \n\n \n <div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n <iframe src=\"https:\/\/player.vimeo.com\/video\/586651749?dnt=1&fullscreen=0&pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n\n \n <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n <\/div>\n\n \n <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n var iframe = document.getElementById('vimeoPlayer');\n var player = new Vimeo.Player(iframe);\n var isPopupDisplayed = false;\n\n player.on('play', function () {\n if (!isPopupDisplayed) {\n player.on('timeupdate', function (data) {\n if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n \/\/ Pause the video and display the popup\n player.pause().then(function () {\n if (window.innerWidth > 768) {\n document.querySelector('.desktop-popup').style.display = 'block';\n } else {\n document.querySelector('.mobile-popup').style.display = 'block';\n }\n fetchPriceAndUpdatePopup();\n isPopupDisplayed = true;\n });\n }\n });\n }\n });\n\n function fetchPriceAndUpdatePopup() {\n fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n .then(response => response.text())\n .then(html => {\n var parser = new DOMParser();\n var fetchedDoc = parser.parseFromString(html, 'text\/html');\n var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n document.getElementById('price').textContent = price;\n document.getElementById('priceMobile').textContent = price;\n document.querySelector('.desktop-popup del').textContent = originalPrice;\n document.querySelector('.mobile-popup del').textContent = originalPrice;\n })\n .catch(error => console.error('Error fetching the price:', error));\n }\n\n function closePopup() {\n document.querySelector('.desktop-popup').style.display = 'none';\n document.querySelector('.mobile-popup').style.display = 'none';\n player.play(); \/\/ Allows resuming the video only after closing the popup\n }\n });\n <\/script>\n \n\n \n <p>Un d\u00e9grad\u00e9 lin\u00e9aire en CSS est un gradient qui se transforme de mani\u00e8re fluide d’une couleur \u00e0 une autre le long d’une ligne droite. Vous pouvez contr\u00f4ler les couleurs, la direction, les points de d\u00e9part et d’arriv\u00e9e pour cr\u00e9er des effets visuels uniques. Voici comment commencer \u00e0 utiliser la propri\u00e9t\u00e9 <code>linear-gradient<\/code> pour ajouter ces effets \u00e0 vos projets.<\/p>\n \n\n \n <h3 class=\"wp-block-heading\">Syntaxe de Base de <code>linear-gradient<\/code><\/h3>\n \n\n \n <p>La syntaxe de base pour cr\u00e9er un d\u00e9grad\u00e9 lin\u00e9aire en CSS est la suivante :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>background: linear-gradient(direction, color-stop1, color-stop2, ...);<\/code><\/pre>\n \n\n \n <p>Voici un exemple simple :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>background: linear-gradient(to right, red, blue);<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">D\u00e9finir la Direction du D\u00e9grad\u00e9<\/h3>\n \n\n \n <p>La premi\u00e8re valeur dans <code>linear-gradient<\/code> est la direction du d\u00e9grad\u00e9. Vous pouvez sp\u00e9cifier des mots cl\u00e9s comme <code>to right<\/code>, <code>to left<\/code>, <code>to top<\/code>, <code>to bottom<\/code>, ou des angles. Par exemple :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>background: linear-gradient(45deg, red, blue);<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Ajouter des Points de Couleur Dans le D\u00e9grad\u00e9<\/h3>\n \n\n \n <p>Vous pouvez ajouter plusieurs points de couleur dans votre d\u00e9grad\u00e9 pour cr\u00e9er des transitions complexes. Chaque point de couleur est sp\u00e9cifi\u00e9 avec une couleur et une position facultative. Par exemple :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>background: linear-gradient(to right, red, yellow 25%, green 50%, blue 75%, violet);<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Exemples de D\u00e9grad\u00e9s Lin\u00e9aires en Acte<\/h3>\n \n\n \n <p>Voyons maintenant quelques exemples concrets de d\u00e9grad\u00e9s lin\u00e9aires que vous pouvez utiliser directement dans vos projets CSS.<\/p>\n \n\n \n <h4 class=\"wp-block-heading\">D\u00e9grad\u00e9 Horizontal Basique<\/h4>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>body {\n background: linear-gradient(to right, red, blue);\n}<\/code><\/pre>\n \n\n \n <h4 class=\"wp-block-heading\">D\u00e9grad\u00e9 Vertical Multi-Couleurs<\/h4>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>body {\n background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);\n}<\/code><\/pre>\n \n\n \n <h4 class=\"wp-block-heading\">D\u00e9grad\u00e9 Diagonal avec Points de Couleur<\/h4>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>body {\n background: linear-gradient(45deg, red, yellow 25%, green 50%, blue 75%, violet);\n}<\/code><\/pre>\n \n\n \n <h4 class=\"wp-block-heading\">D\u00e9grad\u00e9 R\u00e9p\u00e9titif<\/h4>\n \n\n \n <p>Pour cr\u00e9er des effets de bandes r\u00e9p\u00e9t\u00e9es, vous pouvez utiliser la fonction <code>repeating-linear-gradient<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>body {\n background: repeating-linear-gradient(\n to right,\n red 0%,\n red 10%,\n white 10%,\n white 20%\n );\n}<\/code><\/pre>\n\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser les D\u00e9grad\u00e9s Lin\u00e9aires pour Cr\u00e9er des Arri\u00e8re-Plans Dynamiques<\/h3>\n \n\n \n <p>Les d\u00e9grad\u00e9s lin\u00e9aires peuvent ajouter une dimension dynamique \u00e0 vos arri\u00e8re-plans, qu’il s’agisse d’incorporer des effets de survol, des animations, ou de cr\u00e9er des sections distinctives sur une page web. Voici un exemple d’arri\u00e8re-plan dynamique avec une animation de d\u00e9grad\u00e9 :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>@keyframes gradient {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}\n\nbody {\n background: linear-gradient(45deg, red, blue, yellow, green);\n background-size: 400% 400%;\n animation: gradient 15s ease infinite;\n}<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s Utilisant des D\u00e9grad\u00e9s Lin\u00e9aires<\/h3>\n \n\n \n <p>Poursuivons avec des exemples avanc\u00e9s o\u00f9 nous utilisons des d\u00e9grad\u00e9s lin\u00e9aires pour cr\u00e9er des mod\u00e8les plus complexes.<\/p>\n \n\n \n <h4 class=\"wp-block-heading\">Cr\u00e9ation d’un Drapeau avec des D\u00e9grad\u00e9s Lin\u00e9aires<\/h4>\n \n\n \n <p>Voici comment cr\u00e9er un drapeau tricolore en utilisant des d\u00e9grad\u00e9s lin\u00e9aires en CSS :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>.flag {\n width: 300px;\n height: 200px;\n background: linear-gradient(to right, blue 33.33%, white 33.33%, white 66.66%, red 66.66%);\n}<\/code><\/pre>\n \n\n \n <h4 class=\"wp-block-heading\">Cr\u00e9ation de Boutons avec des Effets de Survol D\u00e9grad\u00e9<\/h4>\n \n\n \n <p>Les d\u00e9grad\u00e9s lin\u00e9aires peuvent \u00e9galement \u00eatre utilis\u00e9s pour styliser les boutons avec des effets de survol attrayants :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>.gradient-button {\n padding: 10px 20px;\n border: none;\n color: white;\n background: linear-gradient(to right, cyan, blue);\n transition: background 0.5s;\n}\n\n.gradient-button:hover {\n background: linear-gradient(to right, blue, cyan);\n}<\/code><\/pre>\n \n\n \n <h4 class=\"wp-block-heading\">Utiliser des D\u00e9grad\u00e9s Lin\u00e9aires pour Cr\u00e9er des Effets de Texte<\/h4>\n \n\n \n <p>Vous pouvez appliquer des d\u00e9grad\u00e9s lin\u00e9aires au texte en utilisant la propri\u00e9t\u00e9 <code>-webkit-background-clip<\/code> et <code>color: transparent;<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>.gradient-text {\n font-size: 2em;\n background: linear-gradient(to right, red, blue);\n -webkit-background-clip: text;\n color: transparent;\n}<\/code><\/pre>\n \n\n \n <h2 class=\"wp-block-heading\">Conclusion<\/h2>\n \n\n \n <p>Les <strong>d\u00e9grad\u00e9s lin\u00e9aires en CSS<\/strong> sont des outils puissants pour enrichir visuellement vos projets web. En ma\u00eetrisant l’utilisation de la propri\u00e9t\u00e9 <code>linear-gradient<\/code>, vous pouvez cr\u00e9er des arri\u00e8re-plans dynamiques, des effets de survol personnalis\u00e9s, et des designs innovants. Continuez \u00e0 explorer les possibilit\u00e9s offertes par CSS pour d\u00e9couvrir de nouvelles techniques et am\u00e9liorer vos comp\u00e9tences. Pour plus de tutoriels sur CSS, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\">HTML5 et CSS3 de d\u00e9butant \u00e0 expert<\/a>. Pour apprendre \u00e0 cr\u00e9er des effets de texte avanc\u00e9s, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/effects-text-css\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n \n\n \n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-CSS3-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation CSS3 Offre 50%\" title=\"\"><\/a>\n \n\n \n <div class=\"internal-links\">\n <ul>\n <li><a href=\"https:\/\/wikiform","protected":false},"excerpt":{"rendered":"<p>D\u00e9grad\u00e9 Lin\u00e9aire (linear-gradient) en CSS – Tutoriel Le d\u00e9grad\u00e9 lin\u00e9aire en CSS est un outil puissant pour cr\u00e9er des arri\u00e8re-plans attrayants et dynamiques sur les…<\/p>\n","protected":false},"author":2,"featured_media":2722,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5403","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5403"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5403\/revisions"}],"predecessor-version":[{"id":5404,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5403\/revisions\/5404"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2722"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}