Bueno…desde ElWEbMaster.com nos llega un pequeño tip de como podemos decorar imagenes solo con codigo CSS…muy util cuando queremos basar todo en codigo..y no en imagenes que se demoran en cargar.
Efecto de sombra:
Nos permite añadirle a la imagen el efecto de sombreado utilizando sencillamente una imagen de fondo un poco suavizada.
El HTML debería ser:
<img class="shadow" src="sample.jpg" alt="" />
Y el CSS:
img.shadow {
background: url(shadow-1000×1000.gif) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}
Efecto de borde doble:
Este es uno de los efectos más utilizados y luce verdaderamente muy bien.
El HTML sería:
<img class="double-border" src="sample.jpg" alt="" />
Y el CSS:
img.double-border {
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
}
Efecto de imagen encuadrada
Básicamente se coloca una imagen transparente en el frente para lograr el efecto.
El HTML luciría así:
<div class="frame-block">
<span> </span>
<img src=”sample.jpg” alt=”" />
</div>
Y el código CSS:
.frame-block {
position: relative;
display: block;
height:335px;
width: 575px;
}
.frame-block span {
background: url(frame.png) no-repeat center top;
height:335px;
width: 575px;
display: block;
position: absolute;
}
Efecto de marca de agua
Se puede lograr bajando la opacidad de la imagen principal y permitiendo que la imagen de fondo se destaque.
El HTML se vería así:
<div class="transp-block">
<img class=”transparent” src=”sample.jpg” alt=”" />
</div>
Y el CSS:
.transp-block {
background: #000 url(watermark.jpg) no-repeat;
width: 575px;
height: 335px;
}
img.transparent {
filter:alpha(opacity=75);
opacity:.75;
}
Imagen con titulo:
Se puede añadir un titulo simplemente utilizando posicionamiento absoluto y transparencia.
Este sería el código HTML:
<div class="img-desc">
<img src=”sample.jpg” alt=”" />
<cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div>
Y este el CSS:
.img-desc {
position: relative;
display: block;
height:335px;
width: 575px;
}
.img-desc cite {
background: #111;
filter:alpha(opacity=55);
opacity:.55;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
width: 555px;
padding: 10px;
border-top: 1px solid #999;
}
Comentarios recientes