AyudaBloggers{...}
Galería de imágenes con categorías sólo con CSS3
Haciendo uso de distintos atributos, selectores y pseudo-selectores CSS3 podemos hacer cosas increíbles sin necesidad de interactuar con javascript, y en este experimento desarrollado por Roman Komarov, podemos apreciar un sistema de filtración de elementos basado en pseudo-selectores que sin duda es bastante simple pero que a su vez puede utilizarse en el desarrollo web de forma bastante efectiva.

Observar el código fuente de esta creación puede ser un poco complicado y por ello decidí por utilizar una síntaxis propia, además de aplicar un efecto distinto a los elementos.

Ejemplo 1: 




Ejemplo 2: 





Como puedes apreciar he utilizado como ejemplo una tienda digital, pero puedes utilizarla como una galería de imágenes personales o de la forma que quieras, todo depende de tu creatividad.


El tutorial:

Paso 1: Añadir los atributos y elementos en la plantilla:

En "Plantilla | Edición HTML" deberás buscar la siguiente línea:
]]></b:skin>
Arriba de ésta pega el siguiente código dependiendo del efecto que desees aplicar:

Para el efecto del ejemplo 1:
#galeria-selectiva {
    background:url(http://3.bp.blogspot.com/-OxTfgN3vZh4/UBYsI8V8FcI/AAAAAAAABe0/lQzMmvV1b_o/s1600/granulado.jpg);
    width:92%;
    margin:0 auto 20px;
    padding:10px;
    box-shadow:0 0 1px #CCC;
    border:1px solid #fff;
}
#galeria-selectiva input {
    background:url(http://1.bp.blogspot.com/-Yxs4rNnoJRU/UBYmyKKUniI/AAAAAAAABeI/wn7BmpZCO5c/s1600/bkgOverBarraRoja.png) repeat-x top;
    padding:2px 3px 2px 3px;
    color:white;
    border:1px solid red;
    cursor:pointer;
    text-shadow:none;
    border-radius:2px;
    text-shadow:0 0 1px red;
    box-shadow:none;
}

#galeria-selectiva img {
    padding:4px 4px 20px 4px;
    box-shadow:0 0 3px #666;
    border:1px solid #FFF;
    float:left;
    -moz-transition: 0.2s;
    margin:10px 5px 10px 0;
    background-color: rgba(255, 255, 255, 0.95)
    -webkit-transition: 0.2s;
    -o-transition:0.s2;
    transition: 0.2s;
    width:90px;
    height:auto;
    cursor:pointer;
}


.categoria1:focus ~ .clase4 {opacity:0.2;}
.categoria1:focus ~ .clase3 {opacity:0.2;}
.categoria1:focus ~ .clase2 {opacity:0.2;}
.categoria1:focus ~ .clase1 {opacity:1;}


.categoria2:focus ~ .clase4 {opacity:0.2;}
.categoria2:focus ~ .clase3 {opacity:0.2;}
.categoria2:focus ~ .clase2 {opacity:1;}
.categoria2:focus ~ .clase1 {opacity:0.2;}

.categoria3:focus ~ .clase4 {opacity:0.2;}
.categoria3:focus ~ .clase3 {opacity:1;}
.categoria3:focus ~ .clase2 {opacity:0.2;}
.categoria3:focus ~ .clase1 {opacity:0.2;}


.categoria4:focus ~ .clase4 {opacity:1;}
.categoria4:focus ~ .clase3 {opacity:0.2;}
.categoria4:focus ~ .clase2 {opacity:0.2;}
.categoria4:focus ~ .clase1 {opacity:0.2;}

Para el efecto del ejemplo 2:

#galeria-selectiva {
    background:url(http://3.bp.blogspot.com/-OxTfgN3vZh4/UBYsI8V8FcI/AAAAAAAABe0/lQzMmvV1b_o/s1600/granulado.jpg);
    width:92%;
    margin:0 auto 20px;
    padding:10px;
    box-shadow:0 0 1px #CCC;
    border:1px solid #fff;
}
#galeria-selectiva input {
    background:url(http://1.bp.blogspot.com/-Yxs4rNnoJRU/UBYmyKKUniI/AAAAAAAABeI/wn7BmpZCO5c/s1600/bkgOverBarraRoja.png) repeat-x top;
    padding:2px 3px 2px 3px;
    color:white;
    border:1px solid red;
    cursor:pointer;
    text-shadow:none;
    border-radius:2px;
    text-shadow:0 0 1px red;
    box-shadow:none;
}

#galeria-selectiva img {
    padding:4px 4px 20px 4px;
    box-shadow:0 0 3px #666;
    border:1px solid #FFF;
    -moz-transition: 0.2s;
    float:left;
    margin:10px 5px 10px 0;
    background-color: rgba(255, 255, 255, 0.95)
    -webkit-transition: 0.2s;
    -o-transition:0.s2;
    transition: 0.2s;
    width:90px;
    height:auto;
    cursor:pointer;
}


.categoria1:focus ~ .clase4 {display:none;}
.categoria1:focus ~ .clase3 {display:none;}
.categoria1:focus ~ .clase2 {display:none;}
.categoria1:focus ~ .clase1 {display:block;}


.categoria2:focus ~ .clase4 {display:none;}
.categoria2:focus ~ .clase3 {display:none;}
.categoria2:focus ~ .clase2 {display:block;}
.categoria2:focus ~ .clase1 {display:none;}

