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
RT @_mialto_: Cambiando el color de un icono:
http://t.co/haB388P5Mm
Azurt Criamon liked this on Facebook.
Alvaro Serrano Garcia liked this on Facebook.