Tutoriais CSS3: efeito caixa de sombra
Autor: Edilene brandao da silva | Publicado: 2014-04-18T15:51:00-07:00

CSS3 TUTORIALS: BOX SHADOW&nbsp; 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.

&lt;div style=”background-color:#F1F1F1; border:3px solid #DDDDDD;”&gt;&lt;/div&gt;


This normal box with rounded corners was created using the following code.

&lt;div  style=”background-color:#F1F1F1; border:3px solid  #DDDDDD;-webkit-border-radius: 20px; -moz-border-radius:  20px;border-radius: 20px;padding: 10px;”&gt;&lt;/div&gt;

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.


Related Posts:

CSS3 Tutorials: Rounded Corners
MintShare – Pure CSS &amp; HTML Based Social Share Widget
How To Add Subscribe Widget On Blogger Sidebar
How To Add Horizontal Sub Navigaion on Blogger
Beautiful Social Bookmarking Widget For Blogger




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.

&lt;div style="background-color:#F1F1F1; border:3px #DDDDDD;"&gt; sólidos &lt;/ div&gt;


Esta caixa normal, com cantos arredondados foi criado usando o seguinte código.

&lt;div  #DDDDDD;-webkit-border-radius: border:3px  style="background-color:#F1F1F1; sólidos 20px; -moz-border-radius:  20px;border-radius: 20px;padding: 10px;"&gt; &lt; / div&gt;

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.


Relacionados Mensagens:

Tutoriais CSS3: Cantos arredondados
CSS Pure &amp; Widget ações HTML Baseado Social - MintShare
Como adicionar Inscrever widget na barra lateral do Blogger
Como adicionar Navigaion Sub Horizontal no Blogger
Beautiful Widget Social Bookmarking Para Blogger



fonte e créditos:&nbsp;
bloggermint