Recentemente, tive que instalar o Firefox 3.5 porque queria instalar o Firebug 1.4 , então acidentalmente entrei em contato com a bela sombra de texto no fundo do WordPress. É também a propriedade text-shadow em CSS. Espero que possa ser uma inspiração para todos.
Primeiro, vamos dar uma olhada na parte onde o text-shadow é usado no backend do WordPress 2.8 (seta verde). Sim, essas são propriedades CSS3, não imagens.
O que é sombra de texto?
text-shadow já existia no CSS2, e agora o CSS3 está se preparando para adicioná-lo a ele. E como apenas o Safari sempre suportou esse atributo, raramente vemos aplicativos reais até recentemente, quando o suporte do Firefox 3.5 para ele foi revivido. nele.
text-shadow pode suportar a adição de sombra ao texto, para que possamos usar atributos css3 para aumentar a textura do texto durante o design sem usar nenhuma imagem.
Os navegadores atualmente suportados incluem Firefox 3.1+, Safari 3+, Opera 9.5+ e outros navegadores modernos (os dados podem ser tendenciosos, é claro, a família IE não pode suportá-los).
A seguir, observe a sintaxe do text-shadow:
text-shadow: cor comprimento comprimento comprimento;
cor: cor; comprimento refere-se respectivamente a " comprimento da direção do eixo X comprimento da direção do eixo Y raio de desfoque da sombra " em ordem
Valores positivos no eixo X significam para a direita e valores negativos à esquerda. Da mesma forma, valores negativos no eixo Y significam para cima. ou vazio (será processado por padrão)
Por exemplo:
sombra de texto: -1px 2px 3px #ffb69a;
Isso significa que a sombra está 1px à esquerda na direção do eixo X, 2px para baixo na direção do eixo Y, e o raio de desfoque da sombra é 3px e a cor é #ffb69a
Algumas experiências e demonstrações
Fiz um pequeno experimento e criei uma página de demonstração . Para permitir que usuários cujos navegadores não suportam sombra de texto vejam o efeito de sombra, veja a captura de tela abaixo (um amigo disse que o "Firebird" se parece com uma "galinha") :
Se você estiver usando Firefox 3.1+, Safari e outros navegadores, clique diretamente em Demo .