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

2 réponses


Salut maoubi.

Réponse un peu tardive, j'en suis désolé.

Merci beaucoup pour le partage, ces fonctions sont très utiles.

Bonne continuation.

"Un peu tardive" ??
Deux ans et demi c'est "un peu tardif" ??
-__-'