{"id":254,"date":"2013-06-27T20:40:30","date_gmt":"2013-06-27T19:40:30","guid":{"rendered":"http:\/\/sphinx.lamecarlate.net\/?p=254"},"modified":"2013-08-20T15:01:35","modified_gmt":"2013-08-20T14:01:35","slug":"overlay-de-boite-de-dialogue-en-1-ligne-lea-verou","status":"publish","type":"post","link":"https:\/\/informatique.lamecarlate.net\/bribes\/overlay-de-boite-de-dialogue-en-1-ligne-lea-verou","title":{"rendered":"Overlay de bo\u00eete de dialogue en 1 ligne (Lea Verou)"},"content":{"rendered":"<p>Une astuce pour cr\u00e9er un overlay, cette couleur souvent sombre qui recouvre toute la fen\u00eatre lors de l&rsquo;ouverture d&rsquo;une bo\u00eete de dialogue (lightbox, shadowbox, peu importe le nom qu&rsquo;on lui donne &#8211; je crois qu&rsquo;on n&rsquo;a pas d&rsquo;\u00e9quivalent en fran\u00e7ais), en une seule ligne de css, toute simple, tr\u00e8s&#8230; tr\u00e8s leaverou\u00e9enne :3<\/p>\n<blockquote class=\"twitter-tweet\"><p>Overlay behind lightbox in one simple line: outline: 9999px solid rgba(0,0,0,.3);<\/p>\n<p>\u2014 Lea Verou (@LeaVerou) <a href=\"https:\/\/twitter.com\/LeaVerou\/statuses\/251469590377418753\">September 27, 2012<\/a><\/p><\/blockquote>\n<p>Une petite d\u00e9mo ici : <a href=\"http:\/\/dabblet.com\/gist\/5861450\">http:\/\/dabblet.com\/gist\/5861450<\/a><\/p>\n<p>\u00c0 noter qu&rsquo;on ne peut pas mettre de box-shadow \u00e0 la bo\u00eete de dialogue, attention : en effet, le outline prendra effet apr\u00e8s le box-shadow, et pas dessous. On peut y rem\u00e9dier en utilisant un box-shadow gigantesque en lieu et place de l&rsquo;outline, mais les performances s&rsquo;en trouveront tr\u00e8s fortement d\u00e9grad\u00e9es : le calcul d&rsquo;une ombre est plus demandeur que celui d&rsquo;un outline.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Une astuce pour cr\u00e9er un overlay, cette couleur souvent sombre qui recouvre toute la fen\u00eatre lors de l&rsquo;ouverture d&rsquo;une bo\u00eete de dialogue (lightbox, shadowbox, peu importe le nom qu&rsquo;on lui [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":258,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[36],"tags":[39,62,57],"_links":{"self":[{"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/posts\/254"}],"collection":[{"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/comments?post=254"}],"version-history":[{"count":0,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/posts\/254\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/media\/258"}],"wp:attachment":[{"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/media?parent=254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/categories?post=254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/tags?post=254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}