CSS3, please!

This element will receive instant changes as you edit the CSS rules on the left. Enjoy!

/*    [toggle styling]    */
/* -------------------------------------------------------------
      CSS3, Please!
      ===================================================

      Update: We recommend using Autoprefixer instead of CSS3Please.
      
      You can edit the underlined values in this css file,
      but don't worry about making sure the corresponding
      values match, that's all done automagically for you.

      Whenever you want, you can copy the whole or part of
      this page and paste it into your own stylesheet.
------------------------------------------------------------- */

/*                           [to clipboard] [toggle rule off] */
.box_round {
  border-radius: 12px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */
}
/* */
/*                           [to clipboard] [toggle inset on] [toggle rule off] */
.box_shadow {
  -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
          box-shadow: 0px 0px 4px 0px #ffffff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}
/* */
/*                           [to clipboard] [toggle rule off] */
.box_gradient {
  background-color: #444444;
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
  background-image:         linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera */
}
/* */
/*                           [to clipboard] [toggle rule on] */
.box_rgba {
  background-color: transparent;
  background-color: rgba(180, 180, 144, 0.6);  /* Chrome, Firefox 3+, IE 9+, Opera 10.10+, Safari 3+ */
}
/* */
/*                           [to clipboard] [toggle rule on] */
.box_rotate {
  -webkit-transform: rotate(7.5deg);  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: rotate(7.5deg);  /* IE 9 */
          transform: rotate(7.5deg);  /* Firefox 16+, IE 10+, Opera */
}
/* */
/*                           [to clipboard] [toggle rule on] */
.box_scale {
  -webkit-transform: scale(0.8);  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: scale(0.8);  /* IE 9 */
          transform: scale(0.8);  /* Firefox 16+, IE 10+, Opera */
}
/* */
/*                           [to clipboard] [toggle rule on] */
.box_3dtransforms {
  -webkit-perspective: 300px;  /* Chrome 12+, Safari 4+ */
      -ms-perspective: 300px;  /* IE 10 */
          perspective: 300px;
  -webkit-transform: rotateY(180deg);  -webkit-transform-style: preserve-3d;
      -ms-transform: rotateY(180deg);      -ms-transform-style: preserve-3d;
          transform: rotateY(180deg);          transform-style: preserve-3d;
}
/* */
/*                           [to clipboard] [toggle rule off] */
.box_transition {
  -webkit-transition: all 0.3s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}
/* */
/*                           [to clipboard] [toggle rule off] */
.box_textshadow {
  text-shadow: 1px 1px 3px #888; /* Chrome, Firefox 3.5+, IE 10+, Opera 9+, Safari 1+ */
}
/* */
/*                           [to clipboard] [toggle rule off] */
.box_opacity {
  opacity: 0.9; /* Android 2.1+, Chrome 4+, Firefox 2+, IE 9+, iOS 3.2+, Opera 9+, Safari 3.1+ */
}
/* */
/*                           [to clipboard] */
* {
  -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
     -moz-box-sizing: border-box; /* Firefox 1+ */
          box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
}
/* */
/*                           [to clipboard] [toggle rule off] */
.box_bgsize {
  -webkit-background-size: 100% 100%; /* Safari 3-4 */
          background-size: 100% 100%; /* Chrome, Firefox 4+, IE 9+, Opera, Safari 5+ */
}
/* */
/*                           [to clipboard] [toggle rule on] */
.box_columns {
  -webkit-column-count: 2;  -webkit-column-gap: 15px; /* Chrome, Safari 3 */
     -moz-column-count: 2;     -moz-column-gap: 15px; /* Firefox 3.5+ */
          column-count: 2;          column-gap: 15px; /* Opera 11+ */
}
/* */
/*                           [to clipboard] [toggle rule off] */
.box_animation:hover {
  -webkit-animation: myanim 5s infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: myanim 5s infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-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; }
}
/* */
/*                           [to clipboard] [toggle rule off] */
Oh hai :)

From Peter Nederlof oh noes!
Manipulate me, please! rotate scale skew skew move
.matrix {
  
Play for output ...
}
/*                           [to clipboard] */ 
@font-face {
  font-family: 'WebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
/*                           [to clipboard] [toggle rule off] */
.box_tabsize {
  -moz-tab-size: 2; /* Firefox 4+ */
       tab-size: 2;
}
/*
    __Changelog__

    2013.04.05: Opera 12.10 supports unprefixed CSS animations, gradients, transforms, and transitions.
    2013.04.05: Removed -webkit-background-clip (thx Albert Scheiner).
    2013.02.11: Added inset toggle for box-shadow (thx Ryan).
    2013.02.05: Chrome 26 support for unprefix transitions and unprefixed gradints.
    2012.12.31: Removed -moz-background-clip (thx Mottie).
    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.
*/