Texto con sombra en todos los navegadoes

hardware · #1 (**permalink**) 03/10/2012, 11:27

Hola,

Llevo 3 horas "loco" intentando buscar la solución para poner una sombra en el texto y que funcione en todos (o los más conocidos) navegadores. En Firefox, Chrome e incluso Safari me funciona pero el IE como siempre

He intentado hacer de todo lo que he podido encontrar e investigar .. pero no hay manera. He conseguido mostrar una sombra con IE pero luego no puedo combinarlo para que en Firefox o Chrome no aparezca el IE y sí el suyo.

Podéis ayudarme?

gracias,

Código:

<html>
<head>
	<link href='http://fonts.googleapis.com/css?family=Maiden+Orange' rel='stylesheet' type='text/css'>

	<style>

		.shadow3 {	

			text-shadow:#666666 3px 3px 3px;
		}

		.shadow3_IE {	
			color:#7764a7;
			zoom: 1;
			background-color: #cccccc;
			filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
			        progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#ccdbcc);

		}


		.shadow4 {	
			color:#7764a7;
			<!--[if !IE]>
			zoom: 1;
			background-color: #cccccc;
			filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
			        progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#ccdbcc);
			<![endif]-->
		text-shadow:#666666 3px 3px 3px;
		}

		#titulo1
		{
		font-family: 'Maiden Orange', sans-serif;
		font-size:  50px;
		}

	</style>

</head>

<body>
	<p id="titulo1"class='shadow'>pruebaLo.com</p>
	<!--[if !IE]> <p id="titulo1" class='shadow3'>pruebaLo.com</p> <![endif]-->
	<!--[if IE]> <p id="titulo1" class='shadow3_IE'>pruebaLo.com</p> <![endif]-->
</body>
 
</html>

pzin · #2 (**permalink**) 03/10/2012, 12:14

Es la primera vez que veo condicionales de IE de HTML aplicados en CSS.

furoya · #3 (**permalink**) 03/10/2012, 17:04

Sí, ese código es un desastre.
Por lo menos recordaste ponerlo entre etiquetas de [code]. Y te olvidaste del doctype, pero eso lo verás después.

Los filtros CSS de IE son transparentes para otros navegadores. Los ignoran. Así que los podés poner mezclados con los de text-shadow. Porque IE a esos también los ignora.
Aunque en las últimas versiones ya no, entonces lo que tenés que hacer es usar los comentarios condicionales para aquellas versiones, y no para Chr y FF (y Op y Saf).

Armá el CSS como si IExplorer no existiera. Una vez que cerraste la etiqueta </style>, abrís el condicional para ... ¿menores de IE9? (no sé a partir de cuál ya funciona el CSS3, averigualo vos), y adentro le metés una nueva hoja de estilos que tenga los filtros con las diferentes sintaxis para las diferentes versiones (van todas juntas, entre bueyes no hay cornadas), y cerrás el condicional.

Una recomendación, que como ya investigaste (ejem) de todo, lo debés saber : para que en el navegador de MS funcione el box-shadow tenés que agregarle border-collapse:separate. Digo, por si vas a combinar sombras.