Como aplicar dois efeitos css3 sombra
CSS inclui dois efeitos de sombra, ambos os quais necessitam de, pelo menos, duas propriedades: as dimensões de sombra horizontal e vertical. efeitos CSS3 estão sendo rapidamente integrado no design da página web e designers estão chegando com algumas maneiras interessantes e criativas para aplicá-las.
Conteúdo
Video: Como Desenhar Luz e Sombra - Aprenda a Desenhar #2
efeitos de sombra do CSS3 são os seguintes:
Sombra da caixa é aplicado às fronteiras em torno de seletores.
Text-shadow aplica sombras ao texto.
utilização Sombra da caixa como uma sintaxe exemplo parecido com este:
box-shadow: h-sombra v-shadow-
Positivo h-sombra valores gerar uma sombra à direita do texto, enquanto negativo h-sombra valores gerar uma sombra à esquerda do texto. Positivo v-sombra valores gerar uma sombra abaixo do texto, enquanto que os valores negativos criar uma sombra acima do texto. Os valores são normalmente definidos em pixels.
Sombras também muitas vezes incluem um borrão propriedade. o borrão valor define a espessura da borrão elemento do gradiente - essencialmente como amplamente ao espaço o gradiente na sombra. A maior borrão valor cria um, assim, o efeito desfocada, enquanto que uma menor borrão valor cria uma nítida, nítida gota-sombra. o borrão valor aparece após a h-sombra e v-sombra valores na definição de estilo, como este:
box-shadow: h-sombra v-sombra Blur
Você também pode definir uma cor de sombra (se nenhuma cor for especificado, uma cor padrão do navegador aparece).
Assim, por exemplo, no exemplo de código a seguir, a caixa-de sombra é definido com uma sombra horizontal que se estende 3 pixels para a direita, 6 pixels para baixo, com um efeito de desfoque forma, que se aplica para criar um borrão gradiente semelhante que se estende 3 pixels para a gota-sombra. E uma cor foi atribuída à sombra caixa (prata).
box-shadow: 3px 3px 6px prat
Video: Como fazer a Sombra do Flat Design no Photoshop
Propagação define o tamanho da sombra. Por padrão, a sombra é o mesmo tamanho que o elemento ao qual ele&rsquo-s aplicada, mas você pode fazer essa sombra maior (ou menor), adicionando uma espalhar valor para a definição de estilo.
Adicionando o valor de inserção para uma definição sombra inverte a sombra, colocando-o dentro em vez de fora da caixa.
Aqui&rsquo-s um exemplo de um Sombra da caixa definição que cria uma sombra que se estende de 12 pixels para a direita e 18 pixels para baixo, é de 25 pixels maior do que o elemento original, ao qual ele é aplicado, e é na cor prata:
box-shadow: 12px 18px 12px 25px prat
Aplicada a uma caixa, os valores do exemplo anterior parecer com o seguinte:
Finalmente sombras pode ser inserir- ou seja, colocado no interior do elemento ao qual eles&rsquo re-aplicada. A figura a seguir demonstra como impactos inset a mesma caixa-sombra mostrado anteriormente.
Criar um efeito de box-shadow
efeitos Box-sombra são definidos com dois parâmetros essenciais: deslocamento horizontal e vertical.
Por exemplo, para criar um estilo de classe que gera um box-shadow com 6 pixels de deslocamento horizontal e 12 pixels de deslocamento vertical, você&rsquo-d usar este código:
box-shadow: 6px 12px;
Se você queria para definir o comprimento do borrão, você&rsquo-D Adicionar um terceiro valor. E se você queria para definir a cor da sombra, você&rsquo-d adicionar esse valor cor:
box-shadow: 6px 12px 9px grisalhos
Você precisa fazer mais trabalho se a caixa-sombra vai funcionar em todos os navegadores modernos. Chrome, Opera, instalações atuais do Firefox, e IE9 suportar o efeito caixa-sombra sem prefixo. Mas você ainda precisa criar versões prefixadas do código para versões mais antigas do Firefox e, no presente momento, todas as versões do Safari.
O código a seguir define um seletor de classe chamada Sombra da caixa que funciona em todos os navegadores da geração atual e tem alguns valores de preenchimento e margem:
.Sombra da caixa {
box-shadow: 6px 12px 9px grisalhos
-webkit-box-shadow: 6px 12px 9px grisalhos
-moz-box-shadow: 6px 12px 9px grisalhos
padding: 9px;
margem: 24 pixels; }
E lembre-se, você&rsquo-ve definido um estilo de classe. Para aplicar esse estilo de classe, ele ainda tem de ser ligado a um elemento HTML. Por exemplo, você pode aplicar o estilo de classe definido no lote anterior de código para uma marca parágrafo com o seguinte HTML:
conteúdo vai aqui
A figura a seguir mostra essa caixa-sombra aplicada a um parágrafo no navegador Safari.
Aplique sombras digitar
O efeito text-shadow, curiosamente, é suportado em navegadores (exceto para o IE) sem prefixo necessário.
A, a sintaxe básica essencial para a criação de um texto-sombra é
ext-sombra: h v cor
Nesta sintaxe, h é o compensando horizontal v é a vertical e compensando cor é o valor da cor.
O exemplo a seguir cria um selector de classe (.text_shadow) Que aplica um text-shadow com um deslocamento horizontal de 4 pixel, um 1-pixel deslocamento vertical, o cinza escuro cor:
.text_shadow {
text-shadow: 4px 1px grisalhos
}
Sombras de texto são por vezes aplicadas ao tipo de branco para um efeito limpo, convidativo. A figura a seguir demonstra a text_shadow estilo classe definida no código anterior para o tipo de branco.
