While searching around Github earlier I came across Grade. Something so simple but so beautiful at the same time. This is an absolute gem. Grade is super lightweight and has no dependancies.
As you can expect, creating fluid and matching themes during web design can get a little tricky, especially when it comes to user submitted content. I can see this helping with this particular problem.
From what I can see in the read me, its not hard to use at all either.
It does also offer the use of the CDN, the following will help you implement the following example easily.
All you need to do is:
- come up with a name for the class you want to hold these gradients.
- Apply these gradients to the wrappers (Where you want the gradients to show)
This would all look something like the following
And here is this in use.
One requirement with this library however is that the images need to be hosted on the same domain due to CORS. This could be a problem with systems such as Gravatar.
It makes me wonder if something similar could be done with text and contrasting colours. This would be an interesting concept. Imagine being able to overlay text with a contrasting colour over an image without having to worry what colour it was.
I seriously suggest you go an take this one out for a spin, you never know you might be happy with the results.
Thank you for reading!