Cambiando de color de una imagen con CSS

Color changer over image

Color changer over image

Quizás el título no sea el correcto, pero no sabría como llamarle de otra manera, pues básicamente el efecto que se logra con este truco es cambiar el color de una imagen, entonces pasemos a ver de que hablo y como funciona.

cambiando el color de fondo de una imagen con css
:

Estoy seguro de que han visto esto en algún lugar y quizás pensaron en que es algo complicado o difícil de implementar, pero se equivocan.

Tienen idea de como lo hice ?? De verdad que estas cosas me emocionan, porque son tan sencillas y muchas veces como desarrolladores las complicamos pensando en soluciones más complejas y este no es el caso, pues la imagen que ven aquí arriba es un PNG con transparencia (en las paredes, así es) .. y el truco viene cuando se cambia la propiedad de css background-color de la imagen.

El código para este ejemplo se ve como esto:

<div class="bgContainer">
    <img src="interior-bg-300x300.png" />
</div>
<input type="color" value="#ffffff" class="colorChanger" />

Eso sería el html y el javascript lo siguiente:

jQuery(document).ready(function($){
    $('.colorChanger').on('change', function(e) {
        $('.bgContainer img').css('background-color', $(e.currentTarget).val());
    });
});

Donde colorChanger es la clase que he agregado al input[color] para poderlo utilizar desde el evento change y una vez que se ha modificado el color, simplemente hacemos referencia a la imagen y modificamos la propiedad background-color de css con el valor seleccionado del input[color].

Lamentablemente este ejemplo solo funcionará en un navegador que tenga soporte para HTML5 o que soporte el control input para colores.

Esto lo vi por ahí de telerik en sus ejemplos, revisé el código y voilá!!

Espero que les guste, que lo apliquen y que comenten.

Happy Coding! 🙂

Co-fundador de Qbit Mexhico, usuario de linux, Developer en tecnologías web.. Nicaragüense, centro en basketball, primer centro en rugby y pintor los fines de semana. Ortögrafo y ambientalista psicológico (de escritorio).. ese soy yo!

Si te ha servido compártelo y difunde nuestro blog..

Facebook Twitter LinkedIn Google+ Flickr YouTube Skype 

Compartir en...Tweet about this on TwitterPin on Pinterest0Share on LinkedIn1Share on Google+1Share on Facebook1