You do know that bootstrap has some nice LESS mixins for doing gradients
with much less code?
#welcome .gray-fade {
height: 50px;
#gradient > .vertical(#EAEAEA, #FFF);
margin: 0 0 10px 0;
}
You probably don't need that ID selector either, .gray-fade should be
enough.
Generally bootstrap is far easier to customise using less than css.
Marcus
On Thursday, April 19, 2012 6:59:58 PM UTC+2, andrewarrow wrote:
>
> I ended up doing this:
>
> #welcome .gray-fade {
> height: 50px;
> background-image: -moz-linear-gradient(top, #EAEAEA, #FFF);
> background-image: -ms-linear-gradient(top, #EAEAEA, #FFF);
> background-image: -webkit-linear-gradient(top, #EAEAEA, #FFF);
> background-image: -o-linear-gradient(top, #EAEAEA, #FFF);
> background-image: linear-gradient(top, #EAEAEA, #FFF);
> margin: 0 0 10px 0;
> }
>
> and then to use it:
>
> <div class="row"><div class="gray-fade"></div></div>
>
> <div class="row">
> <div class="span12">
> <h2>My Header</h2>
> </div>
> </div>
>
> had to wrap everything in a welcome div so the class gray-fade would
> work. Without it bootstrap was causing the linear-gradient css
> selector to be ignored with an !important keyword after it. Trying to
> avoid using !important because I was told that's important.
>
> On Apr 19, 5:32 am, andrewarrow <[email protected]> wrote:
> > is there an easy way to make a nice gradient fill area like the navbar
> > does but not use the same navbar class?
> >
> > That is, I already have my navbar with gradient gray to grayDarker at
> > the top of the page.
> >
> > In the middle of the page I'd like another gradient from lightGray to
> > gray with height of like 200px vs. only 40px for the nav.
