Garçon !Un CSS3!

Cet encart se modifie à la volée lorsque la feuille de style de gauche est modifiée!
Have a lot of fun!

/* [Changez le "background" de la page en un "clic"] */
/* ------------------------------------------------------------------------------------------
      Garçon, Un CSS3 ! Le générateur d'effet "CSS3"
      ===================================================
		
      Vous pouvez modifier les valeurs de la feuille de style à partir de cette page. Pour
      ce faire, double cliquez sur les valeurs choisies après avoir activé la règle (les
      règles actives apparaissent en couleur).
      
      Pour le reste ne vous inquiétez pas, tout est programmé pour s'exécuter automatiquement!

      Chaque fois que vous le souhaitez, vous pouvez copier tout ou partie de cette page 
      et le coller dans votre propre feuille de style.
      
      																							Have a lot of fun!
------------------------------------------------------------------------------------------ */

/*                           [Vers le presse-papiers] [Activer la règle de] */
.box_round {
  -webkit-border-radius: 12px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
          border-radius: 12px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */

  /* Usage si vous ne voulez pas de "coulure" sur l'arrondi (voir lien extérieur) : */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
/* */
/*                           [Vers le presse-papiers] [Activer la règle de] */
.box_shadow {
  -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
          box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9+, Firefox 4+, Chrome 6+, iOS 5 */
}
/* */
/*                           [Vers le presse-papiers] [Activer la règle de] */
.box_gradient {
  background-color: #9900CC;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#9900CC), to(#CCFFFF)); /* Safari 4+, Chrome */
  background-image: -webkit-linear-gradient(top, #9900CC, #CCFFFF); /* Chrome 10+, Safari 5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #9900CC, #CCFFFF); /* Firefox 3.6-15 */
  background-image:      -o-linear-gradient(top, #9900CC, #CCFFFF); /* Opera 11.10-12.00 */
  background-image:         linear-gradient(to bottom, #9900CC, #CCFFFF); /* Firefox 16+, IE10, Opera 12.50+ */
}
/* */
/*                           [Vers le presse-papiers] [Activer la règle de] */
.box_rgba {
  background-color: transparent;
  background-color: rgba(180, 180, 144, 0.6);  /* Firefox 3+, Safari 3+, Opera 10.10+, Chrome, IE9+ */
}
/* */
/*                           [Vers le presse-papiers] [Activer la règle de] */
.box_rotate {
  -webkit-transform: rotate(7.5deg);  /* Safari 3.1+, Chrome */
     -moz-transform: rotate(7.5deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(7.5deg);  /* IE9+ */
       -o-transform: rotate(7.5deg);  /* Opera 10.5-12.00 */
          transform: rotate(7.5deg);  /* Firefox 16+, Opera 12.50+ */
}
/* */
/*                           [Vers le presse-papiers] [Activer la règle de] */
.box_scale {
  -webkit-transform: scale(0.8);  /* Safari 3.1+, Chrome */
     -moz-transform: scale(0.8);  /* Firefox 3.5+ */
      -ms-transform: scale(0.8);  /* IE9+ */
       -o-transform: scale(0.8);  /* Opera 10.50+ */
          transform: scale(0.8);
}
/* */
/*                           [Vers le presse-papiers] [Activer la règle de] */
.box_3dtransforms {
  -webkit-perspective: 300;  /* Safari 4+, Chrome 12+ */
     -moz-perspective: 300;  /* Firefox 10+ */
      -ms-perspective: 300;  /* IE10+ */
          perspective: 300;
  -webkit-transform: rotateY(180deg);  -webkit-transform-style: preserve-3d;
     -moz-transform: rotateY(180deg);     -moz-transform-style: preserve-3d;
      -ms-transform: rotateY(180deg);      -ms-transform-style: preserve-3d;
          transform: rotateY(180deg);          transform-style: preserve-3d;
}
/* */
/*                           [Vers le presse-papiers] [Activer la règle de] */
.box_transition {
  -webkit-transition: all 0.3s ease-out;  /* Safari 3.2+, Chrome */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.5–12.00 */
          transition: all 0.3s ease-out;  /* Firefox 16+, Opera 12.50+ */
}
/* */
/*                           [Vers le presse-papiers] [Activer la règle de] */
.box_textshadow {
     text-shadow: 1px 1px 3px #888; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
}
/* */
/*                           [Vers le presse-papiers] [Activer la règle de] */
.box_opacity {
  opacity: 0.9; /* Chrome 4+, Firefox 2+, Safari 3.1+, Opera 9+, IE9+, iOS 3.2+, Android 2.1+ */
}
/* */
/*                           [Vers le presse-papiers] */
* {
  -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
     -moz-box-sizing: border-box; /* Firefox 1+ */
          box-sizing: border-box; /* Chrome, IE8+, Opera, Safari 5.1*/
}
/* */
/*                           [Vers le presse-papiers] [Activer la règle de] */
.box_bgsize {
  -webkit-background-size: 100% 100%; /* Safari 3-4 */
          background-size: 100% 100%; /* Opera, IE9+, Safari 5, Chrome, Firefox 4+ */
}
/* */
/*                           [Vers le presse-papiers] [Activer la règle de] */
.box_columns {
  -webkit-column-count: 2;  -webkit-column-gap: 15px; /* Safari 3, Chrome*/
     -moz-column-count: 2;     -moz-column-gap: 15px; /* Firefox 3.5+ */
          column-count: 2;          column-gap: 15px; /* Opera 11+*/
}
/* */
/*                           [Vers le presse-papiers] [Activer la règle de] */
.box_animation:hover {
  -webkit-animation: myanim 5s infinite; /* Safari 5, Chrome */
     -moz-animation: myanim 5s infinite; /* Firefox 5-15 */
       -o-animation: myanim 5s infinite; /* Opera 12+ */
          animation: myanim 5s infinite; /* Safari 5, Chrome, Firefox 16+ */
}

@-webkit-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@-moz-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@-o-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
/* */
/*                           [Vers le presse-papiers] [Activer la règle de] */
Merci
à Peter Nederlof
Remise à zéro :)
Que puis je pour vous? Rotation Echelle Oblique Oblique Mouvement
.matrix {
  
Déformez le cadre pour récupérer le code ...
}
/*                           [Vers le presse-papiers] */ 
@font-face {
  font-family: 'WebFont';
  src: url('myfont.woff') format('woff'),  /* Firefox 3.6+, IE9+, Chrome 6+, Safari 5.1+*/
       url('myfont.ttf') format('truetype');  /* Safari 3—5, Chrome4+, Firefox 3.5, Opera 10+ */
}

/*                           [Vers le presse-papiers] [Activer la règle de] */
.box_tabsize {
  -moz-tab-size: 2; /* Firefox 4+ */
    -o-tab-size: 2; /* Opera 10.60+ */
       tab-size: 2;
}
/*
    __Changelog__
    2012.08.29: Removed IE6-8 support.
    2012.06.06: Removed -ms prefixes from transition, animations and gradients.
    2012.03.02: Added box-sizing. Woo!
    2012.01.21: Added transform scale and 3d transforms.(thx uxder)
    2012.01.19: Linear Gradient Syntax Updated. (thx cssdeck and uxder!)
    2012.01.14: Added tab-size. (Blame Mathias if anything breaks!)
    2011.10.23: Added the sweet matrix manip demo from Peter Nederlof. Thx Peter!
    2011.10.18: CSS Animations added. (thx wookiehangover!)
    2011.07.27: Added multicolumn. (thx hotmeteor!)
    2011.04.12: Added gradient for IE10! (thx calvein!)
    2011.04.11: Added background-clip for the border-radius rule (thx matthewlein!).
    2011.04.09: Simplified and corrected MS gradient filter syntax. (thanks david meister)
    2011.04.07: Added background-size (thx codler!).
    2011.03.26: Added Ceaser link.
    2011.03.15: Added linear gradients for Opera 11.10. (Thanks, Mike!)
    2012.03.01: Went one year into the future to make a minor text change. Phew!
    2011.02.22: Browser support updated.
    2011.02.20: Tab key support added (good idea, iszak)
    2011.02.20: Fixed longstanding rgba NaN bug.
    2011.02.16: Fixed IE filter sizingMethod (moved to the end) after maybe 10 bug reports for it. (Whoops.)
    2011.02.10: New gradient syntax (Thx Sami). Update @font-face syntax.
    2011.01.05: Removed unneeded -ms-filter declarations and added unprefixed linear-gradient. (Thx Mathias)
    2010.11.19: Better handling of users without Flash. (Thx Mathias)
    2010.11.06: Toggle to light skin (Thx Curtis Blackwell!). IE9 Transform added. Clipboard only grabs rules, no selector.
    2010.10.05: Unprefixed transitions, transforms
    2010.06.02: Clipboard click strips comments
    2010.05.03: IE Rotation bug fixed. (Thx Joshua!)
    2010.04.11: text-shadow added.
    2010.04.05: Real rotation in IE (Thx Zoltan!). Added transition. No more DropShadow for IE (it's crap)
    2010.04.04: New copy to clipboard style. Better mousewheel support.
    2010.03.25: Fixed the gradient flipflop. Fixed positioning bug.
*/