Recientemente, tuve que instalar Firefox 3.5 porque quería instalar Firebug 1.4 , así que accidentalmente entré en contacto con la hermosa sombra de texto en el fondo de WordPress. También es la propiedad text-shadow en CSS. Así que hoy recopilé algo de información. Espero que pueda ser una inspiración para todos.
Primero, echemos un vistazo a la parte donde se usa text-shadow en el backend de WordPress 2.8 (flecha verde). ¿Qué opinas? Sí, estas son propiedades CSS3, no imágenes.
¿Qué es la sombra de texto?
text-shadow ya existía en CSS2, y ahora CSS3 se está preparando para agregarlo. Y como solo Safari siempre ha soportado este atributo, rara vez vemos aplicaciones reales hasta hace poco, cuando el soporte de Firefox 3.5 despertó el interés de la gente. en ello.
text-shadow puede admitir la adición de sombras al texto, de modo que podamos usar atributos css3 para aumentar la textura del texto durante el diseño sin usar ninguna imagen.
Los navegadores actualmente compatibles incluyen Firefox 3.1+, Safari 3+, Opera 9.5+ y otros navegadores modernos (los datos pueden estar sesgados, por supuesto, la familia IE no puede admitirlos).
A continuación, observe la sintaxis de text-shadow:
sombra de texto: color longitud longitud longitud;
color: color; longitud se refiere respectivamente a " longitud de dirección del eje X longitud de dirección del eje Y radio de desenfoque de sombra " en orden
Los valores positivos en el eje X significan hacia la derecha y los valores negativos hacia la izquierda. De la misma manera, los valores negativos en el eje Y significan hacia arriba. Cualquiera de los valores puede ser cero. o vacío (se procesará de forma predeterminada)
Por ejemplo:
sombra de texto: -1px 2px 3px #ffb69a;
Significa que la sombra está 1 px hacia la izquierda en la dirección del eje X, 2 px hacia abajo en la dirección del eje Y, el radio de desenfoque de la sombra es 3 px y el color es #ffb69a.
Algunos experimentos y demostraciones.
Hice un pequeño experimento y creé una página de demostración . Para permitir que los usuarios cuyos navegadores no admitan la sombra de texto vean el efecto de sombra, mire la captura de pantalla a continuación (un amigo dijo que el "Firebird" parece un "pollo"). :
Si está utilizando Firefox 3.1+, Safari y otros navegadores, haga clic en Demostración directamente.