CSS3, por favor, menos mixins

CSS3 Mixins para acelerar o fluxo de trabalho e evitar prefixos de fornecedores.

Exemplo de uso

.element { .box-gradient(top, #f47a20, #faa51a); .box-shadow(0, 0, 5px, rgba(0, 0, 0, 0.8)); }

/*

G5Framework


CSS3Please.less


=======================================


Table of Contents


=======================================


00 CSS3Pie


01 Border Radius

02 Border Radius // Custom

03 Box Shadow

04 Box Columns

05 Gradient

06 Opacity

07 Scale

08 Rotate

09 Text Shadow

10 Transition

11 Transform


*/


//CSS3Pie
.pie () { behavior: url(src/PIE.htc); }

//Border Radius
.border-radius (@borderradius: 5px) {
-webkit-border-radius: @borderradius;
border
-radius: @borderradius;

-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

//Border Radius Custom
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
-webkit-border-radius: @topleft @topright @bottomright @bottomleft;
-moz-border-radius: @topleft @topright @bottomright @bottomleft;
border
-radius: @topleft @topright @bottomright @bottomleft;
}

//Box Shadow
.box-shadow (@x: 0, @y: 3px, @blur: 5px, @color: #000) {
-webkit-box-shadow: @x @y @blur @color;
-moz-box-shadow: @x @y @blur @color;
box
-shadow: @x @y @blur @color;
}

//Columns
.box-columns (@count: 2, @gap: 10px) {

-webkit-column-count: @count; -webkit-column-gap: @gap;
-moz-column-count: @count; -moz-column-gap: @gap;
column
-count: @count; column-gap: @gap;

}

//Gradient
.box-gradient (@origin: top, @start: #fff, @stop: #000) {
background
-color: @start;
background
-image: -webkit-linear-gradient(@origin, @start, @stop);
background
-image: -moz-linear-gradient(@origin, @start, @stop);
background
-image: -o-linear-gradient(@origin, @start, @stop);
background
-image: -ms-linear-gradient(@origin, @start, @stop);
background
-image: linear-gradient(@origin, @start, @stop);
}

//Opacity
.box-opacity (@opacity: 0.5) {
opacity
: @opacity;
}

//Scale
.scale (@ratio: 1.5) {
-webkit-transform: scale(@ratio);
-moz-transform: scale(@ratio);
transform
: scale(@ratio);
}

//Rotate
.box-rotate (@degrees: 5deg) {
-webkit-transform: rotate(@degrees);
-moz-transform: rotate(@degrees);
-ms-transform: rotate(@degrees);
-o-transform: rotate(@degrees);
transform
: rotate(@degrees);
}

//Text Shadow
.text-shadow (@x: 0, @y: 0, @blur: 5px, @color: #000) {
text
-shadow: @arguments;
}

//Transition
.transition (@prop: all, @time: 1s, @ease: linear) {
-webkit-transition: @prop @time @ease;
-moz-transition: @prop @time @ease;
-o-transition: @prop @time @ease;
-ms-transition: @prop @time @ease;
transition
: @prop @time @ease;
}

//Transform
.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
-webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
-moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
-o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
-ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
transform
: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}