On 17 Mar 2017, at 15:04, John Beales wrote:
@Eric: That's exactly it. I was also able to turn up the similar part
of your Colors, Backgrounds, & Gradients book from 2015, (maybe it's a
pre-release section of your upcoming book?).
As a matter of fact, it is!
Do you remember if there's a formula for figuring out the color stops
to use in the gradients, or is sampling a photo of a curtain the best
way? I'd like to be able to change the color of the curtain easily in
a Sass mixin.
I don't know if there is, to be honest. The colors I used were
intentionally chosen to mimic the colors in the original Cicada
Principle example
(<https://www.sitepoint.com/examples/primes/index2.xhtml>), so I was
just working off an existing thing.
I haven't tried this myself, but my feeling is that you could define
highlight and shadow gradients using rgba() or hsla(), whichever you
prefer, and then put a solid background color beneath them, which is the
thing you change. So, something similar to this:
background-image: linear-gradient(91deg, transparent, rgba(0,0,0,0.25)
70%, transparent),
linear-gradient(88deg, rgba(255,255,255,0.1), transparent 90%,
rgba(255,255,255,0.05);}
background-color: maroon;
background-size: 15px 100%, 23px 100%;
background-repeat: repeat-x;
...except with three or four gradients, and almost certainly
better-constructed gradients than those, which I basically just made up
on the spot and didn't check to see how they looked.
I believe gradients can be animated, but working out how to do that
in a semi-convincing manner would be a challenge. I'd love to see what
you come up with!
--
Eric A. Meyer - http://meyerweb.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
