Tecnología

Inicio

La sombra del filtro no funciona en Firefox

Cualquier CSS que utiliza "filtro" como una propiedad es en realidad propiedad de Microsoft Internet Explorer y no va a trabajar fuera de ese navegador. El atributo de filtro no es compatible con los estándares; No sólo no funciona con Firefox y otros navegadores, no validará cuando se ejecuta en el validador de CSS de Web Consortium todo el mundo. Desafortunadamente, no hay una solución multi-navegador de sombras CSS.

Filtros y CSS

Los filtros son una propiedad característica de Internet Explorer. El elemento "filtro" para una sombra de texto requiere una serie de propiedades para trabajar en el texto; esto incluye la especificación de un zoom, un color de fondo y los elementos de filtro en total:

.shadow {
zoom: 1;
color: # 000000;
background-color: #CCCCCC;
Filtro: croma (color = # CCCCCC) sombra (color = # C0C0C0, dirección = 120, fuerza = 21);
}

Este no es el único filtro especificado para su uso con Internet Explorer, y todos ellos comparten la misma sintaxis básica. Está diseñado con CSS 2.1 en cuenta, a pesar de que no cuenta como válido CSS y es considerado un truco. Mientras que el filtro funciona con Internet Explorer, no funciona en cualquier otro navegador.

CSS3 y Firefox

La solución para el abandono sombras en Firefox y otros navegadores no-IE es el uso de CSS3. CSS3 tiene una sombra de texto y una propiedad box-shadow, que ambos hacen exactamente lo que suenan. Estos dos utilizan una sintaxis similar de especificar el valor horizontal, vertical y valor de color, así como la opción de desenfoque y propagación. El problema aquí es que Internet Explorer tiene soporte CSS3 irregular - y a partir de abril de 2012, IE9 y versiones anteriores de IE no reconocen la propiedad de sombra según la definición de CSS3. Sin embargo, entre los dos elementos puede crear un sitio web que funciona tanto en Firefox e IE.

El uso de sombra de texto y box-shadow

Las propiedades de texto-sombra y la caja de sombra tienen el mismo concepto básico. Por ejemplo, si desea establecer todas las cabeceras H1 tener una sombra texto gris, la CSS se vería así:

H1 {text-shadow: 2px 2px 2px #CCCCCC; }

La primera 2px establece la sombra horizontal por dos píxeles, la segunda establece la sombra verticalmente por dos píxeles y los terceros conjuntos de la distancia borroso. Se pueden omitir los píxeles falta de definición si usted no quiere un borrón en su sombra.

Box-shadow es el mismo, con un elemento adicional entre la falta de definición y el color: la propagación. La difusión designa el tamaño de la sombra caja.

El desarrollo de múltiples navegadores

Para configurar texto sombreado que funciona en IE y Firefox, simplemente necesita tener tanto el elemento de filtro y la propiedad text-shadow en el mismo elemento. Por ejemplo, si usted quiere hacer H1 sombreada en todos los navegadores, se usaría algo similar a:

.shadow {
text-shadow: 2px 2px 2px #CCCCCC;
zoom: 1;
color: # 000000;
background-color: #CCCCCC;
Filtro: croma (color = # CCCCCC) sombra (color = # C0C0C0, dirección = 120, fuerza = 21);
}

Esto no es válido CSS en que no va a validar, pero va a crear un efecto de sombreado similar en Firefox e IE.