LESS css fertige funktionen

[T-Rex]

Moin,

wir benutzen seit kurzem Less php. Bei Less kann man css funktionen schreiben. Nachdem wir diese tolle funktion (erst) heute entdeckt haben (grummel) fragen wir uns ob es bereits fertige Less funktionen gibt. z.B. für Sprechblasen.

Gruß
MORE
T-Rex

[dave]

Hi,

ich kenne für LESS nur Bootstrap, womit ich keinerlei Erfahrung habe.

Für SASS/SCSS könnte ich Compass empfehlen. Eventuell (falls ihr sonst nichts findet) könnt ihr da ja ein paar Dinge abschreiben.

~dave

[entropie]

Hi.

ich kenne für LESS nur Bootstrap, womit ich keinerlei Erfahrung habe.

Eine super sache wenn man ein bisschen hand anlegt und nicht alle standards übernimmt.

Mfg entropie

[Der Martin]

Hallo,

[...] ob es bereits fertige Less funktionen gibt. z.B. für Sprechblasen.

sollte man da nicht besser zum Urologen gehen? :-)

*scnr*
 Martin

[O'Brien]

Hi.

[...] ob es bereits fertige Less funktionen gibt. z.B. für Sprechblasen.

sollte man da nicht besser zum Urologen gehen? :-)

Oder zum Fernsehen. Bauchredner sind ja wieder ganz groß in Mode.

Schönen Sonntag noch!
O'Brien

[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

[saidooo]

Ergänzung zu vorheriggen Post

Bootstrap
LessElements GitHub zum direkt einklinken
Semantic