Gerador de box shadow

O que é o Gerador de box shadow? (Box shadow Generator)

O gerador de box shadow é uma ferramenta gratuita desenvolvida pela Hora de Codar como um projeto dos seus cursos para os seus alunos, a sua criação completa, passo a passo, está disponível na nossa Comunidade, clique aqui para saber mais.

Com esta ferramenta você consegue gerar de forma visual a regra de CSS box-shadow para qualquer elemento, e receber ela de forma que funcione em qualquer navegador.

Por ter muitos parâmetros a box-shadow é uma regra de difícil execução no CSS, resultando em várias tentativas e erros, a ferramenta ajuda a deixar mais fácil você atingir seu objetivo.

O que faz a regra box-shadow?

Com base em alguns parâmetros ela adiciona uma sombra aos elementos, podendo gerar diversos efeitos, como: destaque ou levitação.

Muitos projetos implementam esta regra, fazendo com que o desenvolvedor tenha que recorrer a documentação da mesma sempre que precisa fazer algo.

Os parâmetros da box-shadow são:

• offset-x;
• offset-y;
• cor;
• opacidade;
• raio de intensidade (blur);
• raio de espalhamento (spread);
• inset;

Vamos ver o que cada um deles faz a seguir, mas perceba a complexidade da configuração da regra.

O valor de offset-x em box-shadow:

O offset no eixo x representa o deslocamento da sombra gerada no eixo horizontal, podendo ser negativo ou positivo

O valor de offset-y em box-shadow:

O offset no eixo y representa o deslocamento da sombra gerada no eixo vertical, podendo ser negativo ou positivo

O valor de cor em box-shadow:

A cor muda a cor da sombra gerada, podemos informar em vários formatos, como: Hexadecimal ou RGB

O RGB acaba sendo mais utilizado pois conseguimos controlar a opacidade, alterando o valor de alpha (RGBA)

O valor de opacidade em box-shadow:

A opacidade é alterada com a cor, utilizando o padrão RGBA, o valor aceito é de 0 a 1

Sendo 0 completamente invisível, podemos controlar a intensidade com .5 por exemplo, que representa 50% de visibilidade, para chegar a valores intermediários

O valor de blur em box-shadow:

Com blur conseguimos deixar a sombra mais ‘esfumaçada’ e não sólida, que é o seu padrão

O valor é colocado em px, quanto maior mais transparente também a sombra acaba ficando, pois ela também ganha mais área, dando um aspecto borrado ao efeito de sombra

O valor de spread em box-shadow:

Alterando o spread a sombra vai se espalhar mais ao longo da página, aumentando o seu tamanho

O valor também inserido em pixels, permitindo valores negativos

O valor de inset em box-shadow:

O inset pode ser inserido na regra e deixa a sombra dentro do elemento

Ou seja, ao invés da sombra ser externa ela se torna interna