Efeito de sombra com CSS3 - Exemplos

Front-end

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

Joel Rodrigues

Curtidas 8

Melhor post

Joel Rodrigues

Joel Rodrigues

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;
}
GOSTEI 16

Mais Respostas

Diego Silva

Diego Silva

05/08/2016

Olá Joel, sabe informar se essa propriedade do css está disponível pro IE8?
GOSTEI 0
Tiago Dias

Tiago Dias

05/08/2016

Muito legal essa parada, vou testar aqui para ver como é :)
GOSTEI 0
Diego Silva

Diego Silva

05/08/2016

Opa, legal! Vou testar isso no responsivo!
GOSTEI 0
Diego Silva

Diego Silva

05/08/2016

poxa que maneiro!
GOSTEI 0
Diego Silva

Diego Silva

05/08/2016

que tópico útil!
GOSTEI 0
Diego Silva

Diego Silva

05/08/2016

testando resposta
GOSTEI 0
Diego Silva

Diego Silva

05/08/2016

teste
GOSTEI 0
POSTAR