3 ms·
Gradify turns the most prominent colors in an image into a CSS gradient
- pmx 11y agoReally 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.
- stephenr 11y agoThe hostile scrolling on the page makes it effectively unusable on mobile
- ourmandave 11y agoThis is why no one downloads the band Hostile Scrolling's app.
- SiVal 11y agoBeautiful effect. Well done. (And I have no weird scrolling effects on either Firefox on laptop or Safari on phone, so maybe it was fixed.)
- ionforce 11y agoWhy does the page keep jumping around?
- frozenport 11y agoWould using a really large order polynomial be any more help? For example a 10th order best fit?
- eru 11y agoLarger order polynomials usually just give you more `swing'.
- Theodores 11y agoThis is great for photos but not that useful with product images surrounded by white space as that white space becomes a colour.
- dssddsds 11y agoactually has a minimum distance from white, white is accepted if there's literally nothing else
- Theodores 11y agoThis is great for photos but not that useful with product images surrounded by white space as that white space becomes a colour.
- Moter8 11y agoTried it out on an image that would be used on a realtor website. Doesn't look too good in my opinion. http://i.imgur.com/WrbsRcM.png http://i.imgur.com/WrbsRcM.png
- dssddsds 11y agothe js version (that example) isn't as good as the py version
- Listen_up_buddy 11y agoPretty! Fix the scroll highjacking please.
- DanBC 11y agoDo you have permissions to use those images? https://m.flickr.com/#/photos/lightofthewild/5611692322/ https://m.flickr.com/#/photos/lightofthewild/5611692322/ The left margin is broken on Chrome on iOS. http://m.imgur.com/94fzJrc 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.
- logicallee 11y agowow, nice save on this comment :)
- kevinbowman 11y ago> Do you have permissions to use those images? Wow, you're quite right - there's no attribution on any of the photos. Also, since they're re-hosted onto tumblr it's hard to tell where they came from. It's possible that the author may have taken all of the photos themself, but unlikely given the example which you've pointed out. It's also possible that the author has sought private permission to use the photos, but you'd probably expect some attribution if that were the case.
- throwaway56789 11y agoTo 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);
- rqk7sWvM 11y agoWhy don't you just post the 5 or 10 lines of code you're using to create the effect?
- chronial 11y agoThey are one click away and more like 200 lines: https://github.com/fraser-hemp/gradify/blob/master/gradify.py https://github.com/fraser-hemp/gradify/blob/master/gradify.p...
- CodeWriter23 11y agoGreat 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();
- the8472 11y agothat property is non-standard. Many viewers don't respect it. So calling it a bug is a bit much in my opinion. More of an RFE.
- franciscop 11y agoI 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.
- mmahemoff 11y agoNice 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.
- maggit 11y agoIs the author of this around? There's a rather prominent spelling mistake in the first sentence; it says "prominant" where it should say "prominent" :)
- dssddsds 11y agocheers for the heads up, spelling ain't my forte!
- brownbat 11y agoI was just excited when I heard Paint will build a gradient if you shrink a two-tone image to a pixel width and re-expand: http://www.instructables.com/id/Gradients-in-MIcrosoft-Paint/ http://www.instructables.com/id/Gradients-in-MIcrosoft-Paint...
- the8472 11y ago> the 4 most common colors maybe it would be better to weight pixels by the energy density of the image region so that backgrounds (sky, walls) don't dominate the resultant colors over the (usually more significant) foreground/detailed objects
- dssddsds 11y agoI have a few todo improvements, but if you'd like to see this one tested/implemented, add as an issue on the github!
- Keyframe 11y agoYou could blur the image as well. I have tried a similar approach with blur quite awhile ago: http://www.cssdesk.com/VYN67 http://www.cssdesk.com/VYN67 Change the image URI to see it work on another image.
- coob 11y agoThe point with this method is that the gradient acts as a fill before the image is loaded.
- ohitsdom 11y agoBiggest site that uses this technique is pinterest. It's a pretty crucial UI "trick", especially over slow internet connections. A user's pinterest home page is mostly images, and if they didn't use this dominant color trick, the page would look awful until things loaded.