These schemes remind me of Amy Gooch's 1998 SIGGRAPH paper:
"Phong-shaded 3D imagery does not provide geometric information of the same richness as human-drawn technical illustrations. A non-photorealistic lighting model is presented that attempts to narrow this gap. The model is based on practice in traditional technical illustration, where the lighting model uses both luminance and changes in hue to indicate surface orientation, reserving extreme lights and darks for edge lines and highlights. The lighting model allows shading to occur only in mid-tones so that edge lines and highlights remain visually prominent. In addition, we show how this lighting model is modified when portraying models of metal objects. These illustration methods give a clearer picture of shape, structure, and material composition than traditional computer graphics methods."
These look great! I'm sure I'll use at least one of them in the future.
My one gripe is the copy button. It just says "CSS3 Code Copied". I have no idea if I copied some CSS lines or just the values for a background-color or a script that downloads malware.
FWIW, I don't find these gradients especially pleasing. (They're fine, but I find some of them a bit much). I don't know why I would be different, but there it is.
Just throwing a hypothesis out there--I'm not a Mac nor IOS guy, and if those that find them especially pleasing by-and-large are then maybe that's the link. Again, that's just wild speculation without any data to back it up.
Then again, some of these style gradients are used in Ubuntu graphics too (and I again find their presence there a bit much,) so maybe there is a bigger shift towards them.
In any event, I'm guessing it is cultural and not hardwired by monkey-grandpa genes.
My breath was not taken away either. The first couple were fine--in the sense that they were not offensive--but after scrolling down a little bit I started to find the pairings a bit repulsive. I am also not an mac/ios person but I don't know why that is relevant to aesthetic preferences.
> I am also not an mac/ios person but I don't know why that is relevant to aesthetic preferences.
You get used to what you're exposed to. What looks hip and cool in graphic design from the 70s doesn't so pleasing today.
I don't know if MacOS or IOS uses such gradients, but I believe Apple Music at least does (do a Google image search for Apple Music), so it is mostly a hunch on my part.
I'd guess any gradient is a soothing thing to look at contrasted with sharp edges, which would signify danger or at least potential of physical damage. And they're very natural colors, as are found in sunsets, plants, vistas of the forest - all non-threatening and putting the mind at ease.
I just took a look at how this demo was implemented. The first swatch has a hardcoded inline CSS style for the gradient, and all the rest are filled in by some JavaScript on page load, based on the HTML tags that annotate each swatch.
I'm curious for a couple of reasons. Why hardcode the first CSS style, and generate the rest? If you're going to the effort of dynamically generating the CSS styles, why not have the actual dataset stored in JSON or another easily ingestible format, rather than in cumbersome HTML tags?
"Phong-shaded 3D imagery does not provide geometric information of the same richness as human-drawn technical illustrations. A non-photorealistic lighting model is presented that attempts to narrow this gap. The model is based on practice in traditional technical illustration, where the lighting model uses both luminance and changes in hue to indicate surface orientation, reserving extreme lights and darks for edge lines and highlights. The lighting model allows shading to occur only in mid-tones so that edge lines and highlights remain visually prominent. In addition, we show how this lighting model is modified when portraying models of metal objects. These illustration methods give a clearer picture of shape, structure, and material composition than traditional computer graphics methods."
http://www.cs.northwestern.edu/~ago820/SIG98/abstract.html
http://www.cs.northwestern.edu/~ago820/SIG98/gooch98.pdf