Geek asks and answers

Flip background using CSS or LESS

Is there a way to programmatically flip the background of an element using CSS or LESS? In particular, I would like to invert the background gradient of the button. I do not want the contents of the button to be flipped - only the background.

For example, this:

.button {background-image:linear-gradient(top, #000, #fff);}

should become:

.button:active {background-image:linear-gradient(top, #fff, #000);}

----------- EDIT: Add more details. -----------

Take this LESS code:

.button {

  background-image:linear-gradient(top, red, green);

  &.primary {background-image:linear-gradient(top, blue, yellow);}
  &.secondary {background-image:linear-gradient(top, brown, grey);}

  &:active {background-image:linear-gradient(top, ..., ...);}

}

Is there a way to change the direction of the gradient without having to separately define the ": active" state for the classes .button, .primary, and.. Secondary?

+3
source share
4 answers

With newer browsers

, , , . IE10 ( IE9 ), FF21 Chrome27.

, , . , .

. - .

.button {

  background-image:linear-gradient(to bottom, red, green);
  position: relative;

  &:after {
     content: '';  
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: -1;

     &:active {
       -webkit-transform: rotate(180deg);
          -moz-transform: rotate(180deg);
           -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
               transform: rotate(180deg);
     }
  }

  &.primary {background-image:linear-gradient(to bottom, blue, yellow);}
  &.secondary {background-image:linear-gradient(to bottom, brown, grey);}

}
+2

background-image:linear-gradient(top, #fff, #000); css, , , - .class [type=''] :active :

input[type="button"] {background:#fff;}
input[type="button"]:active {background:#000}
[...]
<input type="button" value="Test"/>
0

, , LESS . , , , , , . . , , , :active . . JsFiddle.

, - , SASS (, LESS, , Ruby) , , , @each :active. , , , .

However, if you use LESS, you can take a look at LESS Elements , a useful mixins suite that includes gradient support.

0
source

More articles:


All Articles