Tema: Como poner borde y No un sombreado a numeros Y QUE FUNCIONE EN INTERNET EXPLORER
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 24/08/2010, 11:28
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Como poner borde y No un sombreado a numeros Y QUE FUNCIONE EN INTERNET EX
Todas las pruebas (tampoco son tantas) que he realizado con los filtros para lograr sombras en el texto (especialmente para simular un contorno) en ie (ver 7) han sido muy poco estéticas por la aparición de ese efecto aserrado (pixeles muy marcados).
Y creo que es por las deficiencias del navegador al renderizarla:


Los códigos implicados (con dos "filter" diferentes):
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5. <title>Kseso? Jugando con css</title>
  6.  
  7. <style type="text/css">
  8. * {margin: 0; padding: 0; outline: 0; position: relative;}
  9. p.sombra1, p.sombra2 {
  10.   text-shadow: #000000 -1px -1px 0, #000000 1px 1px 0;
  11.   color: red;
  12.   font-size: 40px;
  13. }
  14. </style>
  15. <!--[if IE]>
  16. <style type="text/css">
  17. p.sombra1 span {
  18.   display: block;
  19.   width: 100%;
  20.   filter: glow(color=#000000,strength=1);
  21. }
  22. p.sombra2 {
  23.   display: block;
  24.   width: 100%;
  25.   filter: dropshadow(color=#000000,offX=1,offY=1);
  26. }
  27. p.code {
  28.   font-family: monospace;
  29.   font-size: 15px;
  30.   color: #444;
  31. }
  32. </style>
  33. <![endif]-->
  34.  
  35. </head>
  36. <body>
  37.     <p class="sombra1"><span>Texto con un contorno</span></p><!--[if IE]>
  38.     <p class="code">filter: glow(color=#000000,strength=1);</p><![endif]-->
  39.     <p class="sombra2">Texto con un contorno</p><!--[if IE]>
  40.     <p class="code">filter: dropshadow(color=#000000,offX=1,offY=1</p><![endif]-->    
  41. </body>
  42. </html>

Como alternativa, puede probar con algún js. Un ejemplo con mootools:
http://pr0digy.com/mootools/text-dropshadows/
Posiblemente con jQuery también haya.

Atentamente