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