Sombras con CSS

Por: dave73 + 26.04.2006

Bueno, he revisado varios tutoriales acerca de sombras con CSS y ninguno me ha resultado sencillo. Es decir, soy principiante en esto del CSS y veía muchos atributos raros y esas cosas. Ninguno me resultaba fácil de asimilar.
Ya cansado, decidí hacerlo a mi manera. Es muy simple y no está nada mal. Sé que puede mejorarse y mucho. La idea es que puedan hacerlo los principiantes como yo. Vamos al grano:

La idea es tener un recuadro con texto y la sombra del mismo. Para ello, utilicé tres etiquetas DIV.



Como verán, dentro del contenedor tenemos la div del texto y la sombra. La div del texto se encuentra dentro de la div sombra. Ahora, al darle márgenes negativos al texto, se logra "desfazarlo" y lograr el efecto.

Veamos el código:

Código :

<style type="text/css">
body{
   margin:0;
   padding:0;
   text-align:center;
   font-family:"Trebuchet MS", Arial, Verdana;
   font-size:12px;
}
/* Aquí modificamos el Contenedor*/
#cont{
   text-align:center;
   padding: 5px;
   margin: 0 auto;
   width:500px; 
}
/* Ahora la sombra */
#sombra{
   margin:10px;
   background:#CCCCCC; /* Color de la sombra */
   border: solid 1px #CCCCCC; /* Color del borde */
   width: 500px;
}
/* Veamos el texto */
#text{
   border:solid 1px #CCCCCC;
   margin:-10px 2px 2px -10px; /* Aqui están los famosos márgenes negativos*/
   padding:2px;
   background:#FFFFFF; /* Le damos un color de fondo */
}
</style>

¿Cómo lo aplicamos?

Código :

<div id="cont">
   <div id="sombra">
      <div id="text">Aquí colocas tu texto.</div>
   </div>
</div>

El resultado.



¿Y que hay de las imágenes?

Pues, es lo mismo. Sólo cambio un atributo en el contenedor:

Código :

#cont{
   text-align:center;
   padding: 5px;
   margin: 0 auto;
   /* width:500px; */ float: left; 
}

Ahora lo aplicamos:

Código :

<div id="cont">
   <div id="sombra">
      <div id="text"><img src="imagen.jpg" /></div>
   </div>
</div>

El resultado.



¿Qué les parece?

css

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario