CSS3 Please Less Mixins

CSS3 Mixins to speed up workflow and avoid vendor prefixes.

Example Usage

.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);
}