Tecnologia do Blogger.

Pesquisar

Mostrando postagens com marcador box. Mostrar todas as postagens
Mostrando postagens com marcador box. Mostrar todas as postagens

26/07/2012

Box-shadow/recursos/CSS3



"Box-shadow, 
um dos 

melhores novos 

recursos do 

CSS3"
Box-shadow/recursos/CSS3





box-shadow 

propriedade permite aos designers facilmente implementar 

sombras múltiplas (externo ou interno) 

em elementos de caixa,

especificando

valores para

cor, 

tamanho, 

blur e 

offset.


Suporte do navegador está crescendo de tarde com o Mozilla (Firefox), Webkit (Safari / Chrome / Konqueror), o Opera eo IE9 Platform Preview todos com uma implementação decente do spec, embora Mozilla e Webkit ainda exigir a sua respectiva -moz- e -webkit - prefixos (nota Mozilla Firefox 4.0 + não requer mais o -moz- prefixo).
Aqui está um exemplo básico:
Firefox, Safari / Chrome, Opera e IE9 usuários deve ver uma sombra cinza desaparecendo sob esta caixa.
Em teoria, o código para isso é simples:
# Exemplo1 {
box-shadow: 10px 10px 5px # 888;
}
Mas no momento, como acontece com muitos outros 'experimental' CSS3 propriedades, você vai precisar usar os seguintes prefixos para apoiar Mozilla e Webkit:
# Exemplo1 {
-moz-box-shadow: 10px 10px 5px # 888;
-webkit-box-shadow: 10px 10px 5px # 888;
box-shadow: 10px 10px 5px # 888;
}

Como funciona

box-shadow propriedade pode aceitar uma lista separada por vírgulas de sombras, cada um definido por 2-4 valores de comprimento (especificando a fim o deslocamento horizontal, vertical deslocamento, distância borrão opcional e distância opcional propagação da sombra), um valor de cor opcional e um opcional " inset palavra-chave "(para criar uma sombra interna, ao invés de sombra padrão externo).

A Sintaxe:
box-shadow: none | <shadow> [, <shadow> ] *
<shadow> = inset? && [ <length> {2,4} && <cor> ? ]

Exemplos:
box-shadow: 10px 10px;
box-shadow: 10px 10px 5px # 888;
box-shadow: 2px 2px 2px inset 2px preta;
box-shadow: 10px 10px # 888,-10px-10px # f4f4f4, 0px 0px 5px 5px # cc6600 ;

Vamos primeiro olhar para a forma de criar uma sombra básica exterior, antes de ir para olhar para as sombras, de inserção de palavras-chave de camadas múltiplas e como incrementar suas sombras com cores RGBA (?).

Criando uma sombra básica

