Nov 10

Sombra a imagenes y texto con CSS
Con este ejemplo podemos crear un recuadro con sombra para poder resaltar div con contenidos ya sea de texto o de imágenes.
Solo tenemos que seguir los siguientes pasos.
Paso 1
<div id="contenido"> <div id="sombra"> <div id="text">Aquí colocas tu texto.</div> </div> </div>
Paso 2
<style type="text/css"> body{ margin:0; padding:0; text-align:center; font-family:"Trebuchet MS", Arial, Verdana; font-size:12px; } #contenido{ text-align:center; padding: 5px; margin: 0 auto; width:500px; } #sombra{ margin:10px; background:#CCCCCC; /* Color de la sombra */ border: solid 1px #CCCCCC; /* Color del borde */ width: 500px; } #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>
Para las imagenes solo modificamos en del contenedor
#contenedor{ text-align:center; padding: 5px; margin: 0 auto; /* width:500px; */ float: left; }
Saludos
Compartir





