Live data from Hacker News

Gradify turns the most prominent colors in an image into a CSS gradient

gradifycss.com

31–37 of 37 posts

Re: Gradify turns the most prominent colors in an image into a CSS gradient

#31
post #12

Do 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…

> 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 yo…

I think it would fall under fair use. This is a demo for an open source project.

Re: Gradify turns the most prominent colors in an image into a CSS gradient

#32
post #3
post #2

Really 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.

The hostile scrolling on the page makes it effectively unusable on mobile

This is why no one downloads the band Hostile Scrolling's app.

Re: Gradify turns the most prominent colors in an image into a CSS gradient

#33

Great 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();

that 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.

Re: Gradify turns the most prominent colors in an image into a CSS gradient

#34
Biggest 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.

Re: Gradify turns the most prominent colors in an image into a CSS gradient

#35
post #29

You could blur the image as well. I have tried a similar approach with blur quite awhile ago: http://www.cssdesk.com/VYN67 Change the image URI to see it work on another image.

The point with this method is that the gradient acts as a fill before the image is loaded.

Which one could combine with blurring.

Progressive JPEG with a blur filter depending on how much has loaded yet?

That would be the best solution, probably.

Re: Gradify turns the most prominent colors in an image into a CSS gradient

#36
post #35
post #29

Earlier quoted context omitted.

The point with this method is that the gradient acts as a fill before the image is loaded.

Which one could combine with blurring. Progressive JPEG with a blur filter depending on how much has loaded yet? That would be the best solution, probably.

It's an interesting idea to put into a JPEG decoder directly.

Re: Gradify turns the most prominent colors in an image into a CSS gradient

#37
post #31

Earlier quoted context omitted.

> 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 yo…

I think it would fall under fair use. This is a demo for an open source project.

non-commercial use does not equal fair use.
Post reply on HN