helldanger1
GForum VIP
- Entrou
- Ago 1, 2007
- Mensagens
- 29,631
- Gostos Recebidos
- 1
Veremos vários métodos para realizar um efeito de sombreado utilizando folhas de estilo em cascata.
Por Lim Chee Aun
Encontramos 3 métodos diferentes para fazer um efeito de sombra. São os seguintes, que veremos comentados neste artigo:
1.Método background-color
2.Método canal alpha
3.Método esticar imagem
Método Background color
Este método é bastante simples. Baseia-se em definir três caixas trasladadas, com diversas cores de fundo. Os elementos com as classes "blur" e "shadow" se definirão com tons cinzentos para criar o efeito de sombreado.
Código HTML:
<div class="blur">
<div class="shadow">
<div class="content">bla bla</div>
</div>
</div>
Código CSS:
.blur{
background-color: #ccc; /*shadow color*/
color: inherit;
margin-left: 4px;
margin-top: 4px;
}
.shadow,
.content{
position: relative;
bottom: 2px;
right: 2px;
}
.shadow{
background-color: #666; /*shadow color*/
color: inherit;
}
.content{
background-color: #fff; /*background color of content*/
color: #000; /*text color of content*/
border: 1px solid #000; /*border color*/
padding: .5em 2ex;
}
A única desvantagem deste método é que usa cores definidas para as sombras e isso fazer com que não se possa misturar este efeito com outros elementos. Com um fundo branco, as sombras em cinza ficam bem, mas por exemplo, se o fundo fosse vermelho, então o efeito de sombreado deveria se realizar com tons vermelhos escuros.
Por Lim Chee Aun
Encontramos 3 métodos diferentes para fazer um efeito de sombra. São os seguintes, que veremos comentados neste artigo:
1.Método background-color
2.Método canal alpha
3.Método esticar imagem
Método Background color
Este método é bastante simples. Baseia-se em definir três caixas trasladadas, com diversas cores de fundo. Os elementos com as classes "blur" e "shadow" se definirão com tons cinzentos para criar o efeito de sombreado.
Código HTML:
<div class="blur">
<div class="shadow">
<div class="content">bla bla</div>
</div>
</div>
Código CSS:
.blur{
background-color: #ccc; /*shadow color*/
color: inherit;
margin-left: 4px;
margin-top: 4px;
}
.shadow,
.content{
position: relative;
bottom: 2px;
right: 2px;
}
.shadow{
background-color: #666; /*shadow color*/
color: inherit;
}
.content{
background-color: #fff; /*background color of content*/
color: #000; /*text color of content*/
border: 1px solid #000; /*border color*/
padding: .5em 2ex;
}
A única desvantagem deste método é que usa cores definidas para as sombras e isso fazer com que não se possa misturar este efeito com outros elementos. Com um fundo branco, as sombras em cinza ficam bem, mas por exemplo, se o fundo fosse vermelho, então o efeito de sombreado deveria se realizar com tons vermelhos escuros.