Fork me on GitHub

CSS3 LESS Please!

LESS, please!

This element will receive instant changes as you run the CSS rules on the left. Enjoy!

Border radius run

.box-round (@radius: 12px) {
    -webkit-border-radius: @radius;
    border-radius: @radius;
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

.box {
    .box-round(24px);
}

                

Box shadow run

.box-shadow (@shadow: 1px 1px 2px rgba(0,0,0,0.25)) {
    -webkit-box-shadow: @shadow;
    box-shadow: @shadow;
}

.box {
    .box-shadow(4px 4px 8px rgba(0,0,0,0.25));
}

                

Box gradient run

.box-gradient (@from: #444444, @to: #999999) {
    background-color: @from;
    background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
    background-image: -webkit-linear-gradient(top, @from, @to);
    background-image:    -moz-linear-gradient(top, @from, @to);
    background-image:      -o-linear-gradient(top, @from, @to);
    background-image:         linear-gradient(top bottom, @from, @to);
}

.box {
    .box-gradient(#ff0000, #0000ff);
}

                

Box rgba run

.box-rgba (@r: 0, @g: 0, @b: 0, @opacity: 0.5) {
    background-color: transparent;
    background-color: rgba(@r, @g, @b, @opacity); 
}

.box {
    .box-rgba(180, 180, 144, 0.6);
}

                

Box rotate run

.box-rotate (@rotation: 90deg) {
    -webkit-transform: rotate(@rotation);
    -moz-transform: rotate(@rotation);
    -ms-transform: rotate(@rotation);
    -o-transform: rotate(@rotation);
    transform: rotate(@rotation);
}

.box {
    .box-rotate(7.5deg);
}

                

Box scale run

.box-scale (@scale: 2) {
    -webkit-transform: scale(@scale); 
    -moz-transform: scale(@scale); 
    -ms-transform: scale(@scale); 
    -o-transform: scale(@scale); 
    transform: scale(@scale);
}

.box {
    .box-scale(0.8);
}

                

Box 3d transforms run

.box-3dtransforms (@perspective: 300, @rotateY: 180deg) {
    -webkit-perspective: @perspective; 
    -moz-perspective: @perspective; 
    -ms-perspective: @perspective; 
    perspective: @perspective;
    -webkit-transform: rotateY(@rotateY);  -webkit-transform-style: preserve-3d;
    -moz-transform: rotateY(@rotateY);     -moz-transform-style: preserve-3d;
    -ms-transform: rotateY(@rotateY);      -ms-transform-style: preserve-3d;
    transform: rotateY(@rotateY);          transform-style: preserve-3d;
}

.box {
    .box-3dtransforms(300, 180deg);
}

                

Box transition run

.box-transition (@transition: all 0.3s ease-out) {
    -webkit-transition: @transition;
    -moz-transition: @transition;
    -o-transition: @transition;
    transition: @transition;
}

.box {
    .box-transition(all 0.5s ease-in);
}

                

Box textshadow run

.box-textshadow (@shadow: 1px 1px 3px #fff) {
    text-shadow: @shadow;
}

.box {
    .box-textshadow(1px 1px 3px #fff);
}

                

Box opacity run

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

.box {
    .box-opacity(0.9);
}

                

Box sizing run

.box-sizing (@box-sizing: border-box) {
    -webkit-box-sizing: @box-sizing;
    -moz-box-sizing: @box-sizing;
    box-sizing: @box-sizing;
}

.box {
    .box-sizing(border-box);
}

                

Background size run

.box-bgsize (@size: 100% 100%) {
    -webkit-background-size: @size;
    background-size: @size;
}

.box {
    .box-bgsize(50% 50%);
}

                

Box columns run

.box-columns (@count: 2, @gap: 15px) {
    -webkit-column-count: @count;
    -webkit-column-gap: @gap;
    -moz-column-count: @count;
    -moz-column-gap: @gap;
    column-count: @count;
    column-gap: @gap;
}

.box {
    .box-columns(4, 30px);
}

                

Animation run

.box-animation (@animation, @timer, @length) {
    -webkit-animation: @animation @timer @length;
    -moz-animation: @animation @timer @length;
    -o-animation: @animation @timer @length;
    animation: @animation @timer @length;
}
@-webkit-keyframes myanim {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.5; }
    100% { opacity: 1.0; }
}
@-moz-keyframes myanim {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.5; }
    100% { opacity: 1.0; }
}
@-o-keyframes myanim {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.5; }
    100% { opacity: 1.0; }
}
@keyframes myanim {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.5; }
    100% { opacity: 1.0; }
}

.box {
    .box-animation(myanim, 5s, infinite);
}

                

Font face run

.WebFont () {
    font-family: 'WebFont';
    src: url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype');
}

.box {
    .WebFont();
}

                

Tab size run

.tab-size (@tab-size) {
    -moz-tab-size: @tab-size;
    -o-tab-size: @tab-size;
    tab-size: @tab-size;
}

.box {
    .tab-size(2);
}