LESS css fertige funktionen

[saidooo]

  
/**  
*    Definierte CSS3 Cross-Browserlösungen zum individuellen einbinden  
*    Die Funktion muss noch umgeschrieben werden, dass auch Color-Stop-Gradienten verwendet werden können  
*/  
.gradient( @startcolor, @endcolor, @degree, @percentage )  
{  
    // Alle anderen  
    background-image: ~"linear-gradient( @{degree}deg, @{startcolor}, @{endcolor} @{percentage}%)";  
  
    //    Firefox  
    background-image: ~"-moz-linear-gradient( @{degree}deg, @{startcolor}, @{endcolor} @{percentage}%)";  
  
    //    Opera  
    background-image: ~"-o-linear-gradient(@{degree}deg, @{startcolor}, @{endcolor} @{percentage}%)";  
  
    //    Webkit ältere Browser (Safari/Chrome 10)  
    background-image: ~"-webkit-gradient(@{degree}deg, @{startcolor}, @{endcolor} @{percentage}%)";  
  
    //    Webkit neuere Browser (Chrome 11+)  
    background-image: ~"-webkit-linear-gradient(@{degree}deg, @{startcolor}, @{endcolor} @{percentage}%)";  
  
    // Microsoft IE 5.5 - 7 und 9  
        //    Bei GradientType = 1  wird es horizontal  
        //    Bei GradientType = 0  wird es vertikal  
    filter: ~"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='@{startcolor}', endColorstr='@{endcolor}')";  
  
    // Microsoft IE 8 und 10  
    background-image: ~"-ms-linear-gradient(bottom, @{startcolor}), @{endcolor} @{percentage}%)";  
  
    // KDE-Browser (Linux)  
    background-image: ~"-khtml-linear-gradient(@{degree}deg, @{startcolor}, @{endcolor} @{percentage}%)";  
}  
  
.gradient_nostop(  @degree, @color1, @percentage1, @color2, @percentage2, @color3, @percentage3, @color4, @percentage4)  
{  
    // Transparenz "Farbe"  
    // rgba(255,0,0,0)  
  
    //    Firefox  
      background: ~"-moz-linear-gradient(@{degree}deg, @{color1}  @{percentage1}%, @{color2} @{percentage2}%, @{color3}  @{percentage3}%, @{color4}  @{percentage4}%)";  
  
    //    Chrome10+,Safari5.1+  
    background: ~"-webkit-linear-gradient(@{degree}deg, @{color1}  @{percentage1}%, @{color2} @{percentage2}%, @{color3}  @{percentage3}%, @{color4}  @{percentage4}%)";  
  
    //    Webkit Chrome,Safari4+  
        // degree nicht eingesetzt  
    background: ~"-webkit-gradient(linear, left top, left bottom, color-stop(@{percentage1}%,@{color1}), color-stop(@{percentage2}%,@{color2}), color-stop(@{percentage3}%,@{color3}), color-stop(@{percentage4}%,@{color4}))";  
  
    // Opera  
    background: ~"-o-linear-gradient(@{degree}deg, @{color1}  @{percentage1}%, @{color2} @{percentage2}%, @{color3}  @{percentage3}%, @{color4}  @{percentage4}%)";  
  
    //    IE10+  
    background: ~"-ms-linear-gradient(@{degree}deg, @{color1}  @{percentage1}%, @{color2} @{percentage2}%, @{color3}  @{percentage3}%, @{color4}  @{percentage4}%)";  
  
    // W3C  
    background: ~"linear-gradient(@{degree}deg, @{color1}  @{percentage1}%, @{color2} @{percentage2}%, @{color3}  @{percentage3}%, @{color4}  @{percentage4}%)";  
  
    // IE6-9  
        // Nur erste und letzte Farbe werden interpretiert  
        //    Bei GradientType = 1  wird es horizontal  
        //    Bei GradientType = 0  wird es vertikal  
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='@{color1}', endColorstr='@{color4}');  
}  
  
.background_image( @imagefilename )  
{  
    background-image: url('@{img_path}@{imagefilename}');  
    background-repeat: no-repeat;  
    background-position: 0 center;  
}  
  
.border_radius( @lefttop : @border_radius_global, @righttop : @border_radius_global, @rightbottom : @border_radius_global, @leftbottom : @border_radius_global)  
{  
    //    Alle anderen  
    border-radius: ~"@{lefttop}px @{righttop}px @{rightbottom}px @{leftbottom}px";  
  
    //    Firefox  
    -moz-border-radius: ~"@{lefttop}px @{righttop}px @{rightbottom}px @{leftbottom}px";  
  
    //    Opera  
    -o-border-radius: ~"@{lefttop}px @{righttop}px @{rightbottom}px @{leftbottom}px";  
  
    //    Chrome, Safari  
    -webkit-border-radius: ~"@{lefttop}px @{righttop}px @{rightbottom}px @{leftbottom}px";  
  
    // KDE-Browser (Linux)  
    -khtml-border-radius: ~"@{lefttop}px @{righttop}px @{rightbottom}px @{leftbottom}px";  
  
    // IE 10  
    -ms-border-radius: ~"@{lefttop}px @{righttop}px @{rightbottom}px @{leftbottom}px";  
  
    //    Workaround für IE 5-7 einbinden (IE 9 beherscht das komischerweise auch ohne extra Angabe)  
    //---Diese Datei muss sich im Webroot befinden, relative Links und absolute Links werden von IE ignoriert und deshalb muss sich ie-css3.htc neben der .htaccess befinden  
    behavior: url(ie-css3.htc);  
  
    //---    Damit der Hintergrund nicht aus der Box herausscheint  
  
    //    Firefox  
    -moz-background-clip: padding;  
  
    // Chrome, Safari  
    -webkit-background-clip: padding-box;  
  
    //    Alle anderen  
    background-clip: padding-box;  
}  
  
.transition( @seconds : 5 )  
{  
    //    Alle anderen  
    transition: ~"all @{seconds}s ease-in";  
  
    //    Firefox  
    -moz-transition: ~"all @{seconds}s ease-in";  
  
    //    Opera  
    -o-transition: ~"all @{seconds}s ease-in";  
  
    //    Chrome, Safari  
    -webkit-transition: ~"all @{seconds}s ease-in";  
  
    // KDE-Browser (Linux)  
    -khtml-transition: ~"all @{seconds}s ease-in";  
  
    // IE 10  
    -ms-transition: ~"all @{seconds}s ease-in";  
  
    //    Workaround für IE 5-7 einbinden (IE 9 beherscht das komischerweise auch ohne extra Angabe)  
    // Diese Datei muss sich im Webroot befinden, relative Links und absolute Links werden von IE ignoriert und deshalb muss sich ie-css3.htc neben der .htaccess befinden  
    behavior: url(ie-css3.htc);  
}  
  
  
//    Alles weitere folgt, wenn benötigt  
/**  
*    Rotate  
*/  
.box_rotate( @degrees ) {  
    // Alle anderen  
    transform: ~"rotate( @{degrees}deg)";  
  
    // Safari, Chrome  
    -webkit-transform: ~"rotate( @{degrees}deg)";  
  
    // Firefox  
    -moz-transform: ~"rotate( @{degrees}deg)";  
  
    //    Internet Explorer ab 9  
    -ms-transform: ~"rotate( @{degrees}deg)";  
  
    // Opera  
    -o-transform: ~"rotate( @{degrees}deg)";  
  
    // Internet Explorer 6 bis 9  
    // Degree übergabe fehlt  
    filter: ~"progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=-9.005046977739906e-37, M21=9.005046977739906e-37, M22=1, sizingMethod='auto expand')";  
    zoom: 1;  
  
    // KDE-Browser (Linux)  
    -khtml-transform: ~"rotate( @{degrees}deg)";  
}  
/**  
*    Box-Shadow  
*/  
// Unvollständig, uncomplete  
.box_shadow {  
  -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */  
          box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */  
}  
  
/**  
*    Box RGBa  
*/  
// Unvollständig, uncomplete  
.box_rgba {  
 background-color: transparent;  
 background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */  
           filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490); /* IE6–IE9 */  
           zoom: 1;  
}  

Unvollständig und noch nicht wirklich vollständig auf Richtigkeit geprüft