3

tengo una imagen de una estrella color azul cielo, quisiera cambiarle el color a la estrella solamente.

#estrella img{
	height: 35px;
}
</html>
<head>
<title>Cambiar el color de la imagen</title>
</head>
	<div id="estrella"><img src="http://i268.photobucket.com/albums/jj6/SK_CRISIS/Emblem%20BG%20PNGs/Star.png"></div>
</html>

¿Como podria hacer este cambio utilizando reglas css?

4 respuestas 4

7

Para cosas como esta, está SVG.

No tiene sentido que utilices una imagen externa cuando puedes ahorrarte esa solicitud HTTP y además hacerlo más mantenible.

MARCADO:


Primero definimos nuestra estrella utilizando la marca <path>:

<path fill="currentColor" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>

Es importante que utilices la variable de CSS currentColor en el atributo fill de <path> para poder cambiar el color de tu icono con la propiedad color en CSS.


Ya que tenemos nuestra estrella, la envolveremos en la marca <symbol> y le daremos un id para poder utilizarla en unos pasos más adelante. Puedes agregar un título para ayudar en temas de accesibilidad. (Info sobre viewBox aquí)

 <symbol id="iconoEstrella" viewBox="0 0 32 32">
    <title>Estrella</title>
    <path fill="currentColor" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </symbol>

Después, haremos nuestra hoja de sprites para utilizarla como contenedor si quisiéramos agregar más iconos. Le daremos un id para ocultar el elemento en CSS por cuestiones de que en algunos exploradores muestra un espacio en blanco no deseado.

<svg id="spriteSheet">
  <symbol id="iconoEstrella" viewBox="0 0 32 32">
    <title>Estrella</title>
    <path fill="currentColor" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </symbol>
</svg>

Ya que tenemos nuestro marcado de SVG, podemos pasar a utilizarlo con la etiqueta <use> de la siguiente manera:

<svg class="icono icono--estrella">
  <use xlink:href="#iconoEstrella"></use>
</svg>

Aquí le daremos una clase general de nivel bloque y un modificador. Dentro de la etiqueta <use> referenciamos nuestro símbolo llamando su id.

Cada vez que quieras utilizar este icono simplemente pegas este pedazo de código.


ESTILO:

¿Recuerdas las clases que definimos anteriormente en nuestro <svg>?

icono icono--estrella

Éstas nos ayudarán a darle estilo a nuestro elemento.

.icono {
  display: inline-block;
  width: 1em;
  height: 1em;
}
.icono--estrella {
  font-size: 4em; /* Este es el tamaño del icono */
  color: lightblue; /* Este es el color del icono*/
}

Y simplemente ocultamos nuestra hoja de sprites.

#spriteSheet {
  display: none;
}

Y listo!


FRAGMENTO DE CÓDIGO:

#spriteSheet {
  display: none;
}
.icono {
  display: inline-block;
  width: 1em;
  height: 1em;
}
.icono--estrella {
  font-size: 4em;
  color: lightblue;
}
.icono--estrella:nth-child(2) {
  color: red;
}
.icono--estrella:nth-child(3) {
  color: green;
}
.icono--estrella:nth-child(4) {
  color: yellow;
}
<svg class="icono icono--estrella">
  <use xlink:href="#iconoEstrella"></use>
</svg>
<svg class="icono icono--estrella">
  <use xlink:href="#iconoEstrella"></use>
</svg>
<svg class="icono icono--estrella">
  <use xlink:href="#iconoEstrella"></use>
</svg>
<svg class="icono icono--estrella">
  <use xlink:href="#iconoEstrella"></use>
</svg>

<svg id="spriteSheet">
  <symbol id="iconoEstrella" viewBox="0 0 32 32">
    <title>Estrella</title>
    <path fill="currentColor" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </symbol>
</svg>


Más sobre esta técnica aquí.

1

Claro se puede hacer sobre imágenes png aplicando la propiedad filtro sobre una clase, el como funciona el filtro según consorcio: "Un efecto de filtro es una operación gráfica que se aplica a un elemento tal como está dibujado en el documento. Se trata de un efecto basado en imágenes, en que se toman cero o más imágenes de entrada, (aplica) una serie de parámetros específicos para el efecto y, a continuación produce como salida (resultado) una imagen."

Ahora bien te muestro el código de ejemplo para que te sirva de guia:

body
{
background: #000;
}
.efecto
{
	-moz-filter: opacity(0.5) drop-shadow(0 0 0 white);
	-webkit-filter: opacity(0.5) drop-shadow(0 0 0 white);
	filter: opacity(0.5) drop-shadow(0 0 0 white);
}
.efecto:hover
{
	-moz-filter: opacity(0.2) drop-shadow(0 0 0 #2b8);
	-webkit-filter: opacity(0.2) drop-shadow(0 0 0 #2b8);
	filter: opacity(0.2) drop-shadow(0 0 0 #2b8);
}
<div class="efecto">
  <img src="https://i.sstatic.net/bd7VJ.png" />
</div>
<br>
<div class="efecto">
<img src="https://orig00.deviantart.net/9f95/f/2012/166/4/5/mano_png_by_sandhansen-d53lqev.png" />
</div>

En si lo que hace es aplicar una sombra sobre la imagen png, con opacity le das transparencia al objeto png en cuestion para que así pueda tomar el color que le estas asignando, en el hover simplemente cambias por el color que desees, esta es una solución a medias, pero igual funcional, espero te sirva, si tienes dudas, no repares en preguntar, saludos.

0

En este ejemplo no puedes, ya que es un png! lo más fácil sería crear la estrella con CSS/CSS3

Si prefieres no perder el tiempo, tiene fuentes como FontAwesome que facilitan todo, luego solo cambias el color por css

http://fontawesome.io/icon/star/

0

Se puede modificar el filtro y saturación de la imagen, ejemplo:

 img{
    	height: 35px;
 }
#estrella {-webkit-filter: saturate(10); filter: saturate(8);}
#estrella2 {-webkit-filter: saturate(5); filter: saturate(60);}
    	<div id="estrella"><img src="http://i268.photobucket.com/albums/jj6/SK_CRISIS/Emblem%20BG%20PNGs/Star.png"></div>
      
      <div id="estrella2"><img src="http://i268.photobucket.com/albums/jj6/SK_CRISIS/Emblem%20BG%20PNGs/Star.png"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.