.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
text-shadow: @string;
}
.box-shadow (@string) {
-webkit-box-shadow: @string;
-moz-box-shadow: @string;
box-shadow: @string;
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
-webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
-moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
-webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
-moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.box-sizing (@type: border-box) {
-webkit-box-sizing: @type;
-moz-box-sizing: @type;
box-sizing: @type;
}
.border-radius (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
-webkit-border-top-right-radius: @topright;
-webkit-border-bottom-right-radius: @bottomright;
-webkit-border-bottom-left-radius: @bottomleft;
-webkit-border-top-left-radius: @topleft;
-moz-border-radius-topright: @topright;
-moz-border-radius-bottomright: @bottomright;
-moz-border-radius-bottomleft: @bottomleft;
-moz-border-radius-topleft: @topleft;
border-top-right-radius: @topright;
border-bottom-right-radius: @bottomright;
border-bottom-left-radius: @bottomleft;
border-top-left-radius: @topleft;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.opacity (@opacity: 0.5) {
-webkit-opacity: @opacity;
-moz-opacity: @opacity;
opacity: @opacity;
}
.gradient (@startColor: #eee, @endColor: white) {
background-color: @startColor;
background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
background: -webkit-linear-gradient(top, @startColor, @endColor);
background: -moz-linear-gradient(top, @startColor, @endColor);
background: -ms-linear-gradient(top, @startColor, @endColor);
background: -o-linear-gradient(top, @startColor, @endColor);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
background-color: @startColor;
background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
background-image: -webkit-linear-gradient(left, @startColor, @endColor);
background-image: -moz-linear-gradient(left, @startColor, @endColor);
background-image: -ms-linear-gradient(left, @startColor, @endColor);
background-image: -o-linear-gradient(left, @startColor, @endColor);
}
.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
-webkit-animation: @name @duration @delay @ease;
-moz-animation: @name @duration @delay @ease;
-ms-animation: @name @duration @delay @ease;
}
.transition (@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
}
.transform(@string){
-webkit-transform: @string;
-moz-transform: @string;
-ms-transform: @string;
-o-transform: @string;
}
.scale (@factor) {
-webkit-transform: scale(@factor);
-moz-transform: scale(@factor);
-ms-transform: scale(@factor);
-o-transform: scale(@factor);
}
.rotate (@deg) {
-webkit-transform: rotate(@deg);
-moz-transform: rotate(@deg);
-ms-transform: rotate(@deg);
-o-transform: rotate(@deg);
}
.skew (@deg, @deg2) {
-webkit-transform: skew(@deg, @deg2);
-moz-transform: skew(@deg, @deg2);
-ms-transform: skew(@deg, @deg2);
-o-transform: skew(@deg, @deg2);
}
.translate (@x, @y:0) {
-webkit-transform: translate(@x, @y);
-moz-transform: translate(@x, @y);
-ms-transform: translate(@x, @y);
-o-transform: translate(@x, @y);
}
.translate3d (@x, @y: 0, @z: 0) {
-webkit-transform: translate3d(@x, @y, @z);
-moz-transform: translate3d(@x, @y, @z);
-ms-transform: translate3d(@x, @y, @z);
-o-transform: translate3d(@x, @y, @z);
}
.perspective (@value: 1000) {
-webkit-perspective: @value;
-moz-perspective: @value;
-ms-perspective: @value;
perspective: @value;
}
.transform-origin (@x:center, @y:center) {
-webkit-transform-origin: @x @y;
-moz-transform-origin: @x @y;
-ms-transform-origin: @x @y;
-o-transform-origin: @x @y;
}Useful CSS3 Less Mixins
Chris Coyier
on
Beautiful. And completely useful, thanks!
In conjunction with my LESS DSS it will become a very good set of ‘less mixins’ :-)
Good work!
This is great. I maintain a LESS mixin library myself with a css3 library, but didn’t include text-shadow as I felt it was only one line anyway and wouldn’t benefit from having a mixin. But I guess by including it you were able to have a text-shadow with default values. Was this your rationale?
I know this is like 5 years later lol, but probably the fact that he has a default value for it.
Some thoughts for compatibility between gradients (including transparency) and IE6-8:
Using an adapted mixin in conjunction with using Paul Irish’s infamous class based IE selectors (so that .ie6, .ie7, .ie8 classes are applied to either the HTML or body elements) you could hack in support without too much effort.
I suppose you could also use conditional stylesheets, though that’d be a lot longer way round the circle and something I haven’t done in a long while.
The RGBa to HEX function built into LESSPHP ensures that when you pass a RGBa value to the variable argument it is correctly converted for the proprietary MS CSS filter (using alpha hex, #AARRGGBB).
I've got to test the code yet, but it's an idea. Any thoughts?
That would be awesome. However, far as I can tell, LESS doesn’t allow for multiple selectors in mixin names.
Yeah a simple thought that could be done using nesting and ampersands, so:
I haven’t tested this either :O
Aww the preview didn’t match the result, take two:
You can add “,GradientType=0” after youe ieEndColor for vertical gradient, and “,GradientType=1” for horizontal gradient.
I have 2 versions for this: .gradient-v and .gradient-h
Not sure if you guys have heard of it but there’s a great pack of mixins an such that the twitter bootstrap was built off of.
these would look muuuuuuch nicer as stylus :)
Thanks for sharing. Nice set of Mixins.
I’m wondering about the opacity mixin: What’s the reason for using vendor prefixes. They seem to be unnecessary. See http://caniuse.com/#search=opacity
I use the following opacity mixin in my base.less file:
Great LESS compiler for Windows and Linux for free :
http://wearekiss.com/simpless
No need .border-radiuses().
If you need to call custom border radius, just call..
:)
It appears you need commas in that, but thanks, that was much simpler.
.border-radius(0, 0, 4px, 4px);
Its great to have the box-sizing mixin. Other sets I’ve seen havent included it.
Going to town resetting a less file for my genesis theme. Thanks for making me feel SMARTER today…
It’s radii not radiuses, haha
LESS Elements is a set of useful mixins for the LESS http://lesselements.com/
On GitHub https://github.com/dmitryf/elements
TextMate Bundle https://github.com/juanghurtado/less-elements.tmbundle
Out of all the mixin sets i checked out today, this one is by far the best one. It’s not overly cluttered with things i will never (ever!) use, it contains just about everything i’ll need and it’s very nicely done. Thanks for the link!
LESS !! please give me less css code of a web page, to my email. i am begaineer. it will be help full to me.
for the lazy ;)
.gradientAuto (@color: #000, @coef: 5%){ background: lighten(@color, @coef); /* Old browsers */ background: -moz-linear-gradient(top, lighten(@color, @coef) 0%, darken(@color, @coef) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,lighten(@color, @coef)), color-stop(100%,darken(@color, @coef))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* IE10+ */ background: linear-gradient(to bottom, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(@color, @coef)', endColorstr='darken(@color, @coef)',GradientType=0 ); /* IE6-9 */ }I’m having problem when creating an mixing for box-shadow. My one is the same of yours, so I presume you passed by the same problem.
When using multiple box-shadows (comma separated) in one element (like ‘2px 2px 3px 4px #000, inset -2px 1px 1px 0 #000’). LessCSS don’t compile and gives an error.
There is a way to go around this? I mean, to treat the value as a string or something else.
Thanks!!
The comma separates the variables
use this ;)
.box-shadow-double (@string, @string2) { -webkit-box-shadow: @string, @string2; -moz-box-shadow: @string, @string2; box-shadow: @string, @string2; }Is there a way to write multiple transition with the .transition() mixin?
I’m trying to find how to make a mixin with undefined number of arguments and put all inside the rules with @arguments special variable.
<
p>I’ve just find how!
From LESS version 1.3.1 they’ll introduce a new special variable @arguments-list that will take arguments as a raw string. Here’s the usage:
.transition(...) {
-moz-transition: @arguments-list;
-webkit-transition: @arguments-list;
-o-transition: @arguments-list;
-ms-transition: @arguments-list;
transition: @arguments-list;
}
The ‘…’ means “don’t know how much arguments you’ll pass to my mixin, take ’em all” ;)
background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
background: -webkit-linear-gradient(top, @startColor, @endColor);
Of the two, the second one is the one Webkit now recognizes (as well as Firefox and the Spec) correct? If so, which browsers only support the former version?
An excellent replacement for box-shadow LESS mixin
by http://www.toekneestuck.com/blog/2012/05/15/less-css-arguments-variable
It can easily replace those three ;-)
Here is a working example of using LESS mixins with Bootstrap : bit.ly/VzonQH
Firefox doesn’t like
0for delay value. You have to add units:0sBug 662171
So you should update to
.animation (@name, @duration: 300ms, @delay: 0s, @ease: ease) {Made a quick one for User Select.
.user-select (@val) { -webkit-touch-callout: @val; -webkit-user-select: @val; -khtml-user-select: @val; -moz-user-select: @val; -ms-user-select: @val; user-select: @val; }Thanks, i’m using in my projects ;)
Great article! Very useful!
Thanks and God bless always!
Just wanted to let you know that you forgot to add the following for your gradients:
background-image: linear-gradient(top, @startColor, @endColor);Don’t forget linear-gradient without the prefixes :)
What can I do in case when I want to use to different mixins in one selector, sth like this:
.example { .transition .opacity(.8) }?
Another cool less function is mixin overloading. Basically a different implementation of a mixin depending on how many parameters are passed in. Link to stackoverflow Your text to link here…
Sorry link here http://stackoverflow.com/questions/15250115/call-the-correct-overloaded-mixin-based-on-number-of-arguments
Thanks, Chris, I would also add the unprefixed properties :)
I find this one useful as well.
How do you create multi transition’s so that the out put is something like this?
I have something like this,
There should be a better way to write it I am just not sure how.
You can checkout my mixin librabry: more-or-less
The mixin looks really simple yet requires three other mixins to work (
.vendorize(),.for()and.in()).The entire library is built on my
.vendorize()mixin which makes the library very strong and easy to maintain.vendorize mixin
in-mixin
for-mixin
The good thing is that all values are checked and vendorized if needed. This allows to use the mixin for transitions on the e.g.
transformorbox-shadowproperties.The needed vendor-prefixes are defined in this variable
@vendorPrefixes: -webkit-, -moz-, -o-, '';mixin
Input
output
New BIG mixin library available. It is ‘almost’ as strong as ‘lesshat’ …but… WITHOUT inline-javascript.
Find it here: more-or-less
It is fully modular and allows to import mixins similar to ‘compass’
Basic CSS3 mixin example
Usage
The
.vendorizemixin is able to prefix properties or values (e.g. for transitions)The library even allows mixins like this one… (allows endless number of layers)
All values are prefixed if needed.
wrote this for transform what do you think?
$empty: ”;
@function notEmpty($val) {
@if($val != $empty) {
@return true;
} @else {
@return false;
}
}
@mixin transform($type:”,$val1:”,$val2:”,$val3:”,$val4:”,$val5:”,$val6:”) {
@if notEmpty($val2) { $val2: “,” + $val2; }
@if notEmpty($val3) { $val2: “,” + $val2; }
@if notEmpty($val3) { $val3: “,” + $val3; }
@if notEmpty($val3) { $val4: “,” + $val4; }
@if notEmpty($val3) { $val5: “,” + $val5; }
@if notEmpty($val3) { $val6: “,” + $val6; }
-webkit-transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
-moz-transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
-ms-transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
-o-transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
}
suppose I have my own jumbotron override:
.jumbotron {
background-color: #ff4400;
}
and then I want to have a custom override of that where I inherit the above class and only override its background color using its color a sa parameter to “lighten()”. I can’t figure out the syntax:
.Myjumbotron {
.jumbotron;
/* not sure what goes below for “parent.background-color” */
background-color: lighten(parent.background-color, 30%);
}
Thanks!
Scale should be this for X and Y support. This is backwards compatible, because of @ratio_y:@ratio_x.
You know, there’s an extensive less library called anchorLESS,
it’s almost like jquery but for css. And all that you need is a single less file!
You can find it here: invader365.github.io/anchorLESS
Source at: Github
enjoy ;)
Bravo! Bravo!
Here is LESS mixin for linear gradient I usually use:
Wow! Thanks for the nice stuff ! let me copy for my css-library
Excellent collection !!
Keep on adding more like this in here
less for css sprites is missing :(
But how to implement color shade in .drop-shadow mixin when calling? I can only change the opacity… :(