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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqV9ImwbEWyfedF_DytgDViekmxNGCLWnFSb3P-cyX37Ly81dQTprWHpjMoBZdhY9JJR2czj_gPdVajtqYUk3zxwwT_vyj8z5qMYBeB-YQ1xLHcDQQkLCTc5a8nrWI-kc03ozG8fIShqY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglXQIGqLzx_kzZjKY0Y7cygJMn7fqswrN4ex0Yo-6xNrm1LkRqQj6Z9sKT94m8_XYbZDMlzfjWpFvcrYD4sa4ryyX1JhS7Ukoqcq18EhoM38yyi9WvVpv70PJa6rlLyWIurp4lDp9Y0qM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqV9ImwbEWyfedF_DytgDViekmxNGCLWnFSb3P-cyX37Ly81dQTprWHpjMoBZdhY9JJR2czj_gPdVajtqYUk3zxwwT_vyj8z5qMYBeB-YQ1xLHcDQQkLCTc5a8nrWI-kc03ozG8fIShqY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglXQIGqLzx_kzZjKY0Y7cygJMn7fqswrN4ex0Yo-6xNrm1LkRqQj6Z9sKT94m8_XYbZDMlzfjWpFvcrYD4sa4ryyX1JhS7Ukoqcq18EhoM38yyi9WvVpv70PJa6rlLyWIurp4lDp9Y0qM/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.