Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601
Bordas – Parte 3: box-shadow - Kolaborativa

Bordas – Parte 3: box-shadow

box-shadow (Sombras em Bordas)


A possibilidade de adicionar sombras é uma das várias vantagens do CSS3 e por um motivo muito simples: elimina a necessidade de utilização de imagens para a criação desses efeitos. Por isso, é importante conhecer mais esse recurso. O código CSS é a seguinte:

Declaração da propriedade:

OBS: Lembrando-se que para usar a propriedade no Mozilla Firefox utiliamos -moz-, e para o Safari e Google Chrome o -webkit-.

Onde #000 é a cor da sombra, o primeiro valor (2px) é a distância horizontal da sombra em relação ao elemento, o segundo valor (2px) é a distância vertical da sombra em relação ao elemento e o terceiro valor (1px) é o raio da sombra (efeito blur).

Porém, assim como na propriedade border-radius, existem duas declarações diferentes: -webkit-box-shadow para Chrome e Safari, e -moz-box-shadow para o Firefox. Para navegadores que não oferecem suporte a esse recurso, como as sombras têm um efeito apenas estético, a falta de suporte não deve atrapalhar a navegação de usuários com browsers nessa condição.

Exemplo:

Este é um exemplo de uma caixa de sombra.

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Podemos usar também valores negativos:

Exemplo:

Este é um exemplo de uma caixa de sombra.

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Podemos utilizar qualquer unidade de medida para definir a distância e o raio da sombra com box-shadow, não apenas pixels:

Exemplo:

Este é um exemplo de uma caixa de sombra.

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Múltiplas sombras em bordas

Também é possível adicionar múltiplas sombras a um elemento usando box-shadow, bastando, para isso, separar as declarações com vírgula. As sombras se sobrepõem na ordem em que foram declaradas, mas nunca se sobrepõem ao elemento original.

No seguinte exemplo, utilizando uma sombra mais escura que o fundo e outra mais clara, ambas com os valores baixos do raio e das distâncias, criamos um interessante efeito de profundidade:

Exemplo:

Este é um exemplo de uma caixa de sombra.

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Sombras em bordas internas

Podemos também colocar sombras nas bordas internas adicionando o valor inset ao atributo box-shadow.

Exemplo:

Este é um exemplo de uma caixa de sombra.

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Devemos ressaltar a importância que, assim como em um editor de imagens, o uso da sombra deve ser bem utilizada. Sombras coloridas ou um raio muito grande podem dar um aspecto amador ao seu layout:

Exemplo:

Este é um exemplo de uma caixa de sombra.

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Aplicação em outros elementos

Nos exemplos anteriores, aplicamos a sombra a elementos < div >, mas a propriedade box-shadow pode ser utilizada em qualquer elemento. Nos exemplos abaixo, aplicamos sombra aos elementos < button >, < input /> e até em uma imagem com uma borda branca:

Exemplo:

placacss3

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores


FONTES DIVERSAS, PORÉM MUITAS INFORMAÇÕES FORAM TIRADAS DE SITES COMO HTTP://WWW.IRBABE.COM


Author Description

dodilei

Dizem que falo comendo as palavras, mas o que gosto de comer é um bom paniqueijo! além de OpenSource, Linux, Python e Javascript! :D

Nenhum comentário ainda.

Join the Conversation