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_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 ≤ 28 */
box-sizing: border-box; /* Chrome, Firefox 29+, 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] */
.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;
}
/*
btw- up/down keys work, along with your mouse wheel. ;)
coming soon.. extra css transforms (skew, scale) and more.
plz leave feedback here.
also css3please is an open source project!. report bugs or contribute!
Notes:
+ IE<10 browsers do not support gradients. Possible solutions are using SVG or using a filter with a wrapper div.
+ The rotation transform ends up with a different transform-origin in IE. Look at heygrady's transform
library and his excellent guide for the best results.
+ If you’re doing transitions, Matthew Lein’s Ceaser generates code with lots of presets, including the Penner equations.
© 2012; a Paul Irish and Jonathan Neal joint, in association w/ Boaz Sender and Zoltan Hawryluk.
if you like this, you'll probably also dig yayQuery and mothereffinghsl.com. <3
*/
/*
__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 gradients.
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.
*/
.box_rgba { background-color: transparent; background-color: rgba(180, 180, 144, 0.6); /* Chrome, Firefox 3+, IE 9+, Opera 10.10+, Safari 3+ */ }/* */