Linear Gradient usando LESS
Para criar backgrounds com gradiente linear usando apenas duas interrupções, você pode escrever o seguinte mixin:
.linearGradient(@angle, @from, @to) {
background-image: -webkit-linear-gradient(@angle, @from, @to);
background-image: -moz-linear-gradient(@angle, @from, @to);
background-image: -ms-linear-gradient(@angle, @from, @to);
background-image: -o-linear-gradient(@angle, @from, @to);
background-image: linear-gradient(@angle, @from, @to);
}
Para montar suas regras CSS, utilize:
.gradient1 {
.linearGradient(top, #fff, #000);
}
.gradient2 {
.linearGradient(45deg, #fff, #000);
}
Agora, se você pretende criar backgrounds com gradiente linear que utilizam múltiplas interrupções (2 ou mais), o seu mixin deve ser:
.linearGradient(@angle, @colorStops) {
background-image: -webkit-linear-gradient(@angle, @colorStops);
background-image: -moz-linear-gradient(@angle, @colorStops);
background-image: -ms-linear-gradient(@angle, @colorStops);
background-image: -o-linear-gradient(@angle, @colorStops);
background-image: linear-gradient(@angle, @colorStops);
}
Suas regras CSS ficarão assim:
.gradient1 {
.linearGradient(top, ~"#fff, #ff0 25%, #f00 50%, #000 75%");
}
.gradient2 {
.linearGradient(45deg, ~"#fff 100px, #ff0 200px, #000");
}
Neste segundo caso, você pode utilizar quantas interrupções (stop colors) for necessário para montar seu background gradiente.
Written by Cleiton Francisco
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Less
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#