{"id":109,"date":"2015-05-04T20:09:53","date_gmt":"2015-05-04T23:09:53","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=109"},"modified":"2015-05-04T20:13:03","modified_gmt":"2015-05-04T23:13:03","slug":"css-box-shadow","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/css-box-shadow\/","title":{"rendered":"CSS &#8211; Box Shadow"},"content":{"rendered":"<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2015\/05\/04_box-shadow.png\" alt=\"CSS Box Shadow\" \/>\n<p>Com o CSS3 \u00e9 poss\u00edvel projetar sombras a partir de qualquer elemento. A propriedade box-shadow \u00e9 muito simples, o primeiro valor corresponde \u00e0 dist\u00e2ncia horizontal da sombra, o segundo \u00e0 vertical, o terceiro o blur(&#8220;o quanto borrada a sombra deve ser&#8221;), o quarto valor \u00e9 o tamanho da sombra, o quinto a cor e o sexto se ela \u00e9 interna ou n\u00e3o(inset cria uma sombra interna).<\/p>\n<p>O erro do iniciante \u00e9 achar que por ter o nome de box-shadow a propriedade s\u00f3 serve para criar sombras. \u00c9 poss\u00edvel criar diversos efeitos com o box-shadow, como por exemplo o da imagem acima, onde um box-shadow: 0 0 0 20px #693AB6; \u00e9 utilizado para criar uma sombra que se projeta ap\u00f3s a borda do elemento. Como a sombra possui um blur 0, este efeito cria o que se parece com uma moldura de um quadro.<\/p>\n<p>No exemplo, a sombra n\u00e3o sofreu movimenta\u00e7\u00f5es horizontais ou verticais, por isso o 0 0 inicial. No quarto valor aumentamos a sombra em 20px, por isso ela se projeta para fora do elemento, parecendo ser a borda do mesmo.<\/p>\n<p>Lembrando que \u00e9 poss\u00edvel usar valores negativos nas dist\u00e2ncias horizontais e verticais. Valores positivos movem para baixo e para a direita, valores negativos movem para cima e para a esquerda.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Com o CSS3 \u00e9 poss\u00edvel projetar sombras a partir de qualquer elemento. A propriedade box-shadow \u00e9 muito simples, o primeiro valor corresponde \u00e0 dist\u00e2ncia horizontal da sombra, o segundo \u00e0 vertical, o terceiro o blur(&#8220;o quanto borrada a sombra deve ser&#8221;), o quarto valor \u00e9 o tamanho da sombra, o quinto a cor e o [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/109"}],"collection":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/comments?post=109"}],"version-history":[{"count":3,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/109\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/109\/revisions\/114"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}