This is the image: .
You know how the progress bars work, like if you give it the value of 50, and then later use javascript to change it with transition, it will be smooth, and eventually the progress bar will be filled.
Now, you see the white portion in the image?
Say, there is a field called Votes. Based on the value of Votes, a same amount of color should be filled inside the coffee image. (Replacing equal amount of white.)
Yes, I can develop hundred images, and do it in Photoshop, which is pretty lame.
There is a thing called keyframes, and there are animations, but I am not able to findna way to animate this using css.
I have seen it on Behance, and it is like a very common thing. The crazy thing is, I cant find it on Google.
In simple words, based on the amount of votes, the white portion should be replaced by equal amount of some other color.
Like this: Codepen.io: Image Filling progress
Turn the image into a transparent png, and have a colored div behind the image change height based on the number of votes.
Related
I don't really know what im searching for even after googling all sorts and wondered if someone could put me in the right direction.
Lets base this example on a car frame.
I would like to have one image of a car frame which allows to have multiple colours (Hex), so when a user selects black, the main car colour is black but the shape/frame of the car remains with the same image, selecting red would change the colour but would keep the same frame image.
The reason why i would like to have one image is, because there could be 50-60 cars all with around 20-30 different colours. So uploading that many images would consume a lot of disk space over time.
Any components/frameworks i could use with an ASP net project?
Either client side Html and Javascript:
You could do this efficiently by creating a partially transparent image I guess. Then change the background color of the element below the image using script. It depends on the type of picture and quality of the output if this is an option for you.
A better approach would be to change the color of pixels directly. Look for Html5 canvas pixel manipulation or use this link: Pixel manipulation with canvas. Scroll down to the Grayscale sample to start with.
Or server side C#:
Use image filters/direct pixel manipulation. Look for "Pixel Manipulation in C#" to find the right libs and API for your project and framework e.g. WriteableBitmapEx. More choices here: .NET Core Image Processing.
I'm wondering how to remove a color in an image on a webpage. I want some kind of result like explained here...
An image with three segments: blue, purple, and red. I want to filter out all the blue so it ends up with the segments: black, red, and red.
blue purple red -> black red red
I know this would be done in CSS or JavaScript in some way but I do not know how I would do it. I've been messing with CSS filters and even putting a div on top of it that is a certain color, but nothing will get rid of the blue.
Does anyone know how to do this / is it possible?
You could try using CSS filters however, i don't think there is a filter for a specific colour and browser compatibility is limited.
https://developer.mozilla.org/en/docs/Web/CSS/filter
Alternatively you could use an SVG image which allows you to modify certain parts of an image using CSS however i think SVG files can get pretty big for large images...
I think you can use adobe illustrator to save files as SVG.
http://www.w3schools.com/svg/tryit.asp?filename=trysvg_myfirst
Slightly more complicated, but far more compatible - load the image into a canvas, and then use getImageData within it, filter out whichever colours you don't want, then paste it back again.
It's not a quick (framerate) process - getImageData is a really slow function so an HD screen won't hit 60fps on anything except the most powerful machine. Saying that, if you're not trying to animate it then it's perfect ;-)
I am looking for a solution for how to go about animating the following image indicating elapsed time as you see below. To make it easier for explanatory purposes, I would like the animation to take place in 10% intervals (despite me showing the 67% image example.) In effect, the colored gradient you see in the meter would be revealed and perhaps unmasked at these different 10% intervals to show more of the colored gradient. Could I employ some sort of masking technique with a <div> and perhaps some CSS3 transforms? I have this image in different layers in PhotoShop so it is definitely possible for me to manipulate the elements. How should I go about doing this?
This is what it looks like at 67% complete:
..and 100% complete:
There are some ways to do it.
The most used lately are with JS and canvas, but there are pure CSS3 methods too.
All of these I will post use a complete circle but in your case, you can use as base and edit them to your needs.
JS/Canvas:
http://p.ar2oor.pl/cprogress/
http://anthonyterrien.com/knob/
CSS3:
http://fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar
http://www.alessioatzeni.com/blog/css3-loading-animation-loop/
For more results, google 'css radial progress bar'.
I have a bunch of products on a page that have 200x200 images. My first run at this was to get the data for each pixel (nested for loop, one for x, one for y), then convert rgb to hex, and store them in an array and then get the most frequent one. This script needs to run on 96 items per page at a time.
Currently, it creates a canvas and puts the product image in that canvas and then performs the above operations.
Is there some kind of averaging algorithm that would make this faster?
Yes!
Lokesh Dhakar has created a script called "color thief" that calculates the dominant color of an image. It uses the modified median cut quantization algorithm (MCCQ) to quickly cluster colors and determine the dominant color (or even the whole color palette).
There is a demo here: http://lokeshdhakar.com/projects/color-thief/ and the script is available on github here: https://github.com/lokesh/color-thief
I know it sounds easy to use library and all, but i found a much simpler solution that pretty much serves the purpose.
When you apply a blur filter what it does is takes the average of pixel intensities. So if you apply a blur to the image with pretty high pixel value like
filter:blur(30px);
or
filter:blur(50px);
or anything that suits, it average outs the entire image and provides you with a solid background color which is most of time the prominent color from the image.
Its much simpler to do, and should work almost always. Just try tinkering with the blur amount.
Also remember to set overflow-y to be hidden because high blur causes white padding outside the image. hiding the overflow will fix that.
Hope that helps :)
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?