for - text shadow effects css3

css3 text-shadow en IE9

Question

¿Hay alguna manera fácil de tener css3 text-shadow trabajando en IE9? Al menos una sola sombra de texto sería genial. Supongo que idealmente también es compatible con IE8. Espero que haya un plugin jquery simple o un archivo .htc que solo mire la propiedad text-shadow css de un elemento y lo implemente para IE9.

Answer 1

Como IE9 no es compatible con CSS3 text-shadow , usaría la propiedad de filtro para IE en su lugar. Ejemplo en vivo: http://jsfiddle.net/dmM2S/

text-shadow:1px 1px 1px red; /* CSS3 */

puede ser reemplazado por

filter: Shadow(Color=red, Direction=130, Strength=1); /* IE Proprietary Filter*/

Puede obtener resultados muy similares.

Answer 2

Estaba buscando una solución de trazo de texto entre navegadores que funciona cuando se superpone en imágenes de fondo. Creo que tengo una solución para esto que no implica margen extra, js y funciona en IE7-9 (no he probado 6), y no causa problemas de aliasing.

Esta es una combinación del uso de CSS3 text-shadow, que tiene un buen soporte excepto IE ( caniuse ), y luego usa una combinación de filtros para IE. El soporte de trazo de texto CSS3 es pobre en este momento.

Filtros de IE

El filtro de brillo ( http://www.impressivewebs.com/css3-text-shadow-ie/ ) se ve terrible, así que no lo usé.

La respuesta de David Hewitt implicó agregar filtros de sombra en una combinación de direcciones. ClearType se elimina por desgracia, así que terminamos con un texto mal alias.

Luego combiné algunos de los elementos sugeridos en useragentman con los filtros de gotas.

Poniendo todo junto

Este ejemplo sería un texto negro con un trazo blanco. Estoy usando clases html condicionales por cierto para apuntar a IE ( http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ ).

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color=''white'') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}

Answer 3

La respuesta de crdunst es bastante clara y la mejor respuesta que he encontrado, pero no hay explicación sobre cómo usarla y el código es más grande de lo necesario.

El único código que necesitas:

#element {
    background-color: #cacbcf;
    text-shadow: 2px 2px 4px rgba(0,0,0, 0.5);
    filter: chroma(color=#cacbcf) progid:DXImageTransform.Microsoft.dropshadow(color=#60000000, offX=2, offY=2);
}

Primero, DEBE especificar un background-color : si su elemento debe ser transparente, solo copie el color de fondo del elemento primario o permita que herede. El color en el filtro de croma debe coincidir con el color de fondo para corregir esos artefactos alrededor del texto (pero aquí debe copiar el color, no puede escribir inherit ). Tenga en cuenta que no he acortado el filtro de sombreado - funciona, pero las sombras se cortan en las dimensiones del elemento (se nota con grandes sombras, intente establecer las compensaciones al menos 4).

SUGERENCIA: Si desea utilizar colores con transparencia (canal alfa), escriba en una notación #AARRGGBB , donde AA representa un valor hexadecimal de la opacidad: de 01 a FE, porque FF e irónicamente también 00 significa que no hay transparencia y, por lo tanto, inútil .. ^^ Simplemente vaya un poco más abajo que en la notación rgba porque las sombras no son suaves y el mismo valor alfa aparecería más oscuro entonces. ;)

Un buen fragmento para convertir el valor alfa de IE (JavaScript, simplemente pegarlo en la consola):

var number = 0.5; //alpha value from the rgba() notation
("0"+(Math.round(0.75 * number * 255).toString(16))).slice(-2);

PROBLEMAS: El texto / fuente se comporta como una imagen después de aplicar la sombra; se vuelve pixelado y borroso después de acercarse ... Pero ese es el problema de IE, no el mío.

Demostración en vivo de la sombra aquí: http://jsfiddle.net/12khvfru/2/

Answer 4

Probé los filtros mencionados anteriormente y no me gustó mucho el efecto que creó. Tampoco quería utilizar ningún complemento, ya que ralentizaría el tiempo de carga por lo que parece ser un efecto tan básico.

En mi caso, estaba buscando una sombra de texto con un desenfoque de 0px, lo que significa que la sombra es una réplica exacta del texto, pero solo se compensa y detrás. Este efecto se puede recrear fácilmente con jquery.

<script>
    var shadowText = $(".ie9 .normalText").html();  
    $(".ie9 .normalText").before(''<div class="shadow">'' + shadowText + ''</div>'');
</script>
<style>
    .ie9 .shadow { position: relative; top: 2px; left: -3px; }
</style>

Esto creará un efecto idéntico a la sombra de texto css3 a continuación.

    text-shadow: -3px 2px 0px rgba(0, 0, 0, 1.0);

he aquí un ejemplo de trabajo (vea el texto blanco grande sobre la imagen principal del banner) http://www.cb.restaurantconnectinc.com/

Answer 5

Prueba CSS Generator .

Puede elegir valores y ver los resultados en línea. Luego obtienes el código en el portapapeles.
Este es un ejemplo de código generado:

text-shadow: 1px 1px 2px #a8aaad;
filter: dropshadow(color=#a8aaad, offx=1, offy=1);

Answer 6

Sí, pero no como te imaginarías. De acuerdo con caniuse (un recurso muy bueno) no hay soporte y no hay polyfill disponible para agregar soporte text-shadow a IE9. Sin embargo, IE tiene su propia sombra de texto patentada ( detallado aquí ).

Implementación de ejemplo, tomada de su sitio web (funciona en IE5.5 a IE9):

p.shadow { 
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}

Para la compatibilidad entre navegadores y la futura protección del código, recuerde utilizar también la propiedad de text-shadow estándar CSS3 (que se detalla aquí ). Esto es especialmente importante teniendo en cuenta que IE10 ha anunciado oficialmente su intención de dejar de admitir los filtros dx heredados . En el futuro, IE10 + solo admitirá la text-shadow estándar CSS3.