Quantcast

An Example of Gradients for a Curtain

classic Classic list List threaded Threaded
14 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

An Example of Gradients for a Curtain

John Beales
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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: An Example of Gradients for a Curtain

Rod Castello-2
John,
This might be of some help. http://www.cssmatic.com/
There's a gradient generator tool that might make your life a bit simpler.
Rod Castello

On Fri, Mar 17, 2017 at 10:16 AM, John Beales <[hidden email]> wrote:

> 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 [[hidden email]]
> 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/




--
Rod Castello
DIGITAL DESIGN AND DEVELOPMENT
818.437.7880
[hidden email]
www.smashcube.com
______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: An Example of Gradients for a Curtain

Rainer Berthold
@Rod, Great tool - and their noise generator is awesome - thx!

@John, maybe this list is helpful:
https://www.awwwards.com/the-best-css3-tools-experiments-and-demos-for-web-developers.html

Personally I like this one:
http://www.css3maker.com/css-gradient.html

Sorry, no moving curtains, not my thing.

Rainer


Am 17.03.2017 um 18:23 schrieb Rod Castello <[hidden email]>:

John,
This might be of some help. http://www.cssmatic.com/
There's a gradient generator tool that might make your life a bit simpler.
Rod Castello

On Fri, Mar 17, 2017 at 10:16 AM, John Beales <[hidden email]> wrote:

> 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 [[hidden email]]
> 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/




--
Rod Castello
DIGITAL DESIGN AND DEVELOPMENT
818.437.7880
[hidden email]
www.smashcube.com
______________________________________________________________________
css-discuss [[hidden email]]
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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: An Example of Gradients for a Curtain

Rainer Berthold
In reply to this post by John Beales
John, try this one:

http://codepen.io/TimLamber/pen/jEmEaP
(codepen: „curtain“)

Rainer


Am 17.03.2017 um 18:16 schrieb John Beales <[hidden email]>:

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 [[hidden email]]
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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: An Example of Gradients for a Curtain

Eric A. Meyer
In reply to this post by John Beales


Sent from my iPhone

> On Mar 17, 2017, at 13:16, John Beales <[hidden email]> wrote:
>
> 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.

You might be thinking of http://meyerweb.com/eric/css/tests/circadients.html (almost five years old now!).

______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: An Example of Gradients for a Curtain

Eric A. Meyer
In reply to this post by John Beales

> On Mar 17, 2017, at 13:16, John Beales <[hidden email]> wrote:
>
> 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.

You might be thinking of http://meyerweb.com/eric/css/tests/circadients.html (almost five years old now!).

______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: An Example of Gradients for a Curtain

John Beales
In reply to this post by Eric A. Meyer
@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!

On Fri, Mar 17, 2017 at 2:47 PM, Eric A. Meyer <[hidden email]> wrote:

>
>
> Sent from my iPhone
>
> On Mar 17, 2017, at 13:16, John Beales <[hidden email]> wrote:
>
> 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.
>
>
> You might be thinking of http://meyerweb.com/eric/css/tests/circadients.html
> (almost five years old now!).
>
______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: An Example of Gradients for a Curtain

Eric A. Meyer
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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: An Example of Gradients for a Curtain

Rainer Berthold
In reply to this post by John Beales
@John: If you like, I woud love to see your turn.

Best, Rainer


Am 17.03.2017 um 20:04 schrieb John Beales <[hidden email]>:

@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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: An Example of Gradients for a Curtain

Karl DeSaulniers
In reply to this post by Eric A. Meyer
That's cool.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Mar 17, 2017, at 1:48 PM, Eric A. Meyer <[hidden email]> wrote:
>
>
>> On Mar 17, 2017, at 13:16, John Beales <[hidden email]> wrote:
>>
>> 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.
>
> You might be thinking of http://meyerweb.com/eric/css/tests/circadients.html (almost five years old now!).
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: An Example of Gradients for a Curtain

Crest Christopher
In reply to this post by Eric A. Meyer
Eric, the curtain was all CSS ?

If so how did you create the taper effect on the curtains ?

> Eric A. Meyer <mailto:[hidden email]>
> 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 [[hidden email]]
> 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:[hidden email]>
> 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 [[hidden email]]
> 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:[hidden email]>
> 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 [[hidden email]]
> 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:[hidden email]>
> 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 [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: An Example of Gradients for a Curtain

Eric A. Meyer
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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: An Example of Gradients for a Curtain

Karl DeSaulniers
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 <[hidden email]> 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 [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: An Example of Gradients for a Curtain

Eric A. Meyer
On 17 Mar 2017, at 22:07, Karl DeSaulniers wrote:

> 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?

    At the time, the value syntax for 'background' that rolls up all the
background sizing and positioning and so on was either not well
supported, or I hadn't wrapped my brain around it.  (Still not entirely
sure I have.)  Or maybe I thought breaking each bit out into a separate
property would make it slightly easier to follow, for anyone viewing
source.  My memory of things from that far back is regrettably
splintered.


--
Eric A. Meyer - http://meyerweb.com/
______________________________________________________________________
css-discuss [[hidden email]]
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/
Loading...