translate

tradutor

 

 

Pesquisar

Tutoriais CSS3: efeito caixa de sombra

15:51 | , , , , , , , , , , , ,

CSS3 TUTORIALS: BOX SHADOW  EFFECT





Previously, we wrote a tutorial on creating rounded corners with the aid of CSS3. Today’s tutorial is on another great effect that can be achieved using a CSS3 property, box-shadow. This box-shadow property enables you to apply one or more drop-shadow effect to a box. And again, this effect is only supported in Firefox, Safari, Chrome, and Opera for now.
Box-shadow property contains six attributes:
box-shadow: 1px 1px 1px 1px rgba(0,0,0,1) inset;
property: x-offset, y-offset, blur distance, spread distance, color, inset attribute for inner shadows ;
Attributes Description
x-offset Horizontal offset of the shadow. Positive values to make the shadow fall on right side of box. Negative values to make shadows fall on the left.
y-offset Vertical offset of the shadow. Positive values to make the shadow fall below the box. Negative values to make shadows fall on top of box.
Blur
distance
Negative values are not allowed. If the value is zero, the shadow’s edge will be sharp. The more positive the value, the more blur the shadow is.
Spread distance Negative values cause shadow to shrink inwards. Positive value makes the shadow to expand in all the directions.
Inset Adding this attribute to the syntax will create an inner shadow effect.
Color Color of the shadow. HEX code, RGB or RGBA can be used as the value.
Here are some examples grouped according to the attributes used. I’ve used RGBA for the color. So, I want to explain about RGBA too. RGBA works similar like the previous RGB used in CSS2. But, RGBA includes ‘alpha’ to allow specification of the opacity of a color.
rgba(R,G,B,A)

R : 0-255
G: 0-255
B: 0-255
A:0-1
If you are less familiar with RGB color, you can use online generators and then add an opacity value to create RGBA.
CSS3 “box-shadow” Examples
Without box-shadow usage
This normal box with sharp-edge corners was created using the following code.
<div style=”background-color:#F1F1F1; border:3px solid #DDDDDD;”></div>
This normal box with rounded corners was created using the following code.
<div style=”background-color:#F1F1F1; border:3px solid #DDDDDD;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;padding: 10px;”></div>
Shadow ( x-offset and y-offset attibutes used)
-webkit-box-shadow: 5px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 5px 5px rgba(0,0,0,0.4);
box-shadow: 5px 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 5px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 5px 5px rgba(0,0,0,0.4);
box-shadow: 5px 5px rgba(0,0,0,0.4);
-webkit-box-shadow: -5px -5px rgba(0,0,0,0.4);
-moz-box-shadow: -5px -5px rgba(0,0,0,0.4);
box-shadow: -5px -5px rgba(0,0,0,0.4);
Blur Attribute usage
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
Spread Attribute usage
-webkit-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);
-webkit-box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);
box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);
Inset Attribute usage for inner shadow
-webkit-box-shadow: 10px 10px inset rgba(0,0,0,0.4);
-moz-box-shadow: 10px 10px rgba(0,0,0,0.4) inset;
box-shadow: 10px 10px rgba(0,0,0,0.4) inset;
Inset with Blur
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
-moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
Inset with Blur and Spread
-webkit-box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
-moz-box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
From now on, we have planned to write about CSS3 tutorials and hope these tutorials are helpful.


fonte e créditos:
http://www.bloggermint.com/2010/11/css3-tutorials-box-shadow-effect/



traduzido:

Tutoriais CSS3: efeito caixa de sombra

Anteriormente, nós escrevemos um tutorial sobre como criar cantos arredondados, com a ajuda de CSS3. Hoje o tutorial é em outro grande efeito que pode ser conseguido utilizando uma propriedade CSS3, caixa de sombra . Esta caixa-sombra propriedade permite que você aplicar uma ou mais sombra efeito queda de uma caixa. E mais uma vez, este efeito só é suportada no Firefox, Safari, Chrome e Opera, por enquanto.
Property Box sombra contém seis atributos:
-Caixa de sombra: 1px 1px 1px 1px RGBA (0,0,0,1) inserção ;
propriedade: x -offset , y -offset , blur de distância , distância spread , cor , atributo para inserir sombras interiores ;
Atributos Descrição
distância x Deslocamento horizontal da sombra. Os valores positivos para tornar a cair sombra no lado direito da caixa. Os valores negativos para fazer sombras caem sobre a esquerda.
y-offset Deslocamento vertical da sombra. Os valores positivos para fazer sombra a queda abaixo da caixa. Os valores negativos para fazer sombras caem em cima da caixa.
Blur
distância
Os valores negativos não são permitidos. Se o valor for zero, a borda da sombra será nítida. O mais positivo é o valor, mais desfoque a sombra é.
Espalhe a distância Os valores negativos causam sombra de encolher para dentro. valor positivo faz sombra a se expandir em todas as direções.
Inserção Adicionando este atributo com a sintaxe irá criar um efeito de sombra interior.
Cor Cor da sombra. código hexadecimal, RGB ou RGBA pode ser usado como o valor.
Aqui estão alguns exemplos agrupados de acordo com os atributos usados. Eu usei RGBA para a cor. Então, eu quero explicar sobre RGBA também. RGBA obras similares, como o RGB anterior usado em CSS2. Mas, RGBA inclui 'alfa' para permitir a especificação da opacidade de uma cor.
RGBA ( R , G , B , A )

