CSS Decorative Gallery, un agradable tips que servirá básicamente para inspirar o enseñar como decorar completamente nuestras galerías de imágenes o darles un estilo completamente diferente (la idea es añadir pequeños objetos). El truco es realmente simple de seguir, y prácticamente se basa en el uso de algunas etiquetas y la superposición de algunas de las imágenes. Podrán ver unos 20 estilos diferentes aproximadamente, desde un simple icono, a resultados aun mas complejos, y cantidad de opciones mas. Sin duda, un articulo recomendado, mas aun, si estas pensando en crear tu porfolio o galería personal.
Ver Demos - Mas info y descargas CSS Decorative Gallery
Conceptos Basicos
CSS:
/* ---------- gallery styles start here ----------------------- */
.photo {
margin: 30px;
position: relative;
width: 180px;
height: 130px;
float: left;
}
.photo img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.photo span {
width: 20px;
height: 18px;
display: block;
position: absolute;
top: 12px;
left: 12px;
background: url(images/digg-style.gif) no-repeat;
}
.photo {
margin: 30px;
position: relative;
width: 180px;
height: 130px;
float: left;
}
.photo img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.photo span {
width: 20px;
height: 18px;
display: block;
position: absolute;
top: 12px;
left: 12px;
background: url(images/digg-style.gif) no-repeat;
}
estructura
HTML:
<div class="photo">
<a href="#"><span></span><img src="images/11.jpg" alt="image" /></a>
</div>
<a href="#"><span></span><img src="images/11.jpg" alt="image" /></a>
</div>
2 Comentarios por usuarios
gracias por los recursos,
Excelente gracias !!