Cambiando el color de un icono

Posted by On febrero 08, 2015 3 Comments

En ocasiones podemos querer añadir un icono que cambie de color cuando le pasamos el ratón por encima, tal y como vemos en el ejemplo:

Para lograr esto, lo único que hay que hacer es tomar el icono y con unos escasos conocimientos de photoshop, hacer el contorno blanco (o del color que necesitemos) y el interior, la parte que queremos que cambie de color, la hacemos transparente, de este modo podemos darle los colores que hagamos al background.

En el siguiente código, vemos como es realmente sencillo.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Prueba de colores</title>
	<style>
	.fondos{
		width:70px;
		height:50px;
		background-color: #111111;
		transition: 0.5s;
 		-webkit-transiton: 0.5s;
	}
	.fondos:hover{
		background-color: #00ACE4;
	}
	</style>
</head>
<body>
	<img class="fondos" src="lapicerotransparente.png">
</body>
</html>

Como se puede ver, lo único que hacemos con el css es marcar el tamaño de nuestro icono y ponerle un color de fondo, que obviamente solamente se verá coloreando el dibujo.

La transición marca el tiempo de cambio de color.

Finalmente ponemos la condicion :hover para que cuando pase nuestro ratón por encima cambie el color de fondo, lo cual hace que el color del icono cambie.

Realmente, simple y eficaz