Box shadow
CSS3 Box Shadow
O Box-shadow é uma propriedade muito poderosa no CSS3. Essa propriedades “box-shadow” permitem que você crie sombras individuais ou múltiplas, internas ou externas.
A propriedade “box-shadow” requer que você defina os deslocamentos horizontais e verticais e, em seguida, você pode definir borrão (blur) e cor opcionais.
Vaja a sintaxe:
box-shadow:outset,inset/h-offset v-offset blur spread color;
Vaja abaixo uma declaração de sombra com “box-shadow“:
.bloco { box-shadow: 10px 10px #999; }
O código CSS acima, cria uma caixa com sombras utilizando a propriedade “box-shadow” no lado inferior e direito.
O código CSS abaixo, cria uma caixa com a sombra igualmente nos quatro lados.
.bloco {
margin: 20px;
width:200px;
height:150px;
border: solid 1px #555;
background-color: #eee;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
Abaixo segue o HTML para o exemplo.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Box Shadow</title>
</head>
<body>
<div class="bloco">
<!--Algum texto ou imagem aqui!!-->
</div>
</body>
</html>
Veja o resultado fonal:
No exemplo acima definimos o borrão (blur) com valor de 10px.
SOMBRA (BOX-SHADOW) NO TOPO E NA DIREITA
Vamos agora fazer uma sombra sem o borrão (blur) na parte superior e na direita do bloco.
.bloco {
margin: 20px;
width:200px;
height:150px;
border: solid 1px #555;
background-color: #eee;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
}
Abaixo segue o HTML para o exemplo.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Box Shadow</title>
</head>
<body>
<div class="bloco">
<!--Algum texto ou imagem aqui!!-->
</div>
</body>
</html>
Veja o resultado fonal:
No exemplo acima não definimos nenhum valor ao borrão (blur), perceba que a sombra ficou solida, ou seja, quadrada.
SOBRA INTERNA (INSET) COM BOX-SHADOW
Usando os mesmo códigos do exemplo anterior, vamos incluir apenas um valor o “inset” no nosso box-shadow.
.bloco {
margin: 20px;
width:200px;
height:150px;
border: solid 1px #555;
background-color: #eee;
box-shadow: inset -10px 10px rgba(0,0,0,0.6);
-webkit-box-shadow: inset -10px 10px rgba(0,0,0,0.6);
}
Abaixo segue o HTML para o exemplo.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Box Shadow</title>
</head>
<body>
<div class="bloco">
<!--Algum texto ou imagem aqui!!-->
</div>
</body>
</html>
Veja o resultado fonal:
Perceba que além de incluirmos o “inset” mudamos o valor negativo dos valores 10px. Agora o valor negativo está no primeiro valor (-10px) do box-shadow.
BOX SHADOW NO LEFT E RIGHT
Vamos agora fazer uma sombra apenas na esquerda e na direita do nosso bloco.
.bloco {
margin: 20px;
width:200px;
height:150px;
border: solid 1px #555;
background-color: #eee;
box-shadow: 10px 0 15px -6px rgba(31, 73, 125, 0.8), -12px 0 8px -6px rgba(31, 73, 125, 0.8);
-webkit-box-shadow: 10px 0 15px -6px rgba(31, 73, 125, 0.8), -12px 0 8px -6px rgba(31, 73, 125, 0.8);
}
O HTML é mesmo do exemplo anterior.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Box Shadow</title>
</head>
<body>
<div class="bloco">
<!--Algum texto ou imagem aqui!!-->
</div>
</body>
</html>
Veja o resultado fonal:
BOX SHADOW NO TOPO E NO RODAPÉ
.bloco {
margin: 20px;
width:200px;
height:150px;
border: solid 1px #555;
background-color: #eee;
box-shadow: 0px -10px 5px rgba(31, 73, 125, 0.8), 0px 10px 5px rgba(31, 73, 125, 0.8);
-webkit-box-shadow: 0px -10px 5px rgba(31, 73, 125, 0.8), 0px 10px 5px rgba(31, 73, 125, 0.8);
}
O HTML é mesmo do exemplo anterior.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Box Shadow</title>
</head>
<body>
<div class="bloco">
<!--Algum texto ou imagem aqui!!-->
</div>
</body>
</html>
Veja o resultado fonal:
Nota: Perceba que mudamos apenas os valores do box-shadow conforme a nossa necessidade. Tente mudar alguns valores e veja o resultado.