R: 0-255
G: 0-255
B: 0-255
A :0-1
Se você está menos familiarizado com a cor RGB, você pode usar geradores on-line e em seguida, adicione um valor de opacidade para criar RGBA.
CSS3 "shadow box" Exemplos
Sem sombra de uso de caixa
Esta caixa normal, com os cantos de ponta afiada foi criado usando o seguinte código.
<div style="background-color:#F1F1F1; border:3px #DDDDDD;"> sólidos </ div>
Esta caixa normal, com cantos arredondados foi criado usando o seguinte código.
<div #DDDDDD;-webkit-border-radius: border:3px style="background-color:#F1F1F1; sólidos 20px; -moz-border-radius: 20px;border-radius: 20px;padding: 10px;"> < / div>
Shadow (distância x e y-offset attibutes usado)
-Webkit-box-shadow: 5px 5px RGBA (0,0,0,0.4);
-Moz-box-shadow: 5px 5px RGBA (0,0,0,0.4);
box-shadow: 5px 5px RGBA (0,0,0,0.4);
-Webkit-box-shadow: 5px 5px RGBA (0,0,0,0.4);
-Moz-box-shadow: 5px 5px RGBA (0,0,0,0.4);
box-shadow: 5px 5px RGBA (0,0,0,0.4);
RGBA-5px-5px (0,0,0,0.4);:-webkit-box-shadow
RGBA-5px-5px (0,0,0,0.4);:-moz-box-shadow
box-shadow:-5px-5px RGBA (0,0,0,0.4);
Blur uso do atributo
-Webkit-box-shadow: 5px 5px 5px RGBA (0,0,0,0.4);
-Moz-box-shadow: 5px 5px 5px RGBA (0,0,0,0.4);
box-shadow: 5px 5px 5px RGBA (0,0,0,0.4);
-Webkit-box-shadow: 0px 0px 20px RGBA (0,0,0,0.4);
-Moz-box-shadow: 0px 0px 20px RGBA (0,0,0,0.4);
box-shadow: 0px 0px 20px RGBA (0,0,0,0.4);
Difundir o uso de atributos
-Webkit-box-shadow: 0px 0px 10px 10px RGBA (0,0,0,0.4);
-Moz-box-shadow: 0px 0px 10px 10px RGBA (0,0,0,0.4);
box-shadow: 0px 0px 10px 10px RGBA (0,0,0,0.4);
-Webkit-box-shadow: 0px 10px 20px 0px RGBA (0,0,0,0.4);
-Moz-box-shadow: 0px 10px 20px 0px RGBA (0,0,0,0.4);
box-shadow: 0px 10px 20px 0px RGBA (0,0,0,0.4);
Inserir o uso de atributo para sombra interna
-Webkit-box-shadow: 10px 10px rgba inset (0,0,0,0.4);
-Moz-box-shadow: 10px 10px RGBA (0,0,0,0.4) inserida;
box-shadow: 10px 10px RGBA (0,0,0,0.4) inserida;
Inset com Blur
-Webkit-box-shadow: 10px 10px 10px RGBA (0,0,0,0.4) inserida;
-Moz-box-shadow: 10px 10px 10px RGBA (0,0,0,0.4) inserida;
box-shadow: 10px 10px 10px RGBA (0,0,0,0.4) inserida;
Inset com Blur e Spread
-Webkit-box-shadow: 10px 10px 10px 10px RGBA (0,0,0,0.4) inserida;
-Moz-box-shadow: 10px 10px 10px 10px RGBA (0,0,0,0.4) inserida;
box-shadow: 10px 10px 10px 10px RGBA (0,0,0,0.4) inserida;
De agora em diante, nós temos planejado escrever sobre tutoriais CSS3 e espero que estes tutoriais são úteis.

fonte e créditos: 
bloggermint

0 comentários:

Postar um comentário

Mensagem do formulário de comentário:

Google+ Followers