Los diseñadores suelen utilizar algunos efectos de fuente y efectos de página únicos, y la sombra es uno de ellos. Puede hacer que el texto y los elementos de la página tengan un efecto tridimensional y se destaquen. Por ejemplo, para las sombras de texto, el método tradicional puede requerir recortar el texto y usar imágenes directamente. Si se considera el SEO y el rendimiento del sitio web, también se pueden usar tecnologías como CSS Sprites para integrar imágenes:
h2{ fondo:url(sprites.png) sin repetición 0 0; tamaño de fuente:0; sangría de texto:-9999em;...}
h2#título1{posición-fondo:0 -30px;}
h2#título2{posición-fondo:0 -60px;}
....
Esto es algo complicado, unir imágenes te llevará mucho tiempo y, para lograr mejores efectos visuales, es posible que tengas que usar imágenes png de 32 bits de alta calidad, lo que te hará enfrentarte al maldito png de IE 6. ¡Problema de transparencia!
De hecho, ¡podemos usar CSS completamente para lograr el efecto de sombra del texto!
Puedes ver la demostración primero.
Sombra de texto
text-shadow nos permite lograr efectos de sombra de texto perfectos. Escritura básica:
sombra de texto: [color del eje x radio de desenfoque del eje y], [color del eje x radio de desenfoque del eje y]...
o
sombra de texto: [color del radio de desenfoque del eje x, eje y], [color del radio de desenfoque del eje x, eje y]...
El color aquí es el color de la sombra. Puedes escribir el color primero o al final. El eje x y el eje y son las posiciones de desplazamiento de su sombra respectivamente, y el radio de desenfoque puede entenderse como la longitud de la sombra. Y la mayoría de los navegadores ahora admiten sombras multicapa. Puede separar varios grupos de configuraciones con comas (por supuesto, también puede usar una sola configuración).
Ejemplo:
h1{color:#000; fondo:#333; fuente:negrita 24px/2 "Microsoft Yahei",Arial;
sangría de texto: 2em;
sombra de texto: negro 2px 2px 2px;
El efecto es el siguiente:
Actualmente, este atributo es compatible con la mayoría de los navegadores excepto IE. Para IE, podemos usar el filtro de sombra para lograr esto:
filtro: Sombra (Color = 'negro', Dirección = '135', Fuerza = '2')
Es posible que hayas notado que el uso del filtro de sombra solo puede definir la dirección del ángulo, pero no el eje xy, y el eje z también ha sido reemplazado por la fuerza. Tenga en cuenta que al utilizar este filtro, no puede establecer el color de fondo ; de lo contrario, el filtro no será válido. Además, si no eres muy bueno en matemáticas y no entiendes el algoritmo de funciones trigonométricas, puedes utilizar otro filtro de IE: dropshadow:
filtro: sombra paralela (OffX=2, OffY=2, Color='negro', Positivo='verdadero');
Bueno, IE siempre nos frenará, pero vale la pena mencionar que estos dos filtros de IE admiten sombras multicapa . Por ejemplo, puedes escribir:
filtro: sombra paralela (OffX=2, OffY=2, Color='rojo', Positivo='verdadero')
sombra paralela(OffX=2, OffY=2, Color='amarillo', Positivo='verdadero')
dropshadow(OffX=2, OffY=2, Color='azul', Positivo='verdadero');
Para obtener más información sobre estos dos filtros para IE, consulte: Sombra y Sombra paralela
Veamos un ejemplo de sombras de varias capas (ignorando IE aquí):
h1{font:bold 32px/2 Verdana, Ginebra, sans-serif color:#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);}
El efecto es como se muestra en la figura:
Aquí usamos el color rgba, que es un método para declarar color y transparencia al mismo tiempo en CSS, y es un atributo de color compatible con la mayoría de los navegadores de nivel A ( excepto IE ). Para obtener más información, consulte: Color "RGBa". soporte del navegador》——Al mismo tiempo, recomendamos utilizar este método de escritura simple para lograr una translucidez de colores sólidos.
Compatibilidad del navegador con sombra de texto
Actualmente, text-shadow es compatible con Firefox 3.5+, Safari 1.1+/chrome 2.0+ y opera 9.5, pero no es compatible con IE. Cabe señalar que sólo Safari 4.0 admite sombras multicapa.
Todas las versiones de IE no admiten texto sombreado;
Opera 9.5+ admite hasta 6-9 capas de sombras y utiliza el orden de representación CSS2 (la primera sombra definida está en la parte inferior). Y por motivos de rendimiento, el radio de desenfoque está limitado a 100 píxeles;
Gecko (Firefox) teóricamente admite infinitas capas de sombras de texto (pero no se recomienda intentarlo) y sigue el nuevo orden de representación CSS3 (la sombra definida primero está en la parte superior);
Safari 1.1-3.2 solo admite una sola capa de sombra de texto (solo se muestra la declaración antes de la primera coma y se ignora la siguiente). Safari 4.0+ sólo admite sombras multicapa y el nuevo orden de representación CSS3;
sombra de caja
Primero hablemos de IE. IE no admite el atributo box-shadow, pero los dos filtros mencionados anteriormente se pueden usar para lograr efectos de sombra. ¡Esto significa que IE no distingue entre sombra de texto y sombra de cuadro ! Esto crea algunos problemas: el texto dentro del elemento hereda la configuración de sombra del elemento. Pero si no define el fondo y el borde del elemento, solo aparecerá la sombra del texto. Si solo define el atributo de fondo sin definir el borde, solo aparecerá la sombra del cuadro y el texto no tendrá sombra; si solo define el atributo de borde y si el fondo no está definido, aparecerá la sombra del cuadro y el texto del contenido y las imágenes también tendrán sombras. Los estudiantes interesados pueden intentarlo.
Bien, ahora olvidémonos de IE y echemos un vistazo a box-shadow. De hecho, después de comprender text-shadow, box-shadow es fácil de entender. Actualmente, solo Firefox y Safari/Chrome admiten el atributo box-shadow a través de atributos privados. Aunque el navegador Opera actualmente no admite este atributo, se menciona en su documentación que la próxima versión del motor Presto 2.3 (la última versión del motor Opera 10.10 es Presto 2.2.15) admitirá box-shadow, luego Let esperemos lentamente.
La sintaxis de box-shadow es la misma que la de text-shadow.
#cajasombra{
...
-webkit-box-shadow:2px 2px 2px negro;
-moz-box-shadow:2px 2px 2px negro;
...
}
De hecho, box-shadow y border-radius son buenos socios:
#boxShadow1{-moz-border-radius:10px;
-webkit-border-radio:10px;
radio de borde: 10px;
borde: 1px sólido ddd;
-webkit-box-shadow:0 0 10px negro;
-moz-box-shadow:0 0 10px negro;
relleno: 10px;}
El efecto es como se muestra en la figura:
Firefox solo comenzó a admitir box-shadow en la versión 3.5 y la representación actual de sombras aún no es perfecta.
Resumir
CSS shadow es una característica muy útil en CSS3. Ya podemos usar text-shadow en Firefox/webkit/Opera, y box-shadow pronto se implementará en estos navegadores. Sólo IE es único y todavía insiste en sus filtros de mierda. Esto es realmente un fracaso.