{"id":1903,"date":"2010-04-17T08:15:00","date_gmt":"2010-04-17T08:15:00","guid":{"rendered":"http:\/\/svay.com\/blog\/?p=1903"},"modified":"2011-11-02T19:01:12","modified_gmt":"2011-11-02T19:01:12","slug":"creer-un-spot-lumineux-avec-css3-et-javascript","status":"publish","type":"post","link":"https:\/\/svay.com\/blog\/creer-un-spot-lumineux-avec-css3-et-javascript\/","title":{"rendered":"Cr\u00e9er un spot lumineux avec CSS3 et Javascript"},"content":{"rendered":"<p><a href=\"\/experiences\/css3-spotlight\/\" hreflang=\"en\"><img decoding=\"async\" src=\"\/blog\/public\/css3-spotlight.jpg\" alt=\"css3-spotlight.jpg\" title=\"css3-spotlight.jpg, avr. 2010\" \/><\/a><\/p>\n<p>Il y&#8217;a quelques mois, j&#8217;avais essay\u00e9 de faire un effet de <a href=\"\/experiences\/svg-spotlight\/spotlight-with-blur.php\">spot lumineux avec SVG<\/a>. Pour exp\u00e9rimenter, j&#8217;ai voulu r\u00e9aliser le m\u00eame effet avec HTML, CSS et Javascript seulement. Mais avant de continuer l&#8217;explication, je vous donne le lien pour tester avec un Webkit r\u00e9cent (Safari4 ou Chrome) ou Firefox:<\/p>\n<p><a href=\"http:\/\/svay.com\/experiences\/css3-spotlight\/\" hreflang=\"en\">D\u00e9mo CSS3 Spotlight<\/a><\/p>\n<p>Donc, pour r\u00e9aliser cette d\u00e9mo, j&#8217;ai m\u00e9lang\u00e9 les ingr\u00e9dients suivants:<\/p>\n<ul>\n<li>des CSS gradients, pour g\u00e9n\u00e9rer le spot;<\/li>\n<li>des web fonts, pour avoir une jolie typographie;<\/li>\n<li>des CSS transforms, pour incliner le texte;<\/li>\n<li>des couleurs RGBA, pour avoir de la transparence;<\/li>\n<li>la propri\u00e9t\u00e9 <code>pointer-events<\/code>, pour pouvoir cliquer sous le spot<\/li>\n<li>et un peu de Javascript, pour rendre \u00e7a interactif.<\/li>\n<\/ul>\n<p><del>La raison pour laquelle cette d\u00e9mo ne fonctionne qu&#8217;avec Webkit, c&#8217;est que je n&#8217;ai pas trouv\u00e9 comment r\u00e9aliser le m\u00eame d\u00e9grad\u00e9 radial avec Firefox. Je sais que Firefox les supporte, mais <a href=\"https:\/\/developer.mozilla.org\/en\/CSS\/-moz-radial-gradient#Size_constants\" hreflang=\"en\">la syntaxe est diff\u00e9rente<\/a> et ne permet pas de d\u00e9finir la taille du d\u00e9grad\u00e9 manuellement.<\/del><\/p>\n<p>J&#8217;ai dit une connerie, \u00e7a marche tr\u00e8s bien sous Firefox gr\u00e2ce \u00e0 Florent Verschelde.<\/p>\n<p>Je pense qu&#8217;il doit y avoir encore plein d&#8217;autres mani\u00e8res de cr\u00e9er cet effet (avec du <code>&lt;canvas&gt;<\/code> par exemple). Vous feriez \u00e7a comment vous?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il y&#8217;a quelques mois, j&#8217;avais essay\u00e9 de faire un effet de spot lumineux avec SVG. Pour exp\u00e9rimenter, j&#8217;ai voulu r\u00e9aliser le m\u00eame effet avec HTML, CSS et Javascript seulement. Mais avant de continuer l&#8217;explication, je vous donne le lien pour tester avec un Webkit r\u00e9cent (Safari4 ou Chrome) ou Firefox: D\u00e9mo CSS3 Spotlight Donc, pour [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[21],"tags":[],"_links":{"self":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/1903"}],"collection":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/comments?post=1903"}],"version-history":[{"count":1,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/1903\/revisions"}],"predecessor-version":[{"id":2185,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/1903\/revisions\/2185"}],"wp:attachment":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/media?parent=1903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/categories?post=1903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/tags?post=1903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}