On 17 Mar 2017, at 21:33, Crest Christopher wrote:
Eric, the curtain was all CSS ?
Mine was, yes. The original, the one I was imitating, used PNGs.
If so how did you create the taper effect on the curtains ?
Not sure exactly what you mean by a "taper effect", but here's the
CSS:
background-image:
linear-gradient(
0deg,
rgba(255,128,128,0.25),
rgba(255,128,128,0) 75%
),
linear-gradient(
89deg,
transparent,
transparent 30%,
#510A0E 35%,
#510A0E 40%,
#61100F 43%,
#B93F3A 50%,
#4B0408 55%,
#6A0F18 60%,
#651015 65%,
#510A0E 70%,
#510A0E 75%,
rgba(255,128,128,0) 80%,
transparent
),
linear-gradient(
92deg,
#510A0E,
#510A0E 20%,
#61100F 25%,
#B93F3A 40%,
#4B0408 50%,
#6A0F18 70%,
#651015 80%,
#510A0E 90%,
#510A0E
)
;
background-size:
auto,
300px 100%,
109px 100%;
background-repeat: repeat-x;
So it's three sized background images (gradients being images) at
slightly different angles. I seem to recall fiddling with angles until
I got ones I liked.
These days, I would probably use 'repeating-linear-gradient()'
instead of using 'background-size' and 'background-repeat' to pattern
normal linear gradients, since that would remove any concerns about
weird seams at the repetition points. And now that I think about it, it
would be relatively straightforward to drop a grayscale filter on the
above CSS, sample the resulting grayscale values, and build the
light/dark-on-a-background-color example I described earlier in the
thread. You know, if I didn't feel like trying to calculate the light
values of those colors. Hmmm...
--
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/
