CODEWITHSUNDEEP
cssless
soully
soully

Reputation: 13

Making multiple gradients using Less CSS

This is the first project I've used Less on, I want to make a series of buttons that have the same general structure but have different gradiated colours applied to them.

I have my default button style:

.button-regular (@origin: top, @start: #d2d2d2, @middle: #7a7a7a, @stop: #4d4d4d, @fallback: #3f4c6b, @border: #3c3c3c;) {
  border-radius: 3px; color: @white; font-size: 13px; line-height: 18px; height: 36px; font-weight: normal; padding: 8px 15px 8px 15px; text-align: center;
  background: @fallback;
  background: -moz-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start), color-stop(6%, @middle), color-stop(100%, @stop));
  background: -webkit-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -o-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -ms-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: linear-gradient(to bottom, @start 0%, @middle 6%, @stop 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@middle', endColorstr='@stop', GradientType=0);
  border: 1px solid @border;
}

I want to overwrite the colours for each new instance of the button using something like the below:

input.lightBlue {
  .button-regular(top, #bfeef8, #40cdeb, #00bce4, #3f4c6b, #00b0d5;);
}

But when I create a button:

<input class="lightBlue" type="submit" value="Search">

The original (grey) colours still show. Is there a reason why the colours aren't overwritten using my new colours in this new button instance, and is there a better way to acheive what I'm attempting?

I'm using less.js to compile in-browser if that makes any difference.

Upvotes: 1

Views: 1241

Answers (2)

Martin Turjak
Martin Turjak

Reputation: 21234

What you have there should work alright, you just need to

fix a typo:

  • there is a semicolon (;) (after the last color) too much in your class definition

    input.lightBlue {
  .button-regular (top, #bfeef8, #40cdeb, #00bce4, #3f4c6b, #00b0d5);
}

  • you call for a variable @white in the mixin, where you just need to make sure you define it beforehand, or else just write white instead.

some additional suggestions:

(I used some random settings for illustration). You could do something like this

<input class="button default" type="submit" value="Search">
<input class="button green" type="submit" value="Search">
<input class="button red" type="submit" value="Search">

where you have a button class to define the general button appearance. Dunno, maybe something like this:

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:active {
    position: relative;
    top: 1px;
}

and in LESS you make some mixins for the color gradients. Something like this:

.gradient-mixin (@origin, @start, @middle, @stop, @fallback, @border) {
  background: @fallback;
  background: -moz-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start), color-stop(6%, @middle), color-stop(100%, @stop));
  background: -webkit-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -o-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -ms-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: linear-gradient(to bottom, @start 0%, @middle 6%, @stop 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@middle', endColorstr='@stop', GradientType=0);
  border: 1px solid @border;
}

.button-make (@name:"default", @origin: top, @start: #d2d2d2, @middle: #7a7a7a, @stop: #4d4d4d, @fallback: #3f4c6b, @border: #3c3c3c;) {
  @classname: ~"@{name}";
  .@{classname} {
    .gradient-mixin (@origin, @start, @middle, @stop, @fallback, @border);
    &:hover {
    .gradient-mixin(@origin, lighten(@start,10%), lighten(@middle,10%), lighten(@stop,10%), lighten(@fallback,10%), @border);
    }
    &:active {
    .gradient-mixin (@origin, darken(@start,10%), darken(@middle,10%), darken(@stop,10%), darken(@fallback,10%), @border);
    }
  }
}

and then you call them for each color ... which will build your classes for each color for the buttons:

.button-make;
.button-make ("green", top, #7db72f, #87d918, #4e7d0e, #7db72f, #538312);
.button-make ("red", top, #ed1c24, #e93a3f, #aa1317, #ed1c24, #980c10);

here is a jsfiddle example of the output.

But instead of defining all colors in the gradient by hand you can also make a more general mixin in LESS, that takes one color and transforms it to colors you use for @stop,@start,@border,... by using lighten, darken and other color operations.

Upvotes: 6

Max
Max

Reputation: 165

What I understand about this is that you want to overwrite your CSS with these buttons. All you have to do is create divs for your buttons or whatever else you are trying to do. I'll show an example here:

HTML

<input class="lightblue" type="submit" value="Search" style="/*style goes here*/">

CSS:

.lightblue {
border-radius: 3px; color: @white; font-size: 13px; line-height: 18px; height: 36px; font-weight: normal; padding: 8px 15px 8px 15px; text-align: center;
  background: @fallback;
  background: -moz-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start), color-stop(6%, @middle), color-stop(100%, @stop));
  background: -webkit-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -o-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -ms-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: linear-gradient(to bottom, @start 0%, @middle 6%, @stop 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@middle', endColorstr='@stop', GradientType=0);
  border: 1px solid @border;
}

So the point that I'm trying to make is that you just need a style for buttons. If you want to override this, then put the style in the HTML where I've shown. Hope this helps you out.

Upvotes: 2

Related Questions