Pretty!
Fix the scroll highjacking please.
Gradify turns the most prominent colors in an image into a CSS gradient
11–20 of 37 posts
Re: Gradify turns the most prominent colors in an image into a CSS gradient
#12Do you have permissions to use those images?
https://m.flickr.com/#/photos/lightofthewild/5611692322/
The left margin is broken on Chrome on iOS. http://m.imgur.com/94fzJrc
The scrolling behaviour make the page impossible to use. The scrolling, and I say this as politely as I can, is fucking horrible and makes me want to smash my phone to little pieces.
Sorry for the negative tone. The actual thing looks cool. It'd be nice to see these gradients being used more often.
Re: Gradify turns the most prominent colors in an image into a CSS gradient
#13To fix the horrible scroll (never, ever interfere with the scroll functionality!!!) add this in the console / scratchpad etc.:
window.addEventListener("scroll", function(ev) { ev.stopPropagation(); }, true);
Re: Gradify turns the most prominent colors in an image into a CSS gradient
#14Do you have permissions to use those images? https://m.flickr.com/#/photos/lightofthewild/5611692322/ The left margin is broken on Chrome on iOS. http://m.imgur.com/94fzJrc The scrolling behaviour make the page impossible to use. The scrolling, and I say this as politely as I can, is fucking horrible and makes me want to smash my phone to little pieces. Sorry for the negative tone. The actual thing looks cool. It'd b…
wow, nice save on this comment :)
Re: Gradify turns the most prominent colors in an image into a CSS gradient
#15Why don't you just post the 5 or 10 lines of code you're using to create the effect?
Re: Gradify turns the most prominent colors in an image into a CSS gradient
#16Why don't you just post the 5 or 10 lines of code you're using to create the effect?
They are one click away and more like 200 lines:
https://github.com/fraser-hemp/gradify/blob/master/gradify.p...
Re: Gradify turns the most prominent colors in an image into a CSS gradient
#17Great idea!
Found a bug - it doesn't follow the "orientation" property of the image, resulting in photos and gradients that are rotated.
I don't do Python myself, but using PerlMagick, the fix is $magick->AutoOrient();
Re: Gradify turns the most prominent colors in an image into a CSS gradient
#18I was going to implement this myself in the future as I need something similar. The main difference is that I thought of using an inline svg to have more flexibility in the way gradients look and are positioned.
Re: Gradify turns the most prominent colors in an image into a CSS gradient
#19Really nice effect - I can see this being used on galleries / profiles, etc. What is with the weird scroll behaviour on this page, though? It will refuse to stay where I put it and keeps jumping to odd snap points after a few seconds. Annoying.
Beautiful effect. Well done. (And I have no weird scrolling effects on either Firefox on laptop or Safari on phone, so maybe it was fixed.)
Re: Gradify turns the most prominent colors in an image into a CSS gradient
#20Nice tool. Looking at devtools, it generates a gradient in each direction (left, right, top, bottom). Each of these gradients is a single color transitioning from fully-transparent to fully-opaque.
The algorithm looks to be breaking the image into the 4 quadrants and finding the dominant color in each quadrant (eliminating any shades that are too gray). e.g. to get the color for the left-to-right gradient, it finds the most dominant color on the right of the image.