Uno de los temas complejos que habían al momento de desarrollar un sitio web era trabajar con varias imágenes que contenían las mismas formas pero distintos colores… por lo general la forma rápida de hacerlo era tomar una imagen y repetirla, cambiándole el color, lo que resultaba en una imagen un tanto pesada y fea como esta:
Una buena solución es con tu editor de imágenes generar únicamente la imagen más grande y luego jugar con los fondos con css, lo que te permite inclusive obtener degradados para la imagen
Para ello que debemos hacer es primero ajustar una imagen con fondo de color, pero contenido transparente, puedes ver una acá.
El segundo paso es generar un div con una clase base, en este caso “imagen”
[sourcecode=”html”]
[/sourcecode]
Esto se define en cada punto así
[sourcecode=”css”]
.imagen {
background-color: red; //un color de fondo, ojo debe ser distinto a un background “normal”
background-image: url(“fondo.png”); //la imagen de fondo
display: block; //mostramos la imagen como un block o un inline-block para que realmente tome las dimensiones
height: 121px; //alto
width: 103px; //ancho
}
.imagen:hover { //evento con el mouse “sobre” el div
background-color: blue;
}
[/sourcecode]
Para aplica gradientes en estas imagen hay que realizar un pequeño truco
[sourcecode=”css”]
#dos {
display: block; //truco base, definir ancho y alto tal cual el ejemplo anterior
height: 121px;
width: 103px;
//bajo estas líneas definimos la gradiente background-image: linear-gradient(left top, #B8396E 36%, #184A59 68%, #2AA61F 84%);
background-image: -o-linear-gradient(left top, #B8396E 36%, #184A59 68%, #2AA61F 84%);
background-image: -moz-linear-gradient(left top, #B8396E 36%, #184A59 68%, #2AA61F 84%);
background-image: -webkit-linear-gradient(left top, #B8396E 36%, #184A59 68%, #2AA61F 84%);
background-image: -ms-linear-gradient(left top, #B8396E 36%, #184A59 68%, #2AA61F 84%);
background-image: -webkit-gradient(
linear,
left top,
right bottom,
color-stop(0.36, #B8396E),
color-stop(0.68, #184A59),
color-stop(0.84, #2AA61F)
);
}
// el truco acá viene tomar el div y anteponerle un div, por eso el selector “:after”
#dos:after {
background-image: url(“fondo.png”);
content: ”; // importante o NO verás el div
display: block;
width: 103px;
height: 121px;
}
[/sourcecode]