I have an image of a sky blue star, I would like to change the color of the star only.
#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>
How could I make this change using css rules?
For stuff like this, there's SVG .
There's no point in using an external image when you can save yourself that HTTP request and also make it more maintainable.
MARKED:
We first define our star using the flag
<path>
:It is important that you use the CSS variable
currentColor
in the attributefill
to<path>
be able to change the color of your icon with the propertycolor
in CSS.Now that we have our star, we'll wrap it in the mark
<symbol>
and give it aid
so we can use it a few steps later. You can add a title to help with accessibility issues. (Info about viewBox here )Next, we'll make our sprite sheet to use as a container if we wanted to add more icons. We'll give you a
id
to hide the element in CSS because some browsers show unwanted white space.Now that we have our SVG markup, we can move on to using it with the tag
<use>
like so:Here we will give it a block-level general class and a modifier. Inside the tag
<use>
we reference our symbol by calling itsid
.Every time you want to use this icon you just paste this piece of code.
STYLE:
Remember the classes we defined earlier in our
<svg>
?These will help us style our element.
And we just hide our sprite sheet.
And ready!
CODE FRAGMENT:
More on this technique here .
Of course it can be done on png images by applying the filter property on a class, how the filter works according to the consortium: "A filter effect is a graphic operation that is applied to an element as it is drawn in the document. It is a image-based effect, in which zero or more input images are taken, (applies) a set of parameters specific to the effect, and then outputs (results) an image."
Now, I show you the example code to serve as a guide:
In fact, what it does is apply a shadow on the png image, with opacity you give transparency to the png object in question so that it can take the color that you are assigning it, in the hover you simply change it to the color you want, this is a half solution, but still functional, I hope it helps you, if you have doubts, do not hesitate to ask, greetings.
In this example you can't, since it's a png! the easiest would be to create the star with CSS/CSS3
If you prefer not to waste your time, you have fonts like FontAwesome that make everything easy, then you just change the color by css
http://fontawesome.io/icon/star/
You can modify the filter and saturation of the image, example: