{"componentChunkName":"component---src-templates-single-template-tsx","path":"/usando-o-selector-target-para-criar-modal-apenas-com-css","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://blog.nandomoreira.dev","author":{"name":"Fernando Moreira","site":"https://nandomoreira.dev","social":{"disqus":"fernandomoreira"}}}},"markdownRemark":{"html":"<p><figure class=\"gatsby-resp-image-figure\" style=\"\">\n    <span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 1000px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 63.3%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAACfklEQVQ4y42R7UtTURzH74ve9EomgQ8g06zptntNoYIQeySCmxs6ps1ZRhMDWdmDlcucVC8i1PbQNokoXObcc0oaFEH/QRT1Ims43e5m5TKjV9m589c5JzUTUS98+PI793s+5z4w0cgH7/inSJ8Qi7njExNuYTLm/iwk3KnkFGU68Q8yf00k3cm4gInTLs6+WDTqeffmbVfA79/MNDQ1wnGDAWrq9VCpqQZ1jRbUtVo4UKWiHKxWwyEMyf14PqypAk2dDuoNp+DspVZoPn8OjBcvwInGxlRhkSyTkbo6Id9pnsuzt6M8WzvKsbQh1nUDmZ+HkPlFGF0ZDaDWET9qexZEN18Oo5PBBygbd6R3r6ECZyfKd5jnCnqvw1Z7RyRDe0TClI7ch5KQU8TMl4ZdIPPbQPcqAPT6NQfT099BmErBj9mfdOl1KgnbcYd0uZCDkN7x9B6wg9ZoXrNewnD4Buu1ikqvdZ7z2mDbQDeoR92QnJ2ByFQCxuKT8FGYhDEhBl9mvsFw5D0U4g7p4n2A96W5sBMU/d3R3KZaLHyChT4bFeIEpc9KyzsDDtgVdMLukGsJMpf57URC9vwvfLyKcLFIUk6xgMzTQ5+6aPAOnRXLOuTwNYWLRXr6AuT1pP23oRgLuYW15Z11hUtFfDq7Qr7ysFWFJX+FiCVCr20Z9BNsBJEL0Z8yToWKIRcU+6xpDEkoWkgl/vjsxkhzQ72gHOiJ5p4+lslUBF1Q7rH/LvfYxAqfQ9zrc9Jk+7tF+aMuUbE+SOmxgPzhrUiOQSthjC0tquYzRp5w2WTi2zs6+NarJr6wQcNv0R3ls/UqPqtuLSr5LL1KhXNfxp6yTX8AH4Ver/z2sAMAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n        <source\n          srcset=\"/static/d7c689df523a3dcf492a3118ff1d867e/bc904/usando-o-selector-target-para-criar-modal-apenas-com-css.webp 250w,\n/static/d7c689df523a3dcf492a3118ff1d867e/4be29/usando-o-selector-target-para-criar-modal-apenas-com-css.webp 500w,\n/static/d7c689df523a3dcf492a3118ff1d867e/03f31/usando-o-selector-target-para-criar-modal-apenas-com-css.webp 1000w\"\n          sizes=\"(max-width: 1000px) 100vw, 1000px\"\n          type=\"image/webp\"\n        />\n        <source\n          srcset=\"/static/d7c689df523a3dcf492a3118ff1d867e/43fa5/usando-o-selector-target-para-criar-modal-apenas-com-css.png 250w,\n/static/d7c689df523a3dcf492a3118ff1d867e/c6e3d/usando-o-selector-target-para-criar-modal-apenas-com-css.png 500w,\n/static/d7c689df523a3dcf492a3118ff1d867e/da8b6/usando-o-selector-target-para-criar-modal-apenas-com-css.png 1000w\"\n          sizes=\"(max-width: 1000px) 100vw, 1000px\"\n          type=\"image/png\"\n        />\n        <img\n          class=\"gatsby-resp-image-image\"\n          src=\"/static/d7c689df523a3dcf492a3118ff1d867e/da8b6/usando-o-selector-target-para-criar-modal-apenas-com-css.png\"\n          alt=\"Usando o pseudo selector :target para criar modal apenas com CSS\"\n          title=\"Usando o pseudo selector :target para criar modal apenas com CSS\"\n          loading=\"lazy\"\n          style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        />\n      </picture>\n    </span>\n    <figcaption class=\"gatsby-resp-image-figcaption\">Usando o pseudo selector :target para criar modal apenas com CSS</figcaption>\n  </figure></p>\n<h3>O pseudo selector</h3>\n<p>Um pseudo selector das CSS3 muito útil é o <code class=\"language-text\">:target</code>, ele fornece recursos de estilo para um elemento cujo o ID está visivel na url.</p>\n<p>É bem simples de entender, vamos ver uma demonstração nesse <a href=\"http://codepen.io/nandomoreirame/details/WGpjaY/\" target=\"_blank\">Pen</a></p>\n<p><a href=\"https://codepen.io/oseunando/pen/WGpjaY\">https://codepen.io/oseunando/pen/WGpjaY</a></p>\n<p>O pseudo selector <code class=\"language-text\">:target</code> pode ser aplicado em qualqer tag, classe ou ID em seu CSS, mais ou menos assim:</p>\n<div class=\"gatsby-highlight\" data-language=\"css\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-css line-numbers\"><code class=\"language-css\"><span class=\"token comment\">/* Aplica em todos os elementos que tenha o target ativo na URL */</span>\n<span class=\"token selector\">:target</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #000<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">/* aplica cor apenas em H2 que tenha o target ativo na URL */</span>\n<span class=\"token selector\">h2:target</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #f00<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<hr>\n<h3>O Modal</h3>\n<p>Sendo assim, então podemos aplicar o <code class=\"language-text\">display: block</code> em nosso modal, certo? Isso mesmo.</p>\n<div class=\"gatsby-highlight\" data-language=\"css\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-css line-numbers\"><code class=\"language-css\"><span class=\"token selector\">#modal:target</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> block<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span></span></pre></div>\n<p>O resto vc já sabe né, estilize o quanto quiser e de preferência anime-o para ficar mais bonito.</p>\n<hr>\n<p>É isso, peço desculpas se o artigo não foi grande coisa pra você, eu não posso fazer nada se as CSS são simples demais. 😌</p>\n<p>Divirta-se!</p>\n<p><code class=\"language-text\">&lt;/end&gt;</code></p>","excerpt":"O pseudo selector Um pseudo selector das CSS3 muito útil é o , ele fornece recursos de estilo para um elemento cujo o ID está visivel na url. É bem…","timeToRead":1,"frontmatter":{"category":["css"],"date":"há 10 anos","datePublished":"2016-09-23T23:31:58.000Z","description":"Um pseudo selector das CSS3 muito útil é o :target, ele fornece recursos de estilo para um elemento cujo o ID está visivel na url","path":"/usando-o-selector-target-para-criar-modal-apenas-com-css","tags":["dicas","css"],"title":"Usando o pseudo selector :target para criar modal apenas com CSS","image":{"publicURL":"/static/css3-06a4f6e696f2bf4c5fcc291e41412b20.jpg","name":"css3"}},"fields":{"readingTime":{"words":185}}}},"pageContext":{}}}