Ya sé que a dia de hoy se puede realizar un efecto sombra en CSS3 pero, a fecha de este post, internet explorer no lo soporta, así que os diré cómo hice el efecto a las fotos, en css y con un par de imágenes.
Antes de nada quiero comentaros que en esta página: http://www.talleresguadamia.com, el título principal del contenido tiene una sombra realizada en CSS3, los que abráis la página con el explorer no la veréis y el resto depende del navegador. El efecto sombra al que me refiero es el véis en las fotos del contenido. Lo realmente importante el código que sigue:
@charset "utf-8";
/* CSS Document */
.dropshadow1{
float:left;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 5px 0 0 5px;
}
.dropshadow1 img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 10px;
float:left;
}
/* Lo que sigue es el efecto de la foto al pasar el mouse por encima */
.dropshadow1 a:hover img{
margin:0px;
padding:10px;
}
Aqui definimos la clase dropshadow1, donde es importante colocar bien las imágenes de fondo que son las nos darán el efecto sombra.También damos formato a las imágenes que están dentro de dropshadow1. Después (opcional) realizamos un efecto al pasar el mouse por encima (a:hover).
El código HTML sería algo como:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Como es un poco lioso el hacer las imágenes aquí os dejo el enlace al archivo zip que contiene lo explicado arriba y las imágenes. Si tenéis algún problema con la descarga lo posteáis y lo intentaré solucionar, espero que os sirva.
Antes de nada quiero comentaros que en esta página: http://www.talleresguadamia.com, el título principal del contenido tiene una sombra realizada en CSS3, los que abráis la página con el explorer no la veréis y el resto depende del navegador. El efecto sombra al que me refiero es el véis en las fotos del contenido. Lo realmente importante el código que sigue:
@charset "utf-8";
/* CSS Document */
.dropshadow1{
float:left;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 5px 0 0 5px;
}
.dropshadow1 img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 10px;
float:left;
}
/* Lo que sigue es el efecto de la foto al pasar el mouse por encima */
.dropshadow1 a:hover img{
margin:0px;
padding:10px;
}
Aqui definimos la clase dropshadow1, donde es importante colocar bien las imágenes de fondo que son las nos darán el efecto sombra.También damos formato a las imágenes que están dentro de dropshadow1. Después (opcional) realizamos un efecto al pasar el mouse por encima (a:hover).
El código HTML sería algo como:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="ejemplo_dropshadow.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="divscontenido">
<div class="dropshadow1"><a href="index-1.html"><img src="images/Motor2.jpg" alt="MECANICA"/></a></div> <!-- Fin de dropshadow1 -->
<span class="Estilo1"> MECANICA</span>
<p><span class="textocontenido">Realizamos todo tipo de trabajos en la mecánica del automóvil.</span></p>
</div> <!-- Fin de divscontenido -->
</body>
</html>
Como es un poco lioso el hacer las imágenes aquí os dejo el enlace al archivo zip que contiene lo explicado arriba y las imágenes. Si tenéis algún problema con la descarga lo posteáis y lo intentaré solucionar, espero que os sirva.
Comentarios
Publicar un comentario