.categoria3:focus ~ .clase4 {display:none;}
.categoria3:focus ~ .clase3 {display:block;}
.categoria3:focus ~ .clase2 {display:none;}
.categoria3:focus ~ .clase1 {display:none;}


.categoria4:focus ~ .clase4 {display:none;}
.categoria4:focus ~ .clase3 {display:none;}
.categoria4:focus ~ .clase2 {display:none;}
.categoria4:focus ~ .clase1 {display:block;}

Paso 2: Añadir la galería en el blog:

En alguna sección de tu plantilla, o en alguna entrada deberás pegar el siguiente código:
<div id="galeria-selectiva">
<!--CONTROLES-->
<input type="button" class="categoria1" value="NOMBRE PRIMERA CATEGORIA" />
<input type="button" class="categoria2" value="NOMBRE SEGUNDA CATEGORIA" />
<input type="button" class="categoria3" value="NOMBRE TERCERA CATEGORIA" />
<input type="button" class="categoria4" value="NOMBRE CUARTA CATEGORIA" /> <br /><br />
<!--CONTROLES-->


<img class="clase4" src="url-categoria-clase4" />

<img class="clase2" src="url-categoria-clase2" />

<img class="clase2" src="url-categoria-clase2" />

<img class="clase3" src="url-categoria-clase3" />

<img class="clase1" src="url-categoria-clase1" />

<img class="clase1" src="url-categoria-clase1" />

<img class="clase1" src="url-categoria-clase1" />

<img class="clase2" src="url-categoria-clase2" />

<img class="clase3" src="url-categoria-clase3" />

<img class="clase4" src="url-categoria-clase4" />
<div style="clear:both;"></div>

</div>
Reemplaza los valores destacados y listo, respetando que la claseX apuntará a la categoríaX.

Importante:

Si deseas añadir más categorías, recuerda añadir en el código CSS una nueva regla en cada categoría, deberá quedar de la siguiente forma:

.categoria5:focus ~ .clase5 {opacity:1;} /*Clase destacada*/
.categoria5:focus ~ .clase4 {opacity:0.2;}
.categoria5:focus ~ .clase3 {opacity:0.2;}
.categoria5:focus ~ .clase2 {opacity:0.2;}

.categoria5:focus ~ .clase1 {opacity:0.2;}

.categoria4:focus ~ .clase5 {opacity:0.2;}
.categoria4:focus ~ .clase4 {opacity:1;} /*Clase destacada*/
.categoria4:focus ~ .clase3 {opacity:0.2;}
.categoria4:focus ~ .clase2 {opacity:0.2;}
.categoria4:focus ~ .clase1 {opacity:0.2;}

.categoria3:focus ~ .clase5 {opacity:0.2;}
.categoria3:focus ~ .clase4 {opacity:1;} /*Clase destacada*/
.categoria3:focus ~ .clase3 {opacity:0.2;}
.categoria3:focus ~ .clase2 {opacity:0.2;}
.categoria3:focus ~ .clase1 {opacity:0.2;}

.categoria3:focus ~ .clase5 {opacity:0.2;}
.categoria3:focus ~ .clase4 {opacity:0.2;}
.categoria3:focus ~ .clase3 {opacity:1;} /*Clase destacada*/
.categoria3:focus ~ .clase2 {opacity:0.2;}
.categoria3:focus ~ .clase1 {opacity:0.2;}

.categoria2:focus ~ .clase5 {opacity:0.2;}
.categoria2:focus ~ .clase4 {opacity:0.2;}
.categoria2:focus ~ .clase3 {opacity:0.2;}
.categoria2:focus ~ .clase2 {opacity:1;}  /*Clase destacada*/
.categoria2:focus ~ .clase1 {opacity:0.2;}

.categoria1:focus ~ .clase5 {opacity:0.2;}
.categoria1:focus ~ .clase4 {opacity:0.2;}
.categoria1:focus ~ .clase3 {opacity:0.2;}
.categoria1:focus ~ .clase2 {opacity:0.2;}
.categoria1:focus ~ .clase1 {opacity:1;} /*Clase destacada*/
El código destacado en negrita corresponde a la nueva categoría (Código añadido), mientras que a las categorías existentes se les ha añadido una nueva línea la cual ha sido destacada en rojo.

También recuerda que el atributo diferente (En este caso "opacity:1") deberá ser el que apunte a la clase que tendrá la opacidad al 100%, en el caso del ejemplo 2, sería básicamente lo mismo, pero en su lugar se utiliza el atributo "display:block" .

Deberás además incluir un quinto <input> al código del paso 2 (Los controles):
<input type="button" class="categoria5" value="NOMBRE QUINTA CATEGORIA" />
 Y para añadir imágenes en esta categoría bastaría con añadirlas de esta forma:
<img class="clase5" src="url-categoria-clase4" />

Tal vez sea un poco complicado añadirlas, pero si lees con atención no deberías tener problemas.


Nota: Esta entrada fué programada para el día 30 de Julio del 2012, el administrador aún no puede atender sus comentarios. Lamento la situación.

Cualquier duda o problema con la edición de esta entrada por favor comentar, debido al escaso tiempo no he podido revisar correctamente y no he podido darme el tiempo de detallar todo.
víctor calderon

Víctor Calderón es un jóven chileno de 21 años, estudiante analista programador y orgulloso padre de una hermosa niña.

Moderador en +TBEE y escritor/fundador de este blog.

tweet

Blogroll de Ayuda Bloggers