Hola,
Vereis, estoy intentando poner una imagen de background para hacer un poco de sombra. Vamos, lo más normal del mundo. El tema es qué són dos imágenes, una al lado de otra, y después de darle vueltas y vueltas, no me sale: cada imagen, que carga lo mismo, sale diferente en la página =S
Yo lo que quiero es que las dos esten centradas (que tampoco sé porqué ahora no lo hace) y con la imagen de fondo que se vea por la derecha y por abajo, creando un poco de "sombra".
He pillado un código por allí pero no sé porqué, si aplico el mismo estilo en los dos casos, se me ve diferente xD Me podeis orientar?
Código:
<br>
<div>
<div id="sombra"><img src = "iso.jpg" /></div>
<div id="sombra2"><img src = "isoe.jpg" /></div>
<a href="Certificats_2009_ISO_9001.pdf"> Ver documento </a>
Código:
#sombra, #sombra2 {
padding:0 5px 5px 0; /*Esta es la profundidad de nuestra sombra, sí haces más grandes estos valores, el efecto de sombra es mayor también */
background: url(http://tecnotor.com/sombra.jpg) no-repeat bottom; /*Aquí es donde ponemos la imagen como fondo colocando su ubicación*/
}
#sombra{
float: left;
}
#sombra img, #sombra2 img {
display:block;
position:relative;
top: -3px; /* Desfasamos la imagen hacia arriba */
left:-3px; /*Desfasamos la imagen hacia la izquierda */
padding:5px;
background:#FFFFFF; /*Definimos un color de fondo */
border:1px solid;
border-color: #CCCCCC #666666 #666666 #CCCCCC /*Creamos un marco para acentuar el efecto */
}
Referencia:
http://tecnotor.com, apartado "calidad".
Muchísimas gracias.
PS: Y alguna idea para que quede un poco elegante? Mi mente es nula en este sentido O_o