Por padrão, as sombras são desenhadas no exterior dos elementos. De acordo com a especificação;
Um exterior box-shadow lança uma sombra como se a borda da caixa- do elemento eram opacas. A sombra é desenhada fora da borda fronteira só: ele é cortado dentro da borda da caixa- do elemento.
O primeiro passo é a definir a forma da sombra, especificando 2-4 valores de comprimento.
O primeiro valor define o deslocamento horizontal da sombra, com um valor positivo compensar o sombra para a direita do elemento, e um valor negativo para a esquerda.
O segundo valor define o vertifical deslocamento da sombra, com um valor positivo compensando a sombra a partir do fundo do elemento, e um valor negativo a partir do topo.
Se for fornecido, um valor opcional terceiro define a distância borrão da sombra. Apenas os valores positivos são permitidos, e quanto maior o valor, mais borda da sombra é borrada. A especificação não inclui um algoritmo exacto para a forma como a distância borrão deve ser calculada, no entanto, faz elaborada como se segue:
... Por um longo borda da sombra, em linha reta, isso deve criar uma cor de transição do comprimento da distância borrão que é perpendicular e centrada na borda da sombra, e que varia entre a cor da sombra completa ao final do raio dentro da sombra para totalmente transparente no ponto final fora dela.
Um valor opcional quarto pode ser fornecido para definir a distância propagação da sombra. Um valor positivo fará com que a forma de sombra para expandir em todas as direções, enquanto um valor negativo fará com que a forma de sombra ao contrato. A especificação entra em muito maior detalhe em como a forma de sombra é calculada como se segue:
Se uma distância propagação é definido, a sombra é expandida para fora ou para dentro contraído por um equivalente operação para aplicar o dobro do valor absoluto do valor propagação a uma operação de borrão, tal como definido abaixo e limiarização o resultado de tal modo que para uma distância propagação positiva todos os não- pixels transparentes são dadas a cor da sombra completo e por uma distância propagação negativa todos os pixels não opacas são feitas transparente. A UA pode esta operação aproximada tomando uma partida fora da quantidade especificada normal para o perímetro sombra original. Em alternativa, a UA pode aproximar a forma do perímetro transformado sombra outsetting (insetting, para sombras internas) arestas retas da sombra pela distância propagação e aumentando (diminuindo, por sombras interiores) e piso em zero no canto raios no mesmo montante. (O UA pode ainda combinar estes métodos, utilizando um método para sombras exteriores e outro para os interiores.) Para cantos com um raio de zero fronteira, no entanto, o canto deve permanecer afiado-a operação é equivalente a dimensionar a forma de sombra. Em qualquer caso, a largura efectiva e altura da forma de sombra é floored em zero. (A forma de sombra zero-tamanho causaria uma sombra externa a desaparecer, e uma sombra interna para cobrir todo o estofamento box.)
O diagrama abaixo (retirado dos Fundos do W3C e Recomendação Fronteiras Candidate) oferece um bom exemplo dos efeitos de propagação e blur na sombra:
Raio de propagação e diagrama de raio de desfoque
Um valor de cor opcional também podem ser fornecidos, logo após os 2-4 valores de comprimento, para definir a cor da sombra. Se não for fornecido, um padrão UA-escolhido deve ser aplicado, no entanto, enquanto em Firefox/Opera/IE9 a cor padrão é preto, na sombra (webkit) Safari / Chrome não é visível a menos que uma cor é especificada.
Aqui estão alguns exemplos de sombras com offsets diferentes, propagação e borrão.

Exemplos:
A
B
C
D
E
F

Exemplo A mostra uma sombra de deslocamento para a esquerda e superior por 5px:
# Example_A {
-moz-box-shadow:-5px-5px # 888;
-webkit-box-shadow:-5px-5px # 888;
caixa de sombra:-5px-5px # 888;
}

B Exemplo mostra a sombra mesmo com uma distância de 5px borrão:
{# Example_B
:; 5px-5px-5px # 888-moz-box-shadow
: 5px-5px-5px # 888;-webkit-box-shadow
box-shadow:-5px-5px 5px # 888;
}

Exemplo C mostra a sombra mesmo com uma distância de propagação 5px:
# Example_C {
-moz-box-shadow:-5px-5px 5px 0 # 888;
-webkit-box-shadow:-5px-5px 5px 0 # 888;
caixa de sombra:-5px-5px 5px 0 # 888;
}

Exemplo D mostra a mesma sombra com ambos um borrão distância de 5px e uma distância de propagação 5px:
# Example_D {
-moz-box-shadow:-5px-5px 5px 5px # 888;
-webkit-box-shadow:-5px-5px 5px 5px # 888;
caixa de sombra:-5px-5px 5px 5px # 888;
}

E exemplo mostra uma sombra sem offset e uma distância de 5px borrão:
# Example_E {
-moz-box-shadow: 0 0 5px # 888;
-webkit-box-shadow: 0 0 5px # 888;
box-shadow: 0 0 5px # 888;
}

