Cambiar la tonalidad de color de las imágenes – Email – Hipotecario

Hace poco vimos cómo convertir una imagen normal en una especie defotografía antigua y entonces prometí que veríamos algo similar pero que consistiría en un sencillo cambio de tonalidad de color. Eso último es lo que veremos hoy.

De manera similar a cómo hicimos la otra vez, lo que haremos ahora será superponer una capa con un color RGBA semitransparente usando:before. Realmente no tiene mucha ciencia, así que vamos allá con el primer ejemplo y con el código correspondiente.

Este sería el CSS:

.colorear {
position: relative;
/* Estas dos propiedades sólo sirven para centrar */
display: table;
margin:0 auto;
}
/* Y esta para evitar el margin automático de Blogger en los enlaces */
.colorear a {
margin: 0 !important;
}
.colorear:before, {
content: "";
display: block;
position: absolute;
/* Todas las posiciones a cero */
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,102,0, 0.5); /*Sepia*/
}
.colorear:hover:before {
background: none;
}

La última declaración sirve para deshacer lo hecho al pasar el puntero por encima de la imagen. Si se desea que las imágenes permanezcan coloreadas permanentemente sólo hay que borrarla.

Con esto en nuestra plantilla sólo hay que añadir la clasecolorear y ya tendremos una imagen con el tono indicado en elbackground (sepia en el ejemplo). Así es como está hecha la de Hitchcock del principio.

div class="colorear"
a href="URL_ENLACE"img src="URL_IMAGEN" //a
/div

¿Y que tal si podemos ir variando el color según se nos antoje? Pues para eso sólo hace falta incorporar al código anterior algunas declaraciones más y luego añadir una de esas nuevas clases al HTML:

.azul:before {
background: rgba(0,0,255, 0.5);
}
.verde:before {
background: rgba(0,255,0, 0.5);
}
.rojo:before {
background: rgba(255,0,0, 0.5);
}
.cyan:before {
background: rgba(0,255,255, 0.5);
}
.amarillo:before {
background: rgba(255,255,0, 0.5);
}

div class="colorearazul"
a href="URL_ENLACE"img src="URL_IMAGEN" //a
/div

div class="colorearrojo"
a href="URL_ENLACE"img src="URL_IMAGEN" //a
/div

Para Blogger una vez más podemos aprovechar que ya se inserta automáticamente la claseseparator cuando subimos una imagen y así no tener que crear una nueva. Para ello sirve el anterior CSS cambiando el nombrecolorear las cuatro veces que aparece, por el deseparator.

Hay que tener en cuenta que si se hace así todas las imágenes de todas las entradas saldrán con el color que hayamos puesto comobackground. Luego si se quiere ir cambiando el color de alguna en concreto habrá que añadir manualmente, como hicimos antes, alguna de las clases con los colores adicionalmente definidos.

Se puede crear una que anule el efecto y que tendría que llevar unbackground: none;

div class="separatoramarillo" style="clear: both; text-align: center;"
a href="URL_ENLACE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"img border="0" height="312" src="URL_IMAGEN" width="500" //a/div