Can I convert an image to CSS3?
background-image, css, polygons
Solution
- Make the white areas transparent (colour to alpha in GIMP)
- Convert the image to a data URI (it's optional but it will make your site load faster)
- Use the url in (2) as the `background-image` and use any `background-color` you want.
Problem
Supposing that I have a polygon image PNG file like this (No border, the shape is filled with one color, no gradient, and background of the image is transparent) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF I'm thinking of using that polygon image as a background image and it will be changed (to another image with different color) when the user hovers on it. But I also want the color of the background image to be customizable. So, I'm thinking if there is any possibility to draw the polygon instead of using image files so that the color will be customizable (I don't think it's a good idea to create one file for one color and so on so forth). - What is the best solution for this case? Using png or drawing it by css? - Is there a tool/website to convert my png to css code?