Can I convert an image to CSS3?

Question

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?

Nabil Kadimi · Accepted Answer · 2015-09-14T21:02:34.443

9

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.

edited Sep 14 '15 at 21:02

answered Aug 11 '13 at 12:34

Nabil Kadimi

10,078
2
51
58

I've tried your way and set background-color to red but it doesn't work. See my jsfiddle. http://jsfiddle.net/K44mE/499/ How can I make the grey polygon change to e.g. red polygon? – Atthapon Junpun-eak Aug 11 '13 at 13:31
And you code (even if a little hard to read) does what you could expect from it, you add `background-color` only on hover(`:hover`) – Nabil Kadimi Aug 11 '13 at 13:38
Thanks, but I mean to change the grey polygon itself to red polygon. Not to change its background to red. – Atthapon Junpun-eak Aug 11 '13 at 13:38
Make the polygon form transparent and it's surrounding space plain, not the inverse. – Nabil Kadimi Aug 11 '13 at 13:46
I see your point. But that means the parent background must be permanently 'white' (in this case). What if I need the parent background to be customizable too? So, this is a trade-off? – Atthapon Junpun-eak Aug 11 '13 at 13:50
1

Thanks Nabil, I finally decided to go with your solution. It's the easiest way and it works with cross-browser. – Atthapon Junpun-eak Aug 11 '13 at 13:58

score 2 · Answer 2 · answered Aug 11 '13 at 13:29

I think CSS is the wrong thing to use for this. Yes, it is possible to create a lot of shapes using CSS, but there are limitations, and in any case, drawing shapes with CSS is a bit of a hack, even when it's just a simple triangle.

Rather than CSS, I would suggest SVG is the appropriate tools for this job.

SVG is a graphics format for vector graphics that can be embedded in a site, and can be created or altered via Javascript directly within the site. Changing the colour and shape of a simple polygon is about as easy as it gets with SVG.

The other advantage of using SVG is that because it's a vector graphic, it's scalable, so you could display it at any size.

The only down-side of SVG is that it isn't supported by old versions of IE (IE8 and earlier). However, these browsers do support an alternative language called VML, and several good Javascript libraries exist which will work with either, thus allowing you complete cross-browser compatibility. The one I'd recommend is Raphael.js.

So a tiny (and very easy) bit of Javascript code instead of a very messy bit of CSS. Seems like a winner to me.

Thanks for sharing great idea. However, I'm feeling that we're doing too complicated thing for just a small thing. I'd just like to make a button as a polygon shape and change its color when hovering it. but I don't want to create a new image for each hovering color I want to have. Is there any other way? — Atthapon Junpun-eak, Aug 11 '13 at 13:48

Can I convert an image to CSS3?

2 Answers2

Linked

Related