Efeito de sombra com CSS3 - Exemplos

05/08/2016

Fala, pessoal. Beleza?

Publiquei um artigo explicando como usar os recursos de text-shadow e box-shadow das CSS3. Com eles podemos adicionar sombreamento nos elementos: CSS3: Text-Shadow e Box-Shadow.

Ent�o abri esse t�pico para compartilharmos experi�ncias e exemplos utilizando essas propriedades. Quem quiser contribuir, � s� deixar sua colabora��o abaixo. =)

Joel Rodrigues

Curtir t�pico + 8

Responder

Post mais votado

05/08/2016

Criei um exemplo de bot�o com sombreamento, seguindo a ideia do Material Design: https://jsfiddle.net/Ltzzszk2/2/.

Comecei com uma classe com o estilo b�sico:

.botao {
  display: inline-block;
  height: 50px;
  padding: 2px 10px;
  font-family: Roboto;
  text-decoration: none;
  line-height: 50px;
  background-color: rgba(52, 152, 219, 0.9);
  color: #ffffff;
  box-shadow: 0px 0px 5px gray;
}

E quando o mouse passar sobre o elemento (:hover), destaco a sombra e a cor do background:

.botao:hover{
  background-color: rgba(52, 152, 219, 1.0);
  box-shadow: 0px 0px 10px gray;
}

Joel Rodrigues

Responder

Gostei + 16