Results 1 to 2 of 2

Thread: How to apply colour tint with canvas + apply to css class

Hybrid View

  1. #1
    Join Date
    Mar 2012

    How to apply colour tint with canvas + apply to css class

    I am building a site that will have hundreds of product images. The product images will all be a square .png with a different logo "cut out" (transparent) of each one. Each image is made in illustrator, saved for the web and placed in the site.

    Each one of these images are customisable, by the customer, in colour. I am achieving this at the moment with the use of <select> drop downs and jQuery (The background colour of the image changes, depending on what option is selected, making it look like the logo colour has changed).

    My problem is that if I decide to change the colour of the solid colour of the image at any time along the way and I have already created all of these images in illustrator, this is going to be an extremely tedious task to complete. So I tried to solve this problem.

    I have nearly found the solution - I used PaintBrushJS's "Tint" function and that seemed to change the colour of the solid colour and ignore the transparent area, which is good, but is there a way to do this in a more wide spread way?

    Is PaintBrushJS the best way to do this? How would I do it without it?

    Is it possible to create a css class (or something similar) and apply it to every product image so I can change the colour at a later date and it will work site wide?

  2. #2
    Join Date
    Feb 2011
    Sault Ste. Marie, MI
    Could you post some code for it now and maybe a working example of what you have so far so that we may take a look at it and see if there is a better route to go?
    WYSIWYG editors will never beat my hand written code!!!! Learn to do it in notepad and learn how to actually control your website! Current Project http://www.jmcanineservices.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center