{"id":14380,"date":"2023-11-01T08:25:00","date_gmt":"2023-11-01T11:25:00","guid":{"rendered":"https:\/\/defluence.com.br\/insights\/?p=14380"},"modified":"2023-10-22T13:26:57","modified_gmt":"2023-10-22T16:26:57","slug":"como-fazer-uma-transicao-de-box-shadow-no-css","status":"publish","type":"post","link":"https:\/\/defluence.com.br\/insights\/desenvolvimento-web\/como-fazer-uma-transicao-de-box-shadow-no-css\/","title":{"rendered":"Como fazer uma transi\u00e7\u00e3o de box shadow no CSS"},"content":{"rendered":"\n<p>Quem nunca ficou maravilhado com aqueles efeitos de sombra sutis em sites e pensou: &#8220;Gostaria de saber como fazer isso&#8221;?<\/p>\n\n\n\n<p>Vou te explicar. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-entendendo-o-box-shadow\">Entendendo o box-shadow<\/h2>\n\n\n\n<p>Antes de mergulharmos na transi\u00e7\u00e3o de <code>box-shadow<\/code>, \u00e9 essencial entender o que \u00e9 essa propriedade. Basicamente, <code>box-shadow<\/code> permite adicionar sombras a elementos HTML. \u00c9 como dar uma sensa\u00e7\u00e3o de profundidade ao seu projeto.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Sintaxe b\u00e1sica *\/\nbox-shadow: offset-x offset-y blur-radius spread-radius color;<\/code><\/pre>\n\n\n\n<p><strong>Offset-x<\/strong> e <strong>offset-y<\/strong> definem a posi\u00e7\u00e3o da sombra. <strong>Blur-radius<\/strong> e <strong>spread-radius<\/strong> controlam o tamanho e o alcance da sombra, e <strong>color<\/strong> bem, \u00e9 autoexplicativo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-iniciando-a-transicao\">Iniciando a transi\u00e7\u00e3o<\/h3>\n\n\n\n<p>Fazer a transi\u00e7\u00e3o do <code>box-shadow<\/code> \u00e9 t\u00e3o simples quanto fazer uma anima\u00e7\u00e3o de outras propriedades CSS. Utilizamos a propriedade <code>transition<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Adicionando a transi\u00e7\u00e3o *\/\n.elemento {\n  box-shadow: 3px 3px 5px 6px #ccc;\n  transition: box-shadow 0.3s ease-in-out;\n}<\/code><\/pre>\n\n\n\n<p>Neste exemplo, a transi\u00e7\u00e3o ocorre em 0.3 segundos com um efeito de &#8220;ease-in-out&#8221;, criando uma sensa\u00e7\u00e3o agrad\u00e1vel de acelera\u00e7\u00e3o e desacelera\u00e7\u00e3o.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-eventos-disparadores\">Eventos disparadores<\/h3>\n\n\n\n<p>Voc\u00ea provavelmente quer que algo desencadeie essa transi\u00e7\u00e3o, certo? Pode ser um hover do mouse, um clique ou algo do tipo.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Transi\u00e7\u00e3o no hover *\/\n.elemento:hover {\n  box-shadow: 10px 10px 5px 6px #ccc;\n}<\/code><\/pre>\n\n\n\n<p>Agora, quando voc\u00ea passar o mouse sobre o elemento, a sombra mudar\u00e1 conforme especificado, seguindo as regras de transi\u00e7\u00e3o que definimos anteriormente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-multiplas-sombras\">M\u00faltiplas sombras<\/h3>\n\n\n\n<p>Quem disse que voc\u00ea est\u00e1 limitado a uma \u00fanica sombra? Voc\u00ea pode especificar v\u00e1rias sombras usando v\u00edrgulas.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* M\u00faltiplas sombras *\/\n.elemento {\n  box-shadow: 3px 3px 5px 6px #ccc, -3px -3px 5px 6px #eee;\n  transition: box-shadow 0.3s ease-in-out;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-alerta-alerta alerta\">Transi\u00e7\u00f5es de <code>box-shadow<\/code> podem ser mais pesadas em termos de performance em compara\u00e7\u00e3o com outras propriedades. Portanto, use com modera\u00e7\u00e3o.<\/p>\n\n\n\n<p>Ent\u00e3o, est\u00e1 preparado para sombrear seu site? Com um conhecimento s\u00f3lido da propriedade <code>box-shadow<\/code> e de como aplicar transi\u00e7\u00f5es, voc\u00ea est\u00e1 bem encaminhado para elevar o n\u00edvel do seu design.<\/p>\n\n\n\n<p>Agora v\u00e1 l\u00e1, experimente. Mas n\u00e3o se perca muito nas sombras, elas s\u00e3o apenas um dos muitos elementos que tornam um design verdadeiramente excepcional.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Exploramos a sintaxe do box-shadow, ensinando como posicionar e colorir sombras em elementos HTML de forma profissional.<\/p>\n","protected":false},"author":1,"featured_media":14382,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[17],"_links":{"self":[{"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/posts\/14380"}],"collection":[{"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/comments?post=14380"}],"version-history":[{"count":0,"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/posts\/14380\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/media\/14382"}],"wp:attachment":[{"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/media?parent=14380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/categories?post=14380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/tags?post=14380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}