Efeitos CSS #3 - Brilho externo

Voltando com a série de efeitos animados que o CSS nos permite, nessa aula vou ensinar a fazer um efeito de brilho, parecido com o do photoshop. Veja uma demonstração passando o mouse em cima do quadrado:

:)

Segue o código:

#squareDemo{
   -webkit-box-shadow: 0 0 0 0 #FFBA85;
  box-shadow: 0 0 0 0 #FFBA85;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

#squareDemo:hover{
  -webkit-box-shadow: 0 0 40px 5px #FFBA85;
  box-shadow: 0 0 40px 5px #FFBA85;
}

Usamos a propriedade box-shadow para fazer o efeito...seria semelhante a uma sombra, porém, ao se configurar as cores certas ele se assemelha a um brilho. Não esqueça de adicionar uma transition para animar o efeito.

Também podemos fazer uma borda suavizada com essa propriedade, fazendo um degradê até desaparecer. Por exemplo:

:)

Basta configurar um grande spread e a mesma cor do background no código:

#squareDemo{
   -webkit-box-shadow: 0 0 0 0 #F36;
  box-shadow: 0 0 0 0 #F36;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

#squareDemo:hover{
  -webkit-box-shadow: 0 0 40px 35px #F36;
  box-shadow: 0 0 40px 35px #F36;
}

É isso ai galera, espero que tenham gostado! Não se esqueçam de dar uma olhada na série Personalizando todo o blog para entender melhor sobre CSS !

Compartilhe essa postagem!