Opino que los dos métodos anteriores no son demasiado buenos, debido a que la sombra no parece muy natural. Dicho de otro modo, no resulta un efecto suficientemente realista. De modo que abro mi editor gráfico, creo una caja rectangular con efecto de sombra y lo exporto a una imagen. Posiblemente pueda utilizar esa imagen para crear el efecto de sombra.
<div class="shade">
<img src="shadow.png" width="0" height="0" alt="" class="shade" />
bla bla</div>
El código CSS experimental
img.shade{
width: 37ex;
height: 9em;
/* specify the dimension of the image */
display: block;
position: absolute;
z-index: -1;
/* force the image to show below the content */
right: -3ex;
bottom: -1em;
}
div.shade{
width: 30ex;
height: 6em;
/* specify the dimension of the content, slightly smaller than the image */
position: relative;
z-index: 1;
/* force the content to show above the image */
background-color: #fff;
border: 1px solid #000;
padding: 1em 2ex;
margin-right: 6ex;
margin-bottom: 3em;
}
Tenemos tres desventajas en este método
Como la imagen se estira, puede que no quede muy bonito.
En Mozilla Firefox la imagen a veces desaparece (se puede recuperar refrescando o desplazando la página). En Internet Explorer no se muestra bien el efecto, por lo menos en la versión 6.
El contenido no puede flotar (no podemos utilizar el atributo float)
Podemos obtener la imagen para hacer el ejemplo.
Podemos ver este ejemplo en marcha en una página aparte.
Un momento. ¿Cómo haríamos texto con sombreado?
Si utilizas un navegador basado en Gecko, podrías visualizar otro efecto interesante para realizar sombreado de textos sin utilizar imágenes y redimensionable simplemente cambiando el tamaño del texto o las fuentes que usa el navegador (con el menú view>text size > increase / Decrease).
El código HTML sería el siguiente:
<span id="text">Texto sombreado</span>
El código CSS
#text{
font-size: 3em; /* optional. just to increase the font size. */
display: block;
line-height: 1em;
color: #666; /* shadow color */
background-color: transparent;
white-space: nowrap; /* wrapping breaks the effect */
}
#text:before,
#text:after{
content: "Texto sombreado"; /* El mismo texto que queramos mostrar sombreado */
display: block;
}
#text:before{
margin-bottom: -1.05em;
margin-left: 0.1ex;
color: #ccc; /* shadow color */
background-color: transparent;
}
#text:after{
margin-top: -1.05em;
margin-left: -0.1ex;
color: #fff; /* text color */
background-color: transparent;
}
Este efecto puede ser útil por ahora. Sin embargo, las especificaciones de CSS2 incluyen una propiedad CSS llamada text-shadow, que sirve para definir un efecto de sombra a un texto. Sin embargo, la mayoría de los navegadores todavía no soportan esta propiedad.
Usuarios que han visto este tema también han visto...
- Efecto zoom de imagen utilizando solo CSS
- Como crear cuadros con Hojas de Estilo
- Alternando Hojas de Estilo
- Estilos en formularios: Bordes llamativos para campos de formulario en CSS
- Barra de desplazamiento a medida en CSS
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.