CloudWare

cafelog-coffee

A Propriedade Box-Shadow

Quinta, 18 Agosto 2011

Aprenda em um único artigo a criar Box-Shadows, Inner Shadows & Multiple Shadows.

css3

No exemplo a seguir irei demonstrar como usar a propriedade box-shadow do CSS3.

SINTAXE

box-shadow: DESLOCAMENTO H DESLOCAMENTO V ESFUMAÇADO COR;

Deslocamento horizontal da sombra: Deslocamento horizontal da sombra. Valores positivos orientam à direita e valores negativos orientam à esquerda.

Deslocamento vertical da sombra: Deslocamento vertical da sombra. Valores positivos orientam para baixo e valores negativos orientam para cima.

Esfumaçado: Se este valor for zero, quer dizer que a sombra não terá esfumaçado e aparecerá "sólida". Valores maiores que zero, tornam as sombras mais "reais".

Cor da sombra: Define a cor da sombra, podendo ser utilizado um valor hexadecimal, RGB ou RGBA.

Observe o código abaixo e seu resultado:

#exemplo1 {
border: #000 2px solid;
box-shadow: 10px 10px 10px #3489C8;
-moz-box-shadow: 10px 10px 10px #3489C8;
-webkit-box-shadow: 10px 10px 10px #3489C8;
}

 

Inner Shadows

Podemos também adicionar sombras internas, basta adicionar o valor inset na propriedade box-shadow. Confira no exemplo abaixo:

#exemplo1 {
border: #000 2px solid;
box-shadow: inset 10px 10px 10px #3489C8;
-moz-box-shadow: inset 10px 10px 10px #3489C8;
-webkit-box-shadow: inset 10px 10px 10px #3489C8;
}

 

Multiple Shadows

A propriedade box-shadow também nos permite adicionar multiplas sombras, apenas separando os valores com uma ",". Observe:

#exemplo3 {
    border: #000 2px solid;
    
    box-shadow: 0 0 10px 5px black,
                40px -30px lime,
                40px 30px 50px red,
                -40px 30px yellow,
                -40px -30px 50px blue;
    -moz-box-shadow: 0 0 10px 5px black,
                    40px -30px lime,
                    40px 30px 50px red,
                    -40px 30px yellow,
                    -40px -30px 50px blue;
    -webkit-box-shadow: 0 0 10px 5px black,
                        40px -30px lime,
                        40px 30px 50px red,
                        -40px 30px yellow,
                        -40px -30px 50px blue;
}

 

Muito legal não? Cool

Android

Java

Hibernate

Joomla!

CSS3

HTML5

Saia na Frente

html5 css3

Sobre Mim

sobre-foto-2Adriel Café é Web Master e Desenvolvedor Java. Ele incentiva o uso/estudo de Web Standards, Java e Android.

Saiba Mais

Encontre-me

facebook linkedin