Como aplicar dois efeitos de sombra CSS3
CSS inclui dois efeitos de sombra, ambos os quais necessitam de, pelo menos, duas propriedades: sombra dimensões horizontais e verticais. efeitos CSS3 estão a ser rapidamente integrados no design da página web e designers estão chegando com algumas maneiras interessantes e criativas para aplicá-las.
efeitos de sombra do CSS3 são os seguintes:
Box-sombra é aplicado às fronteiras em torno de seletores.
Text-shadow aplica sombras ao texto.
utilização box-shadow como uma sintaxe de exemplo se parece com isso:
box-shadow: h-sombra v-shadow-
Positivo h-sombra valores gerar uma sombra à direita do texto, enquanto negativo h-sombra gerar valores de uma sombra para a 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 definidas 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 para o espaço o gradiente na sombra. A maior borrão valor cria um, bem, efeito blurrier, enquanto que um 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 seguinte exemplo de código, a caixa-sombra é definida com uma sombra horizontal que se estende 3 pixels para a direita, 6 pixels para baixo, com um efeito de borrão médio, que se aplica a criar um borrão gradiente-like que se estende 3 pixels para a gota-sombra. E uma cor foi atribuída à sombra box (prata).
box-shadow: 3px 3px 6px prateada
Espalhe define o tamanho da sombra. Por padrão, a sombra é o mesmo tamanho que o elemento ao qual ele é aplicado, 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 está um exemplo de um box-shadow 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-prata
Aplicada a uma caixa, os valores do exemplo anterior parecer com o seguinte:
Finalmente pode ser sombras inserir- isto é, colocado no interior do elemento ao qual eles são aplicados. A figura a seguir demonstra como impactos inserir 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 na vertical offset, você pode usar este código:
box-shadow: 6px 12px;
Se você quisesse definir a duração do desfoque, você gostaria de acrescentar um terceiro valor. E se você queria para definir a cor da sombra, você adicionar esse valor de 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 box-shadow sem prefixo. Mas você ainda precisa criar versões prefixadas do código para versões mais antigas do Firefox e, neste escrito, todas as versões do Safari.
O código a seguir define um seletor de classe chamada box_shadow que funciona em todos os navegadores da geração atual e tem alguns valores de preenchimento e margem:
.box_shadow {
box-shadow: 6px 12px 9px grisalhos
-webkit-box-shadow: 6px 12px 9px grisalhos
-moz-box-shadow: 6px 12px 9px grisalhos
padding: 9px;
margin: 24px; }
E lembre-se, você definiu 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 de parágrafo com o seguinte HTML:
conteúdo vai aqui
A figura a seguir mostra essa caixa-sombra aplicado a um parágrafo no navegador Safari.
Aplique sombras para 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 seletor de classe (.text_shadow) Que aplica um text-shadow com um deslocamento horizontal 4-pixel, a 1-pixel deslocamento vertical, o cinza escuro cor:
.text_shadow {
text-shadow: 4px 1px grisalhos
}
Texto de sombras às vezes são aplicadas ao tipo de branco para um efeito limpo, convidativo. A figura a seguir demonstra a text_shadow estilo de classe definida no código anterior com o tipo branco.
