To Add Horizontal Sub Navigaion on BloggerBeautiful Social Bookmarking Widget For Bloggerfonte e creditos:http://www.bloggermint.com/2010/11/css3-tutorials-box-shadow-effect/traduzido:Tutoriais CSS3: efeito caixa de sombra Anteriormente, nos escrevemos um tutorial sobre como criar cantos arredondados, com a ajuda de CSS3. Hoje o tutorial e em outro grande efeito que pode ser conseguido utilizando uma propriedade CSS3, caixa de sombra . Esta caixa-sombra propriedade permite que voce aplicar uma ou mais sombra efeito queda de uma caixa. E mais uma vez, este efeito so e suportada no Firefox, Safari, Chrome e Opera, por enquanto.Property Box sombra contem seis atributos:-Caixa de sombra: 1px 1px 1px 1px RGBA (0,0,0,1) insercao ;propriedade: x -offset , y -offset , blur de distancia , distancia spread , cor , atributo para inserir sombras interiores ; Atributos Descricao distancia 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 distancia Os valores negativos nao sao permitidos. Se o valor for zero, a borda da sombra sera nitida. O mais positivo e o valor, mais desfoque a sombra e. Espalhe a distancia Os valores negativos causam sombra de encolher para dentro. valor positivo faz sombra a se expandir em todas as direcoes. Insercao Adicionando este atributo com a sintaxe ira criar um efeito de sombra interior. Cor Cor da sombra. codigo hexadecimal, RGB ou RGBA pode ser usado como o valor. Aqui estao alguns exemplos agrupados de acordo com os atributos usados. Eu usei RGBA para a cor. Entao, eu quero explicar sobre RGBA tambem. RGBA obras similares, como o RGB anterior usado em CSS2. Mas, RGBA inclui 'alfa' para permitir a especificacao da opacidade de uma cor.RGBA ( R , G , B , A )R: 0-255G: 0-255B: 0-255A :0-1Se voce esta menos familiarizado com a cor RGB, voce pode usar geradores on-line e em seguida, adicione um valor de opacidade para criar RGBA.CSS3 "shadow box" ExemplosSem sombra de uso de caixaEsta caixa normal, com os cantos de ponta afiada foi criado usando o seguinte codigo.<div style="background-color:#F1F1F1; border:3px #DDDDDD;"> solidos </ div>Esta caixa normal, com cantos arredondados foi criado usando o seguinte codigo.<div #DDDDDD;-webkit-border-radius: border:3px style="background-color:#F1F1F1; solidos 20px; -moz-border-radius: 20px;border-radius: 20px;padding: 10px;"> < / div>Shadow (distancia 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-shadowRGBA-5px-5px (0,0,0,0.4);:-moz-box-shadowbox-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: