Mobile app version of vmapp.org
Login or Join
Merenda852

: Can I re-color my artwork programmatically? I have a rather interesting issue. I have columns in my web app that look similar to these guys: I've been able to slice them up and build

@Merenda852

Posted in: #Css #Html

I have a rather interesting issue. I have columns in my web app that look similar to these guys:



I've been able to slice them up and build these guys out...but now I have an added requirement of "recoloring" the columns (as these guys might need to be in a variety of colors). Rather than updating the assets each and every time with a different color, is there a way to do any of the following?

a.) Create these columns somehow through code (HTML/CSS)? And programmatically re-color the columns?

b.) Programmatically re-color these columns by reducing the opacity on the background image (each slice, essentially) and instead, do an overlay that is an RGB value of my choice? (only issue I'm worried about is that the slices are square. Meaning, if you look at the top of the column, when I spliced this, the background on the actual splice is transparent. However, i'm worried if I do an overlay on this piece, it'll overlay a color and color the transparent background of the shape -- let me know if that's confusing. it's rather hard to describe this)?

Any ideas on how to do this without having to create differently colored assets every time?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Merenda852

1 Comments

Sorted by latest first Latest Oldest Best

 

@Steve758

It mainly depends on your skills and of the final output needed (An html page? An image? A report?).

If your final output is an image and you are the only people who could change it, probably it's faster to use a graphic program (working with vectorial images is simple changing colors and dimensions with precision); but if you need to provide some interactive tool you'd better code an html5 interface which send the correct color to a server side script (e.g. PHP) or a client side script (javascript).

If you are practical with PHP or other server-side programming language, you can generate the graphs by coding them with GD. It's not so difficult as it seems.

If you prefer to draw your bars with a graphic program, you can use Adobe Illustrator or Inkscape to produce SVG and change the colors with javascript (see for example here). Changing the height using javascript is a little bit difficult, but is possible (see here).

If your output is an html page, there are a lot of javascript graphic libraries oriented to the graphs (flot, Google Charts, Chart.js, D3.js, Processing.js, ...).

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme