quelques fonctions Lesscss utile

Par maoubi, il y a 14 ans


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

tpedev, il y a 11 ans

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.

Vallyan, il y a 11 ans

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