Eric, the curtain was all CSS ?
If so how did you create the taper effect on the curtains ?
Eric A. Meyer <mailto:e...@meyerweb.com>
Friday, March 17, 2017 3:34 PMvia Postbox
<https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
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/
John Beales <mailto:j...@johnbeales.com>
Friday, March 17, 2017 3:04 PMvia Postbox
<https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
@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?).
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.
@Rainer: That last one is pretty great. I'm going to see if I can
combine the motion in it with the lack of extra HTML from Eric's
circadients. I'm not sure if it's possible, bit if it is, I'll figure
it out ;)
Thanks everyone!
______________________________________________________________________
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/
Eric A. Meyer <mailto:e...@meyerweb.com>
Friday, March 17, 2017 2:47 PMvia Postbox
<https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
Sent from my iPhone
You might be thinking of
http://meyerweb.com/eric/css/tests/circadients.html (almost five years
old now!).
______________________________________________________________________
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/
John Beales <mailto:j...@johnbeales.com>
Friday, March 17, 2017 1:16 PMvia Postbox
<https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
I remember seeing some demos a couple of years back of using CSS
gradients to make a curtain/drape, but my Google skills aren't turning
up anything, so I'm hoping the list's collective memory and/or
bookmarks will help.
Does anyone here have or know of any great purely CSS curtain demos,
(as in, something that looks like a curtain or drape, not the
"curtains" design pattern where stuff slides away to reveal something
else at a lower z-index)?
Thanks,
John
______________________________________________________________________
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/
______________________________________________________________________
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/
