Bonjour, je partage avec vous quelques fonctions que j'ai créées avec less css. j'espère qu'il pourra vous être utile :)
.border-radius (@radius: 5px) {
-webkit-border-radius:@radius;
-khtml-border-radius: @radius;
-moz-border-radius:@radius;
-o-border-radius: @radius;
-ms-border-radius:@radius;
border-radius: @radius;
}
.transition (@object : background, @time : 0.4s , @type:linear , @delay : 0s){
-webkit-transition: @object @time @type @delay;
-khtml-transition: @object @time @type @delay;
-moz-transition: @object @time @type @delay;
-o-transition: @object @time @type @delay;
-ms-transition: @object @time @type @delay;
transition: @object @time @type @delay;
}
.rotate(@degree:active 35deg,@degMatrix: 35){
-webkit-transform: rotate(@degree);
-moz-transform: rotate(@degree);
-o-transform: rotate(@degree);
-ms-transform: rotate(@degree);
transform: rotate(@degree);
// IE rotation avec Matrix
@deg2radians: 3.1416 * 2 / 360;
@rad: @degMatrix * @deg2radians;
@sintheta: `Math.sin(@{rad})`;
@costheta: `Math.cos(@{rad})`;
@M11: @costheta;
@M12: -@sintheta;
@M21: @sintheta;
@M22: @costheta;
filter: e(%("progid:DXImageTransform.Microsoft.Matrix(M11=%d, M12=%d, M21=%d, M22=%d, sizingMethod='auto expand')", @M11, @M12, @M21, @M22));
zoom: 1;
}
// permet dégradé de couleur de haut en bas
.gradient (@default : #ccc, @operaSvg: gradient, @top: #fff, @bottom: #000){
background: @default; // Other
background-image: url("@{img}/@{operaSvg}.svg");// À crée pour Opera
background-image: -o-linear-gradient(top, @top, @bottom); // Opera 11.10+
background-image: -moz-linear-gradient(top, @top, @bottom); //Firefox 3.6
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, @bottom),color-stop(1, @top)); // Safari & Chrome
background-image: -webkit-linear-gradient(@top, @bottom); // Chrome 10+, Saf5.1+
background-image: -ms-linear-gradient(@top, @bottom);
background-image: linear-gradient(top, @top, @bottom);
}
Pour le SVG de .gradient() voici le code. il faut seulement changer les couleurs
<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0%" style="stop-color: #ffe401;"/>
<stop offset="100%" style="stop-color: #f7efb8;"/>
</linearGradient>
</defs>
<rect x="0" y="0" fill="url(#gradient)" width="100%" height="100%" />
</svg>
Bonne journée