All geek questions in one place

Can I convert an image to CSS3?

Suppose I have a PNG file with a polygonal image like this (no frame, the shape is filled with one color, no gradient, and the background of the image is transparent) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4 .GIF

I’m thinking about using this polygon image as a background image, and it will be changed (to another image with a different color) when the user hangs on it.

But I also want the background color to be adjusted. So, I think that if it is possible to draw a polygon instead of using image files so that the color is customizable (I don't think it is a good idea to create one file for one color and so on).

  • What is the best solution for this? Using png or drawing it css?
  • Is there a tool / website to convert my png to css code?
+6
source share
3 answers
  • Make white areas transparent (color in alpha in GIMP)
  • Convert image to data URI (this is optional, but it will speed up the loading of your site)
  • Use url in (2) as background-image and use whatever background-color you want.
+8
source

Use this to convert the image: http://codepen.io/blazeeboy/pen/bCaLE I think it is much better to use the converted images because browsers load them faster.

+4
source

I think CSS is the wrong thing for this. Yes, using CSS you can create many shapes, but there are limitations, and in any case, drawing shapes using CSS is a little hacked, even when it's just a simple triangle.

Instead of CSS, I would suggest SVG - appropriate tools for this work.

SVG is a graphic format for vector graphics that can be embedded in the site and can be created or modified using Javascript directly on the site. Changing the color and shape of a simple polygon is about as simple as with SVG.

Another advantage of using SVG is that it is vectorial, it is scalable, so you can display it in any size.

The only side of SVG is that it is not supported by older versions of IE (IE8 and earlier). However, these browsers support an alternative language called VML, and there are several good Javascript libraries that will work with them, allowing you to fully integrate with multiple browsers. One that I would recommend is Raphael.js .

So, a tiny (and very simple) bit of Javascript code, not a very dirty CSS bit. It seems to me a winner.

+2
source

Source: https://habr.com/ru/post/951488/

More articles:


All Articles