Efeito de sombra com CSS3 - Exemplos

05/08/2016

73

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. =)
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;
}
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar