Cambiar la tonalidad de color de las imágenes | Oloblogger Hace poco vimos cómo convertir una imagen normal en una especie de fotografía antigua y entonces prometí que veríamos algo similar pero que...

14 de febrero de 2013

Cambiar la tonalidad de color de las imágenes

Hace poco vimos cómo convertir una imagen normal en una especie de fotografí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,
.separator: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 clase colorear y ya tendremos una imagen con el tono indicado en el background (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="colorear azul">
<a href="URL_ENLACE"><img src="URL_IMAGEN" /></a>
</div>



<div class="colorear rojo">
<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 clase separator cuando subimos una imagen y así no tener que crear una nueva. Para ello sirve el anterior CSS cambiando el nombre colorear las cuatro veces que aparece, por el de separator.

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 como background. 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 un background: none;


<div class="separator amarillo" 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>



<div class="separator cyan" style="clear: both;...



<div class="separator verde" style="clear: both;...

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

16 comentarios :

  1. Necesito ayuda para aplicar esto a cierta plantilla a todas las imágenes en la portada digamos no a una especifica y no lo logro. Me puedes ayudas?

    ResponderEliminar
    Respuestas
    1. Prueba con esto, pero cambiando las propiedades CSS por las de aquí.

      Eliminar
  2. No lo puedo hacer, no hay caso, creo que serian .post img como deberian nombrarse pero no puedo hacer nada. Soy nuevo y no entiendo mucho de esto.

    ResponderEliminar
    Respuestas
    1. Tendrías que usar lo que se explica en el enlace que te puse pero cambiando la palabra .grises por .post. Tal y como dices quedaría .post img y .post img:hover

      Todo eso lo tienes que copiar y pegar antes de la etiqueta de cierre SKIN de tu plantilla. Para más detalle echa un vistazo a estos dos posts:
      http://www.oloblogger.com/2010/05/blogger-estructura-basica-de-la.html
      http://www.oloblogger.com/2008/05/blogger-para-torpes-html-y-css.html

      Eliminar
    2. Sí ya hice todo eso, pero ahí te pone el filtro color gris, yo quiero otro color como en esta entrada.

      Eliminar
    3. ¿Y probaste con SEPARATOR como se explica en la segunda mitad del post?

      Eliminar
  3. Intento hacer esto con una imagen del sidebar, pero no obtengo resultado :S he copiado los códigos tal y como los das, pero nada ¿no sirve para las imágenes del sidebar?

    ResponderEliminar
    Respuestas
    1. Hola. Pues sí debería servir. Pásame tu dirección que lo vea.

      Eliminar
  4. Muy bueno lo que haces oloman, al compartir tus conocimientos.Soy un seguidor fiel a este blog.Saludos desde Argentina

    ResponderEliminar
  5. el error es porque tiene una "coma" al final si la quitan ya se ve normal ----> .colorear:before, {} <------

    lo correcto seria asi .colorear:before {}

    ResponderEliminar
  6. Oloman, estoy usando filtros similares a este, pero en blanco y negro, no usando este método en especifico, pero se asemeja, el css aplica a todas las imágenes automáticamente el efecto...

    css:
    div.post-body.entry-content div img {
    filter: grayscale(100);

    la cuestión, es que quiero que ese css no se vea en la entrada misma, al entrar, valga la redundancia (que vuelva el color).

    probé con el método de ocultar elementos en ciertas zonas del blog, pero no, nada pasa.

    saludos

    ResponderEliminar
    Respuestas
    1. Hola Amovi. En ese caso lo que de ocultar elementos en ciertas zonas del blog no te sirve para nada. Lo que tienes que hacer es añadir ese estilo dentro de una condición, de manera que sólo se ejecute en todas las páginas menos precisamente en las entradas.

      Para ello quita eso de dónde lo pusiste y en la plantilla, antes del </head> inserta esto otro:

      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <style>
      div.post-body.entry-content div img {
      filter: grayscale(100);
      }
      </style>
      </b:if>

      Eliminar
    2. Resulto de inmediato, a cuantos miles ayudas así, gracias.

      aprendo lento, pero me eh estado fijando que arriba de < /head> están todos los < b:if, me gustaría aprender sobre esas
      ''condiciones'', (navegando por oloblogger en este momento :D )

      Eliminar
    3. Si escribes "condiciones" en mi buscador, encontrarás varios artículos sobre el tema; desde lo más sencillo hasta cosas más sofisticadas ;)

      Eliminar