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.

Crea texturas y motivos para tu blog con Adobe Photoshop

Si estás en proceso de crear tu propia plantilla para Blogger, puede que te interese incluir imágenes para decorarla, en esta oportunidad veremos distintos métodos de creación de texturas y motivos muy sencillos pero a la vez muy llamativos.

El tutorial:

Lo primero que necesitas para esta guía es Adobe Photoshop (En mi caso utilizaré la versión CS5, pero puedes utilizar cualquier versión).


Textura 1: Fondos Granulados:

Este tipo de textura es muy sencilla de hacer, para ello deberás crear un documento de 125x125 píxeles (Puedes utilizar otro, siempre y cuando no sea demasiado pequeño):

Con la herramienta "Bote de pintura" deberás pintar todo el cuadrado, en mi caso utilizaré el color #5297c0:

Ahora que ya tenemos listo esto, nos situamos en la barra superior y aplicamos "Filtro \ Textura \ Granulado", jugaremos con el valor de intensidad hasta que hayamos quedado conformes con el resultado:

Resultado:

Aplicado:

Textura 2: Líneas diagonales:

Este tipo de textura deberá ser guardado como un motivo, para ello crearemos un documento de 5x5 píxeles y haremos zoom hasta el 3200% (La imagen deberá ser transparente):

Deberás utilizar la "Herramienta Lápiz" y dibujar de esta forma:

Ahora para definirla en algún color hay que guardarla como motivo (Edición \ Definir Motivo):

Ahora crea un documento (125x125px al igual que el anterior) y establece un color de la misma forma que en la textura granulada.

En la lista de capas, selecciona la tuya y con botón derecho presionas "Opciones de fusión":

Presionas en "Superposición de motivo" y seleccionas el motivo que anteriormente creaste:

Resultado:

Aplicado:

Textura 3: Gradientes:

Para  crear gradientes, bastaría con crear una capa de cualquier color y que mantenga el mismo alto del contenedor al cual deseamos aplicar esta imagen.

Al igual que en las líneas verticales, deberás ir a la lista de capas y presionar sobre la tuya, pero esta vez deberás presionar en "Superposición de degradado":

Presiona en la zona "Degradado" para poder establecer los colores:

Resultado:

Aplicado:

Si necesitas algún otro tipo de textura para tus fondos pídela en los comentarios y se incluirá en el post.

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

Imagen con texto sobrepuesto en Blogger

Ya hemos visto distintas formas de personalizar nuestras imágenes para perfeccionar la apariencia de éstas, como efectos de zoom, efecto polaroid, galería y otros efectos más.

En esta oportunidad les mostraré una sencilla forma de incluir una historia en las imágenes de tal forma que aparezca cuando se sitúe el mouse sobre la imagen y no sea necesario mostrarlas siempre o mostrarlas en un cuadro de texto por separado.
El resultado es similar al siguiente (Pasa el cursor sobre la imagen):

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

El tutorial:

Paso 1:Añadiendo los atributos:

En "Diseño | Edición HTML" deberás buscar la siguiente línea:

]]></b:skin>

Arriba de esta pega el siguiente código:

.imagen-con-historia {
    position: relative;
    display: block;  
    padding:0;
    width: 500px;
    margin: 0 auto;
}

.imagen-con-historia img {
    max-width:500px;
    max-height:auto;
    z-index:1;
    border:none;
    margin:0;
    padding:0;
}

.imagen-con-historia span {
    background: #111;
    opacity:0;
    margin:0;
    -moz-transition: 400ms;
    -webkit-transition: 400ms;
    -o-transition:400ms;
    transition: 400ms;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 480px;
    padding: 10px;
    border-top: 1px solid #999;
    z-index:10;
}

.imagen-con-historia span:hover {
    opacity:.55;
}

Guarda la plantilla y listo.

Paso 2: Usando la imagen con texto:

Cada vez que quieras incluir la imagen con el texto deberás hacerlo mediante el siguiente código:

<div class="imagen-con-historia">
<img src="URL-IMAGEN" />
<span>
Escribe el texto que contendrá la imagen acá
</span>
</div>

Extra: Descripción en las imágenes:

He hecho una alternativa un poco más minimalista y simple, que sólo muestra la descripción breve de las imágenes tal como lo muestra el siguiente efecto:

Hermosos Glaciares

Paso 1: Añadiendo los estilos:

En el mismo sitio que pegaste el código CSS anterior deberás pegar el siguiente:

.imagen-con-descripcion {
      position: relative;
      display: block;   
      padding:0;
      width: 500px;
      height:375px;
     margin: 0 auto;
}

.imagen-con-descripcion img {
     max-width:500px;
     max-height:375px;
     z-index:1;
     border:none;
     margin:0;
     padding:0;
}

.imagen-con-descripcion span {
    background: #111;
    margin:0;
    opacity:0.8;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 480px;
    padding: 10px;
    border-top: 1px solid #999;
    z-index:10;
}

Paso 2: Usando la imagen con la descripción breve:

Cuando quieras utilizar este efecto deberás pegar el siguiente código en modo "Edición de HTML" en las entradas:

<div class="imagen-con-descripcion">
<img src="URL-IMAGEN">
<span>Breve descripción de la imagen</span>
</div>

Importante:

• No utilices imágenes inferiores a 500px de ancho y 375px de alto.

Pack de íconos: Crystal Clear Bubble Social Icons

Crystal Clear Bubble Social es un pack de íconos de alta resolución creado por Webtreats. Contiene una extensa lista de íconos de las redes sociales más utilizadas.


Vista Previa:

Información del pack de íconos:

• Autor: Lita
• Página Principal: Webtreats
• Formato: PNG
• Resolución: 512x512px.
• Tamaño: 8.1MB
• Incluye variaciones.
• Cantidad de íconos: 145.