Basic gradients

[nicooprat]

Feature request !

Because I was only using very basic CSS gradients in most of my designs, I wrote some shorthand for vertical, horizontal and radial 2 steps gradients. Here's what I use for now :

.gradient-vertical( @start_color , @end_color ) {
    background-image: linear-gradient( center bottom, @end_color 0%, @start_color 100% );
    background-image: -ms-linear-gradient( center bottom, @end_color 0%, @start_color 100% );
    background-image: -moz-linear-gradient( center bottom, @end_color 0%, @start_color 100% );
    background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from( @start_color ), to( @end_color ) );
    background-image: -o-linear-gradient( center bottom, @end_color 0%, @start_color 100% );
}

.gradient-horizontal( @start_color , @end_color ) {
    background-image: linear-gradient( left center, @end_color 0%, @start_color 100% );
    background-image: -ms-linear-gradient( left center, @end_color 0%, @start_color 100% );
    background-image: -moz-linear-gradient( left center, @end_color 0%, @start_color 100% );
    background-image: -webkit-gradient( linear, 0% 0%, 100% 0%, from( @start_color ), to( @end_color ) );
    background-image: -o-linear-gradient( left center, @end_color 0%, @start_color 100% );
}

.gradient-radial( @start_color , @end_color ) {
    background-image: -webkit-radial-gradient(50% 50%, ellipse cover, @start_color, @end_color 100%);
    background-image: -moz-radial-gradient(50% 50%, ellipse cover, @start_color, @end_color 100%);
    background-image: -o-radial-gradient(50% 50%, ellipse cover, @start_color, @end_color 100%);
    background-image: -ms-radial-gradient(50% 50%, ellipse cover, @start_color, @end_color 100%);
    background-image: radial-gradient(50% 50%, ellipse cover, @start_color, @end_color 100%);
}

I know there's already a .background-image() mixin, but those ones are much easier to write and remember. What do you think ?

[librajt]

Aha! I wrote a new less file like this:

#gradient {
  .horizontal(@startColor: #555, @endColor: #333) {
    .gradient(linear-gradient(left, @startColor, @endColor));
  }
  .vertical(@startColor: #555, @endColor: #333) {
    .gradient(linear-gradient(top, @startColor, @endColor));
  }
  .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
    .gradient(linear-gradient(@deg, @startColor, @endColor));
  }
  .radial(@innerColor: #555, @outerColor: #333)  {
    .gradient(radial-gradient(circle, @innerColor, @outerColor));
  }
}

the namespace came from Bootstrap

[nicooprat]

It looks better indeed !

I'm not a huge fan of the namespace thing, I think it's harder to write and doesn't add real value... but it's ok.

The actual thing that was annoying me in Bootstrap is that their mixin was outputting background property instead of simply background-image, which was sometimes overriding other properties like background-color.

I was just wondering where does the .gradient() mixin come from ? I thought it was .background-image().

Thanks.