English to Spanish Translation by Trusted Translations, Inc.

Otras Traducciones de W3 en Spanish Translator Services

Este documento es una traducción del tutorial "Drop shadows" propiedad de Bert Bos publicado en el sitio de W3C.

La versión en inglés de esta especificación es la única con valor normativo y puede encontrarse en: http://www.w3.org/Style/Examples/007/shadows.html

Hojas de estilo para la Web
Trucos y sugerencias para CSS

(Esta página usa hojas de estilo CSS)

Demostración

Sombras

CSS2 no tiene una propiedad que permita añadir sombra a un cuadro. Se puede intentar obtener el mismo efecto añadiendo un borde a la derecha y abajo del cuadro, pero no se verá bien. Pero con dos elementos anidados, podemos usar el exterior como sombra para el elemento interior. Por ejemplo, supongamos que tenemos un texto como el siguiente (HTML):

<div class=back>
  <div class=section>
	<h2>Die Rose duftet - doch ob sie empfindet</h2>
	<address>Heinrich Heine (1797-1856)</address>

	<p>Die Rose duftet - doch ob sie empfindet<br>
	...
  </div>
</div>

Podemos usar el DIV exterior como sombra para el interior. El resultado puede verse similar al que aparece en esta página separada. En primer lugar, damos al BODY un fondo (verde claro, en este ejemplo), al DIV exterior un fondo un poco más oscuro (gris verdoso) y al DIV interior otro borde (por ejemplo, blanco amarillento):

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

A continuación, usamos márgenes externos (margin) e internos (padding) para desplazar el DIV interior un poco a la izquierda y arriba del DIV exterior:

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

También hay que mover el DIV exterior un poco a la derecha. Y si tenemos más de una sección, probablemente querremos tener algo de espacio entre ellas:

div.back {margin: 3em 0 3em 5em}

Básicamente, eso es todo. Si lo desea, puede añadir un borde alrededor del DIV interior. También es probable que desee añadir algo de margen interno, por ejemplo:

div.section {border: thin solid #999; padding: 1.5em}

Por supuesto, usted puede variar el tamaño de la sombra según sus preferencias.

Texto con sombra

CSS tiene una propiedad que permite añadir sombra al texto. Lleva cuatro argumentos: el color de la sombra, el desplazamiento horizontal (donde positivo significa hacia la derecha), el desplazamiento vertical (donde positivo significa hacia abajo) y el desenfoque (0 significa una sombra nítida). Por ejemplo:

h3 { text-shadow: red 0.2em 0.3em 0.2em }

¿Tiene este texto una sombra?

CSS ¡CSS válido!¡HTML 4.0 válido!

Bert Bos
creado el 4 de abril de 2002;
última actualización $Date: 2007/01/15 13:04:18 $ GMT