F exemplo mostra uma sombra, sem deslocamento e distância tanto um borrão de 5px e uma distância de 5px propagação:
# Example_F {
-moz-box-shadow: 0 0 5px 5px # 888;
-webkit-box-shadow: 0 0 5px 5px # 888;
box-shadow: 0 0 5px 5px # 888;
}


Criando uma sombra interna com a palavra 'inserção'

Um opcional ' inset palavra-chave pode ser fornecida, precedendo o comprimento e os valores de cor.Se estiver presente, esta palavra-chave faz com que a sombra para ser desenhado dentro do elemento.De acordo com a especificação:
Um interior box-shadow lança uma sombra como se tudo fora da borda de preenchimento eram opacas. A sombra interna é desenhada no interior da borda enchimento apenas: ela é cortada fora da caixa de enchimento do elemento.
Aqui estão os exemplos supramencionados, desta vez com o ' inset presente palavra-chave '.

Exemplos:
G
H
Eu
J
K
L

G exemplo mostra uma sombra interna deslocado para a esquerda e de cima por 5px:
# Example_G {
-moz-box-shadow: inset-5px-5px # 888;
-webkit-box-shadow: inset-5px-5px # 888;
box-shadow: inset-5px-5px # 888;
}

Exemplo H mostra a mesma sombra interior com uma distância de 5px borrão:
# Example_H {
-moz-box-shadow: inset-5px-5px 5px # 888;
-webkit-box-shadow: inset-5px-5px 5px # 888;
box-shadow: inset-5px-5px 5px # 888;
}

Exemplo I mostra a mesma sombra interior com uma distância de propagação 5px:
# Example_I {
-moz-box-shadow: inset-5px-5px 5px 0 # 888;
-webkit-box-shadow: inset-5px-5px 5px 0 # 888;
box-shadow: inset-5px-5px 5px 0 # 888 ;
}

J Exemplo mostra a mesma sombra interior com ambos um borrão distância de 5px e uma distância de propagação 5px:
# Example_J {
-moz-box-shadow: inset-5px-5px 5px 5px # 888;
-webkit-box-shadow: inset-5px-5px 5px 5px # 888;
box-shadow: inset-5px-5px 5px 5px # 888 ;
}

K exemplo mostra uma sombra interna sem offset e uma distância de 5px borrão:
# Example_K {
-moz-box-shadow: inset 0 0 5px # 888;
-webkit-box-shadow: inset 0 0 5px # 888;
box-shadow: interior 0 0 5px # 888;
}

L exemplo mostra uma sombra interna, sem deslocamento e distância tanto um borrão de 5px e uma distância de 5px propagação:
# Example_L {
-moz-box-shadow: inset 0 0 5px 5px # 888;
-webkit-box-shadow: inset 0 0 5px 5px # 888;
box-shadow: inset 0 0 5px 5px # 888;
}


Sombras de camadas múltiplas

box-shadow propriedade permite que os elementos a ter múltiplas sombras, especificadas por uma lista vírgula seperated. Quando mais do que uma sombra é especificado, as sombras são colocadas em camadas da frente para trás, como no exemplo seguinte.

Exemplo:
M
Exemplo M mostra cinco sombras especificados na seguinte ordem: primeiro uma sombra preta com uma distância de propagação de px e uma distância borrão de px, por outro lado uma sombra cal deslocamento para o canto superior direito, em terceiro lugar uma sombra vermelho deslocado para a parte inferior direita com um borrão distância aplicada, em quarto lugar uma sombra amarela deslocado para a esquerda inferior e, finalmente, uma sombra azul deslocado para a parte superior esquerda com uma distância de desfoque aplicado:
# Example_M {
-moz-box-shadow: 10px 0 0 5px preto, 40px 30px-cal, 40px 30px 50px vermelho, 40px 30px-amarelo,-40px-30px 50px azul;
-webkit-box-shadow: 10px 0 0 5px preto , 40px 30px-cal, 40px 30px 50px vermelho, 40px 30px-amarelo,-40px 30px 50px-azul;
box-shadow: 10px 0 0 5px preto, 40px 30px-cal, 40px 30px 50px vermelho, 40px 30px-amarelo,-40px 30px 50px-azul;
}


