Os designers costumam usar alguns efeitos de fonte e efeitos de página exclusivos, e a sombra é um deles. Ela pode fazer com que o texto e os elementos da página tenham um efeito tridimensional e se destaquem. Por exemplo, para sombras de texto, o método tradicional pode exigir o corte do texto e o uso direto de imagens. Se o SEO e o desempenho do site forem considerados, tecnologias como CSS Sprites também podem ser usadas para integrar imagens:
h2{ background:url(sprites.png) no-repeat 0 0; tamanho da fonte:0;
h2#title1{posição de fundo:0 -30px;}
h2#title2{posição de fundo:0 -60px;}
....
Isso é uma coisa complicada, juntar imagens levará muito tempo e, para obter melhores efeitos visuais, talvez seja necessário usar imagens png de 32 bits de alta qualidade, o que fará com que você enfrente o maldito IE 6 png problema de transparência!
Na verdade, podemos usar CSS completamente para obter o efeito de sombra do texto!
Você pode ver a demonstração primeiro.
Sombra de texto
text-shadow nos permite obter efeitos de sombra de texto perfeitos. Escrita básica:
sombra de texto:[raio de desfoque do eixo x da cor do eixo y],[raio de desfoque do eixo x da cor do eixo y]...
ou
sombra de texto:[cor do raio de desfoque do eixo x do eixo y],[cor do raio de desfoque do eixo x do eixo y]...
A cor aqui é a cor da sombra. Você pode escrever a cor primeiro ou por último. Os eixos xey são as posições de deslocamento de sua sombra, respectivamente, e o raio do desfoque pode ser entendido como o comprimento da sombra. E a maioria dos navegadores agora suporta sombras multicamadas. Você pode separar vários grupos de configurações com vírgulas (é claro que você também pode usar apenas uma única configuração).
Exemplo:
h1{cor:#000; fundo:#333; fonte:bold 24px/2 "Microsoft Yahei",Arial;
recuo do texto:2em;
sombra de texto: preto 2px 2px 2px }
O efeito é o seguinte:
Este atributo é atualmente suportado pela maioria dos navegadores, exceto IE. Para o IE, podemos usar o filtro de sombra para conseguir isso:
filtro: Sombra(Cor='preto', Direção='135', Força='2')
Você deve ter notado que usar o filtro de sombra só pode definir a direção do ângulo, mas não o eixo xy, e o eixo z também foi substituído pela força. Observe que ao usar este filtro, você não pode definir a cor de fundo , caso contrário o filtro será inválido! Além disso, se você não é muito bom em matemática e não entende o algoritmo de funções trigonométricas, pode usar outro filtro do IE: dropshadow:
filtro: dropshadow(OffX=2, OffY=2, Color='preto', Positivo='true');
Bem, o IE sempre nos impedirá, mas vale ressaltar que esses dois filtros do IE suportam sombras multicamadas ! Por exemplo, você pode escrever:
filtro: dropshadow(OffX=2, OffY=2, Color='red', Positive='true')
dropshadow(OffX=2, OffY=2, Color='amarelo', Positivo='verdadeiro')
dropshadow(OffX=2, OffY=2, Color='azul', Positivo='verdadeiro');
Para saber mais sobre esses dois filtros para IE, confira: Shadow e Dropshadow
Vejamos um exemplo de sombras multicamadas (ignorando o IE aqui):
h1{fonte:bold 32px/2 Verdana, Genebra, sem serifa cor:#f39;
sombra de texto:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0,5), 0 0 0,2em rgba(0, 0, 255, 0,9);}
O efeito é mostrado na figura:
Aqui usamos cor rgba, que é um método de declarar cor e transparência ao mesmo tempo em CSS, e é um atributo de cor suportado pela maioria dos navegadores de nível A ( exceto IE ). Para obter mais informações, consulte: Cor "RGBa". suporte ao navegador》——Ao mesmo tempo, recomendamos usar este método de escrita simples para translucidez de cores sólidas.
Compatibilidade do navegador para sombra de texto
Atualmente text-shadow é suportado pelo Firefox 3.5+, Safari 1.1+/chrome 2.0+ e opera 9.5, mas não é suportado pelo IE. Deve-se notar que apenas o Safari 4.0 suporta sombras multicamadas.
Todas as versões do IE não suportam sombra de texto;
Opera 9.5+ suporta de 6 a 9 camadas de sombras e usa ordem de renderização CSS2 (a primeira sombra definida está na parte inferior). E por motivos de desempenho, o raio de desfoque é limitado a 100px;
Gecko (Firefox) teoricamente suporta infinitas camadas de sombras de texto (mas não é recomendado tentar) e segue a nova ordem de renderização CSS3 (a sombra definida primeiro fica no topo);
O Safari 1.1-3.2 suporta apenas uma única camada de sombra de texto (apenas a declaração antes da primeira vírgula é exibida e a seguinte é ignorada). Safari 4.0+ suporta apenas sombras multicamadas e a nova ordem de renderização CSS3;
sombra de caixa
Vamos falar primeiro sobre o IE. O IE não suporta o atributo box-shadow, mas os dois filtros mencionados acima podem ser usados para obter efeitos de sombra. Isso significa que o IE não distingue entre sombra de texto e sombra de caixa ! Isto cria alguns problemas: o texto dentro do elemento herda as configurações de sombra do elemento. Mas se você não definir o fundo e a borda do elemento, apenas a sombra do texto aparecerá. Se você definir apenas o atributo background sem definir a borda, apenas a sombra da caixa aparecerá, e o texto não terá sombra e; se você definir apenas o atributo de borda e se o plano de fundo não estiver definido, a sombra da caixa aparecerá, e o texto e as imagens do conteúdo também terão sombras. Os alunos interessados podem tentar.
Ok, agora vamos esquecer o IE e dar uma olhada no box-shadow. Na verdade, depois de entender o text-shadow, o box-shadow é fácil de entender. Atualmente, apenas o Firefox e o Safari/Chrome suportam o atributo box-shadow por meio de atributos privados. Embora o navegador Opera atualmente não suporte este atributo, é mencionado em sua documentação que a próxima versão do mecanismo Presto 2.3 (a versão mais recente do mecanismo do Opera 10.10 é Presto 2.2.15) suportará box-shadow, então Let esperemos devagar.
A sintaxe de box-shadow é a mesma de text-shadow.
#boxShadow{
...
-webkit-box-shadow:2px 2px 2px preto;
-moz-box-shadow:2px 2px 2px preto;
...
}
Na verdade, box-shadow e border-radius são bons parceiros:
#boxShadow1{-moz-border-radius:10px;
-webkit-border-radius:10px;
raio da borda:10px;
borda: 1px sólido ddd;
-webkit-box-shadow:0 0 10px preto;
-moz-box-shadow:0 0 10px preto;
preenchimento: 10px;}
O efeito é mostrado na figura:
O Firefox só começou a suportar box-shadow na versão 3.5, e a renderização atual de sombras ainda não é perfeita.
Resumir
CSS shadow é um recurso muito útil em CSS3. Já podemos usar text-shadow no Firefox/webkit/Opera, e box-shadow será implementado em breve nesses navegadores. Somente o IE é único e ainda insiste em seus filtros ruins. Isso é realmente um fracasso.