That's clean. I know you don't have to use background-image: , you can use background: too for linear-gradient:. Was there a preference to using background-image? Was it for the repeat-x property?
Very nice Eric. Thanks for sharing! Best, Karl DeSaulniers Design Drumm http://designdrumm.com > On Mar 17, 2017, at 9:00 PM, Eric A. Meyer <e...@meyerweb.com> wrote: > > 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/ ______________________________________________________________________ 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/
