LESS-PHP USEFUL CSS3 MIXINS

-

Il existe plusieurs méthodes pour mettre en place les modules CSS3. En voici une, utiliser LESS et ses mixins.

CSS3 étant encore à l’état de brouillon, des préfixes sont appliqués pour permettre un développement progressif avant la validation des recommandations.

La méthode de lea Verou Lea Verou, -prefix-free permet de se passer de ces prefixes, mais ajoute une couche de javascript et est un peu trop contraignante, bien que celle ci permette d’avoir une CSS nettement plus légère au final.

Voici ma liste de mixins CSS3 testé avec LESS PHP)

Télécharger le gist

Pas de IE filters, seulement le prefixe -ms.

Box-sizing

.box-sizing(@model : border-box) {
  -webkit-box-sizing  : @arguments;
     -moz-box-sizing  : @arguments;
      -ms-box-sizing  : @arguments;
          box-sizing  : @arguments;
}

Word-break & Hyphens

.word-break {
   -ms-word-break : break-all;
       word-break : break-all;
       word-break : break-word; // Non standard for webkit
  -webkit-hyphens : auto;
     -moz-hyphens : auto;
          hyphens : auto;
}

Arrondies "border-radius + fix"

.radius(@top_left : 5px, @top_right : 5px, @bottom_right : 5px, @bottom_left : 5px)
{
  -webkit-border-radius : @arguments;
     -moz-border-radius : @arguments;
          border-radius : @arguments;
  
     -moz-background-clip : padding;
  -webkit-background-clip : padding-box;
          background-clip : padding-box;
}

J’y ai ajouté le background-clip: padding-box pour pallier d’éventuel débordements de fond sur les radius.

Border-image

.border-image(@TopOffset: 10, @RightOffset : 10, @BottomOffset: 10, @LeftOffset: 10, @image : ~"border-image.png", @method : repeat  )
{
     -moz-border-image : url(@{img_path}@{image}) @TopOffset @RightOffset @BottomOffset @LeftOffset @method;
       -o-border-image : url(@{img_path}@{image}) @TopOffset @RightOffset @BottomOffset @LeftOffset @method;
          border-image : url(@{img_path}@{image}) @TopOffset @RightOffset @BottomOffset @LeftOffset @method;
  -webkit-border-image : url(@{img_path}@{image}) @TopOffset @RightOffset @BottomOffset @LeftOffset @method;
          border-width : ~"@{TopOffset}px" ~"@{RightOffset}px" ~"@{BottomOffset}px" ~"@{LeftOffset}px";
}

Ne pas oublier de définir la variable : @img_path   : ~"/img/";

Ombres "box-shadow"

.box-shadow(@x : 0, @y : 0, @blur : 5px, @color : #888)
{
  -webkit-box-shadow : @arguments;
     -moz-box-shadow : @arguments;
          box-shadow : @arguments;
}

Pour faire une ombre interne ajouter inset, exemple : .box-shadow(inset,0,0,5px, #000);

Ombres de texte "text-shadow"

.text-shadow(@x : 1px, @y : 1px, @blur : 2px, @color : #fff)
{ text-shadow:@arguments; }

Taille du fond "background-size"

.background-size (@x : 100%, @y : 100%)
{
  -webkit-background-size : @arguments;
     -moz-background-size : @arguments;
          background-size : @arguments;
}

Fonds avec transparence "background : rgba"

.background-rgba(@color : #ffffff,@opacity : 60%)
{
  background-color : fade(@arguments);
}

Fonds dégradés linéaires "linear-gradient"

.linear-gradient(@direction : top, @from:#000, @to:#EEE)
{
  background : @from;
  background : -moz-linear-gradient(@direction, @from, @to);
  background : -webkit-linear-gradient(@direction, @from, @to);
  background : -o-linear-gradient(@direction, @from, @to);
  background : -ms-linear-gradient(@direction, @from, @to);
  background : linear-gradient(@direction, @from, @to);
}

Fonds dégradés circulairse "radial-gradient"

.radial-gradient(@hv-position : center center, @shape-size : circle cover, @color_start : #ffffff, @color_stop : #000000   )
{
  background : @color_start;
  background : -moz-radial-gradient(@hv-position, @shape-size, @color_start, @color_stop);
  background : -webkit-radial-gradient(@hv-position, @shape-size, @color_start, @color_stop);
  background : -o-radial-gradient(@hv-position, @shape-size, @color_start, @color_stop);
  background : -ms-radial-gradient(@hv-position, @shape-size, @color_start, @color_stop);
  background : radial-gradient(@hv-position, @shape-size, @color_start, @color_stop)
}

Transitions (animation) "transition"

.transition(@properties : all, @duration : 1s, @delay : 1s, @easing : linear) {
    -webkit-transition: @arguments;
       -moz-transition: @arguments;
        -ms-transition: @arguments;
         -o-transition: @arguments;
            transition: @arguments;
}

Transformations asymétrique en X "transform : skewX"

.skewX (@x:35deg) {
  -webkit-transform : skewX(@x);
     -moz-transform : skewX(@x);
       -o-transform : skewX(@x);
      -ms-transform : skewX(@x);
          transform : skewX(@x);
}

Transformations asymétrique en Y "transform : skewY"

.skewY (@y:35deg) {
  -webkit-transform : skewY(@y);
     -moz-transform : skewY(@y);
       -o-transform : skewY(@y);
      -ms-transform : skewY(@y);
          transform : skewY(@y);
}

Transformations symétrique, à l’échelle "transform : scale"

.scale(@scale : 1)
{
  -webkit-transform : scale(@arguments);
     -moz-transform : scale(@arguments);
       -o-transform : scale(@arguments);
      -ms-transform : scale(@arguments);
          transform : scale(@arguments);
}

Transformations symétrique en X, à l’échelle "transform : scaleX"

.scaleX(@scale : 1)
{
  -webkit-transform : scaleX(@arguments);
     -moz-transform : scaleX(@arguments);
       -o-transform : scaleX(@arguments);
      -ms-transform : scaleX(@arguments);
          transform : scaleX(@arguments);
}

Transformations symétrique en Y, à l’échelle "transform : scaleY"

.scaleY(@scale : 1)
{
  -webkit-transform : scaleY(@arguments);
     -moz-transform : scaleY(@arguments);
       -o-transform : scaleY(@arguments);
      -ms-transform : scaleY(@arguments);
          transform : scaleY(@arguments);
}

Rotations "transform : rotate"

.rotate(@angle:35deg)
{
   -webkit-transform  : rotate(@angle);
      -moz-transform  : rotate(@angle);
        -o-transform  : rotate(@angle);
       -ms-transform  : rotate(@angle);
           transform  : rotate(@angle);
}

Rotations 3D "transform : rotateX, rotateX, rotateZ "

.rotate3d (@deg1:35deg, @deg2:35deg, @deg3:35deg){
        -webkit-transform : rotateX(@deg1) rotateY(@deg2) rotateZ(@deg3);
  -webkit-transform-style : preserve-3d;
           -moz-transform : rotateX(@deg1) rotateY(@deg2) rotateZ(@deg3);
             -o-transform : rotateX(@deg1) rotateY(@deg2) rotateZ(@deg3);
       -o-transform-style : preserve-3d;
     -moz-transform-style : preserve-3d;
            -ms-transform : rotateX(@deg1) rotateY(@deg2) rotateZ(@deg3);
      -ms-transform-style : preserve-3d;
               transform  : rotateX(@deg1) rotateY(@deg2) rotateZ(@deg3);
         transform-style  : preserve-3d;
}

Déplacements en X et Y "transform : translate"

.translate(@x: 10px, @y: 10px)
{
  -webkit-transform : translate(@x,@y);
     -moz-transform : translate(@x,@y);
       -o-transform : translate(@x,@y);
      -ms-transform : translate(@x,@y);
          transform : translate(@x,@y);
}

Transform 3d

.3d-transform(@z : 300, @deg : 180deg) 
{
      -webkit-perspective : @z; 
         -moz-perspective : @z;    
          -ms-perspective : @z;     
              perspective : @z;         
        -webkit-transform : rotateY(@deg);  
           -moz-transform : rotateY(@deg);     
            -ms-transform : rotateY(@deg);      
                transform : rotateY(@deg);          
  -webkit-transform-style : preserve-3d;
     -moz-transform-style : preserve-3d;
      -ms-transform-style : preserve-3d;
          transform-style : preserve-3d;     
}

Transform origin

.transform-origin (@value : none) {
  -webkit-transform-origin : @arguments;
     -moz-transform-origin : @arguments;
       -o-transform-origin : @arguments;
      -ms-transform-origin : @arguments;
          transform-origin : @arguments;
}

Transform perspective

.perspective (@value : none) {
  -webkit-perspective : @arguments;
     -moz-perspective : @arguments;
       -o-perspective : @arguments;
      -ms-perspective : @arguments;
          perspective : @arguments;
}

Multi-colonne

.columns(@nb : 4, @width: 100px, @gap : 10px )
{
    -webkit-column-count  : @nb;
       -moz-column-count  : @nb;
         -o-column-count  : @nb;
        -ms-column-count  : @nb;
            column-count  : @nb;
    -webkit-column-width  : @width;
       -moz-column-width  : @width;
         -o-column-width  : @width;
        -ms-column-width  : @width;
            column-width  : @width;
      -webkit-column-gap  : @gap;
         -moz-column-gap  : @gap;
           -o-column-gap  : @gap;
          -ms-column-gap  : @gap;
              column-gap  : @gap;  
}

Tailles des tabs

.box_tabsize(@size : 2) {
  -moz-tab-size: @size;
    -o-tab-size: @size;
       tab-size: @size;
}

Les flex boxes

.box {
  display : -webkit-box;
  display : -moz-box;
  display : -o-box;
  display : -ms-box;
  display : box;
}

// Values : horizontal , vertical , inline-axis , block-axis , inherit;
.box-orient (@orient : horizontal) {
  -webkit-box-orient : @arguments;
     -moz-box-orient : @arguments;
       -o-box-orient : @arguments;
      -ms-box-orient : @arguments;
         box-orient  : @arguments;
}

// Values : normal , reverse , inherit
.box-direction (@direction : normal) {
  -webkit-box-direction : @arguments;
     -moz-box-direction : @arguments;
       -o-box-direction : @arguments;
      -ms-box-direction : @arguments;
          box-direction : @arguments;
}

// Values : start , center , end , justify
.box-pack (@pack : start) {
  -webkit-box-pack : @arguments;
     -moz-box-pack : @arguments;
       -o-box-pack : @arguments;
      -ms-box-pack : @arguments;
          box-pack : @arguments;
}

// Values : start , center , end , baseline , stretch
.box-align (@align : start) {
  -webkit-box-align : @arguments;
     -moz-box-align : @arguments;
      -ms-box-align : @arguments;
       -o-box-align : @arguments;
          box-align : @arguments;
}

// Values : single , multiple
.box-lines (@lines : single) {
  -webkit-box-lines : @arguments;
     -moz-box-lines : @arguments;
       -o-box-lines : @arguments;
      -ms-box-lines : @arguments;
          box-lines : @arguments;
}

// Values : integer
.box-flex (@flex : 0) {
  -webkit-box-flex : @arguments;
     -moz-box-flex : @arguments;
       -o-box-flex : @arguments;
      -ms-box-flex : @arguments;
          box-flex : @arguments;
}

//Values : integer
.box-ordinal-group (@group : 0) {
  -webkit-box-ordinal-group : @arguments;
     -moz-box-ordinal-group : @arguments;
       -o-box-ordinal-group : @arguments;
      -ms-box-ordinal-group : @arguments;
          box-ordinal-group : @arguments;
}

Fini les float ! Les flex boxes nous permettent une grande liberté dans le positionnement de nos boites !

Easing list

// Cubic
@easeInCubic     :  cubic-bezier(0.550, 0.055, 0.675, 0.190);
@easeOutCubic    :  cubic-bezier(0.215, 0.610, 0.355, 1.000);
@easeInOutCubic  :  cubic-bezier(0.645, 0.045, 0.355, 1.000);

// Circ
@easeInCirc      :  cubic-bezier(0.600, 0.040, 0.980, 0.335);
@easeOutCirc     :  cubic-bezier(0.075, 0.820, 0.165, 1.000);
@easeInOutCirc   :  cubic-bezier(0.785, 0.135, 0.150, 0.860);

// Expo
@easeInExpo      :  cubic-bezier(0.950, 0.050, 0.795, 0.035);
@easeOutExpo     :  cubic-bezier(0.190, 1.000, 0.220, 1.000);
@easeInOutExpo   :  cubic-bezier(1.000, 0.000, 0.000, 1.000);

// Quad
@easeInQuad      :  cubic-bezier(0.550, 0.085, 0.680, 0.530);
@easeOutQuad     :  cubic-bezier(0.250, 0.460, 0.450, 0.940);
@easeInOutQuad   :  cubic-bezier(0.455, 0.030, 0.515, 0.955);

// Quart
@easeInQuart     :  cubic-bezier(0.895, 0.030, 0.685, 0.220);
@easeOutQuart    :  cubic-bezier(0.165, 0.840, 0.440, 1.000);
@easeInOutQuart  :  cubic-bezier(0.770, 0.000, 0.175, 1.000);

// Quint
@easeInQuint     :  cubic-bezier(0.755, 0.050, 0.855, 0.060);
@easeOutQuint    :  cubic-bezier(0.230, 1.000, 0.320, 1.000);
@easeInOutQuint  :  cubic-bezier(0.860, 0.000, 0.070, 1.000);

// Sine
@easeInSine      :  cubic-bezier(0.470, 0.000, 0.745, 0.715);
@easeOutSine     :  cubic-bezier(0.390, 0.575, 0.565, 1.000);
@easeInOutSine   :  cubic-bezier(0.445, 0.050, 0.550, 0.950);

// Back
@easeInBack      :  cubic-bezier(0.600, -0.280, 0.735, 0.045);
@easeOutBack     :  cubic-bezier(0.175,  0.885, 0.320, 1.275);
@easeInOutBack   :  cubic-bezier(0.680, -0.550, 0.265, 1.550);

source : http://matthewlein.com/ceaser/

Cacher des éléments, type textes & images

.ir,.hide-text {
  background-color : transparent; 
              font : 0/0 a;
       text-shadow : none;
             color : transparent;
            border : 0;
}

Plus d’infos à propos de cette technique

Télécharger le gist

Catégorie : Code · Tags : ,