Apimentar sombras com RGBa cor e border-radius

box-shadow propriedade pode ser melhorada usando CSS3 cores RGBA para criar sombras com diferentes níveis de opacidade, como o demonstram os exemplos abaixo.

Exemplos:

N
O
P


Exemplo N mostra uma sombra negra, especificados usando padrão de cor RGB, deslocado para a direita e inferior por 5px:
# Example_N {
-moz-box-shadow: 5px 5px rgb (0,0,0);
-webkit-box-shadow: 5px 5px rgb (0,0,0);
box-shadow: 5px 5px rgb (0,0 , 0);
}

O exemplo mostra a mesma sombra, desta vez com a cor preta especificado usando a cor RGBa com uma opacidade de 70%:
# Example_O {
-moz-box-shadow: 5px 5px rgba (0,0,0,0.7);
-webkit-box-shadow: 5px 5px rgba (0,0,0,0.7);
box-shadow: 5px 5px rgba (0,0,0,0.7);
}

P exemplo mostra a mesma sombra, desta vez com a cor preta especificado usando a cor RGBa com uma opacidade de 50%:
# Example_P {
-moz-box-shadow: 5px 5px rgba (0,0,0,0.5);
-webkit-box-shadow: 5px 5px rgba (0,0,0,0.5);
box-shadow: 5px 5px rgba (0,0,0,0.5);
}

caixa de sombra- propriedade pode também ser aplicada a elementos com cantos arredondados, criado usando o raio fronteira- propriedade, caso em que a sombra vai seguir a curva especificado pela margem de raio- propriedade (nota: embora IE9 parece lutar com este) .

Exemplos:
Q
R

Exemplo Q mostra uma sombra deslocada para a parte inferior e direita, 5px, com um border-radius de 5px aplicada a cada esquina:
# Example_Q {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px preto;
-webkit-box-shadow: 5px 5px preto;
box-shadow: 5px 5px black;
}

R Exemplo mostra a sombra mesmo com uma distância de 5px borrão:
# Example_R {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px preto;
-webkit-box-shadow: 5px 5px 5px preto;
box-shadow: 5px 5px 5px preto ;
}


Suporte do navegador

box-shadow propriedade não pegou tão rapidamente quanto alguns de seus pares (como o border-radius propriedade) ea propriedade foi removido dos Fundos CSS3 e especificações Fronteiras quando atingiu Recomendação Candidate no início deste ano, enquanto se aguarda o desenvolvimento, No entanto, a propriedade foi reintroduzido na última versão da especificação e apoio navegador tem vindo a crescer de forma constante nos últimos tempos.
A tabela abaixo fornece uma visão geral do suporte do navegador atual.
NavegadorSuporte básicoSombras múltiplasinset palavra-chaveEspalhe raio
Internet Explorer9box-shadow999
Firefox
(Gecko)
4,0
(2,0)
box-shadow4,0
(2,0)
4,0
(2,0)
4,0
(2,0)
3,5
(1.9.1)
-Moz-box-shadow3,5
(1.9.1)
3,5
(1.9.1)
3,5
(1.9.1)
Ópera10,5box-shadow10,510,510,5
Safari / Chrome
(WebKit)
3.0/1.0
(522)
-Webkit-box-shadow4.0/1.0
(528)
5.0/4.0
(533)
5.0/4.0
(533)
Navegador de suporte de dados de cortesia Mozilla Developer Centro .



fonte:


















 
   
  clicar selecionar copiar colar 
o texto da cx e 
divulgar
burranaoloirasim
Published: By: edilene bds - 07:36

Seguidores

Popular Posts

Dicas

tutorial

Translate

 

Seguir por e-mail