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

Modelo de divs en CSS

Bueno todos los inicios son dificiles, y cambiar de tablas a capas (div’s) algunos maquetadores se topan con problemas. y lo clasico es que nuestros elementos no esten donde deberian estar posicionados.

Y existen grandes factores, como widht (que es el mas comun), margin, padding, border. que al implementar a ciegas suelen dar errores como desbordamientos o drasticos colapsos en ie u otros (ok exagere).

Lo mas importante es entender que diantres son las propiedades en un div… y su correcto uso… y creo que en el siguiente grafico esta claro.

Dimensiones de un div (importante)
las medidas son muy importantes para tener nuetros elementos bien posicionados… y como vemos en el ejemplo anterior… nuestro div tiene un ancho de 500px y luego nuestro margen interior o bien “relleno” (padding) que tiene 10px hace que nuestro div se le sumen 20px (10px por lado del div) mas de ancho y luego un borde decorativo de 1px por lado que igual se suman al tamaño de nuestro div, y por ultimo tenemos nuestro margen “exterior” que sirve para eso “separar” y tiene otros 10px por lado y se le suman de nuevo a nuestro div contenedor, que ahora ya no mide “width:500px” ahora mide “width:542px” y claro lo mismo ocurre con la altura…

Igualar entre diferentes browsers con un Reset CSS

Reset CSS
Bueno… por defecto todos los navegadores tienen su propio margin y padding y aplicando este conocido reset universal

*{margin:0;padding:0;}

este reset aplica para todos los elementos en nuestro documento le da margin y padding 0 a todo y nos ayuda a tener mas compatibilidad entre navegadores, igual al estar implementando es importante no darle un ancho fijo a los div “hijos” y solo establecerlo a los elementos padre que esten flotados, ya que si limitamos sus anchos se recomienda no aplicar un padding a estos ya que es un poco tedio porque podemos tener <p> <span> <img>, etc.. y tendremos que darle al padding a estos encambio es mejor darle el padding al div padre para que no de problemas con otros navegadores. bueno chao y suerte en sus futuras maquetaciones.

Bua…. como lo dice el titulo… porfin una solucion, sino la correcta, supongo que la unica por el momento… (y si me equivoco manda la tuya haciendo click aqui), y siempre que necesitamos dar este efecto en nuestros diseños… acabamos haciendolo con javascript… o si tenemos un diseño fijo, estatico, pues optamos por el uso de una imagen de fondo… que no es lo mas conveniente en algunas ocaciones pero si nos ahorra horas y frustraciones pero bueno. eh aqui la solucion para igualar nuestras columnas, cuando estan dentro de un div contenedor… y dar el efecto de divs relativamente iguales en su altura...

Al lio… tenemos nuestro div contenedor (class=”all”) y dentro tenemos otros 2 div ‘s (class=”contenido” y class=”lateral”) y queremos que tengan la misma altura cubriendo asi el 100% del contenedor (class=”all”)… entonces el html es:…

1
2
3
4
5
6
7
8

<div class="all">
    <div class="contenido">
        <p>nuestra primera columna</p>
    </div>
    <div class="lateral">
        <p>nuestra segunda columna.</p>
    </div>
</div>

Ahora para dar el efecto necesitamos hacer uso del “overflow” para que nos oculte el scroll que nos da el “padding” y el “margin“, que son ridiculamente enormes y nos da mucha altura.

1
2

.all{overflow:hidden;}
.contenido, .lateral{float:left;padding-bottom:30000px;margin-bottom:-30000px;}

Click para ver demo en linea