box Sombra
Com CSS3 você pode criar efeitos de sombra!
Efeitos de Sombra CSS3
Com CSS3 você pode adicionar sombra ao texto e elementos.
Neste capítulo, você vai aprender sobre as seguintes propriedades:
-
text-shadow -
box-shadow
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit- ou -moz- especifica a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
CSS3 Sombra Texto
O CSS3 text-shadow propriedade se aplica sombra ao texto.
No seu uso mais simples, você só especificar a sombra horizontal (2px) e a sombra vertical (2px):
efeito de sombra texto!
Em seguida, adicione uma cor para a sombra:
efeito de sombra texto!
Em seguida, adicione um efeito de borrão para a sombra:
efeito de sombra texto!
O exemplo a seguir mostra um texto branco com sombra preta:
efeito de sombra texto!
O exemplo a seguir mostra uma sombra neon brilho vermelho:
efeito de sombra texto!
várias Sombras
Para adicionar mais do que uma sombra ao texto, você pode adicionar uma lista separada por vírgulas de sombras.
O exemplo a seguir mostra um fulgor de néon sombra vermelha e azul:
efeito de sombra texto!
O exemplo a seguir mostra um texto branco com sombra preta, azul e azul escuro:
efeito de sombra texto!
Exemplo
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Tente você mesmo " CSS3 box-shadow propriedade
O CSS3 box-shadow propriedade se aplica sombra a elementos.
No seu uso mais simples, você só especificar a sombra horizontal e a sombra vertical:
Em seguida, adicione uma cor para a sombra:
Em seguida, adicione um efeito de borrão para a sombra:
Você também pode adicionar sombras à :: before e :: after pseudo-classes, para criar um efeito interessante:
Exemplo
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding:
10px;
background: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind
image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one
half of the remaining 30% */
height: 100px;
bottom: 0;
} Tente você mesmo " Cartões
Um exemplo do uso do box-shadow propriedade para criar cartões de papel-like:
1
01 de janeiro de 2016
Hardanger, Noruega
Exemplo
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
Experimente-o (cartão de texto) » Experimente (cartão de imagem)» Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »
Propriedades de sombra CSS3
A tabela a seguir lista as propriedades CSS3 sombra:
| Propriedade | Descrição |
|---|---|
| box-shadow | Adiciona um ou mais sombras para um elemento |
| text-shadow | Adiciona um ou mais sombras para um texto |