This element will receive inline changes as you edit the CSS rules on the left. Enjoy!
/* [toggle styling] */
/* -------------------------------------------------------------
CSS3, Please! The Cross-Browser CSS3 Rule Generator
===================================================
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 {
-moz-border-radius: 12px; /* FF1-3.6 */
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
/* */
/* [to clipboard] [toggle rule off] */
.box_shadow {
-moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE9, Chrome 10+ */
}
/* */
/* [to clipboard] [toggle rule off] */
.box_gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -ms-linear-gradient(top, #444444, #999999); /* IE10 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background-image: linear-gradient(top, #444444, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */
}
/* */
/* [to clipboard] [toggle rule on] */
.box_rotate {
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(7.5deg); /* IE9 */
transform: rotate(7.5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
zoom: 1;
}
/* */
/* [to clipboard] [toggle rule off] */
.box_transition {
-moz-transition: all 0.3s ease-out; /* FF4+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
-ms-transition: all 0.3s ease-out; /* IE10? */
transition: all 0.3s ease-out;
}
/* */
/* [to clipboard] [toggle rule off] */
.box_textshadow {
text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome */
}
/* */
/* [to clipboard] */
@font-face {
font-family: 'WebFont';
src: url('myfont.eot#') format('eot'), /* IE6–8 */
url('myfont.woff') format('woff'), /* FF3.6+, IE9, Chrome6+ */
url('myfont.ttf') format('truetype'); /* Saf3+, Chrome4+, FF3.5, Opera 10+ */
}
/* [to clipboard] [toggle rule off] */
.box_bgsize {
-moz-background-size: 100% 100%; /* FF3.6 */
-webkit-background-size: 100% 100%; /* Saf3-4 */
background-size: 100% 100%; /* Opera, IE9, Saf5, Chrome, FF4 */
}
/* */
/*
btw- up/down keys work, along with your mouse wheel. ;)
coming soon.. extra css transforms (skew, scale), text-shadow and more.
plz leave feedback here.
also css3please is an open source project!. report bugs or contribute!
Notes:
+ Multiple IE filters must be comma delimited in a single declaration. They are not additive in separate blocks.
+ IE9 starts to suck with filter-based gradients and rounded corners. Possible solution.
+ The closest thing to box-shadow for IE is Blur with makeShadow but you need a duplicate 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.
© 2010; 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__
2010.03.25: Fixed the gradient flipflop. Fixed fixed positioning bug.
2010.04.04: New copy to clipboard style. Better mousewheel support.
2010.04.05: Real rotation in IE (Thx Zoltan!). Added transition. No more DropShadow for IE (it's crap)
2010.04.11: text-shadow added.
2010.05.03: IE Rotation bug fixed. (Thx Joshua);
2010.06.02: Clipboard click strips comments
2010.10.05: Unprefixed transitions, transforms
2010.11.06: Toggle to light skin (Thx Curtis Blackwell!). IE9 Transform added. Clipboard only grabs rules, no selector.
2010.11.19: Better handling of users without Flash. (Thx Mathias)
2011.01.05: Removed unneeded -ms-filter declarations and added unprefixed linear-gradient. (Thx Mathias)
2011.02.10: New gradient syntax (Thx Sami). Update @font-face syntax.
2011.02.16: Fixed IE filter sizingMethod (moved to the end) after maybe 10 bug reports for it. (Whoops.)
2011.02.20: Fixed longstanding rgba NaN bug.
2011.02.20: Tab key support added (good idea, iszak)
2011.02.22: Browser support updated.
2012.03.01: Went one year into the future to make a minor text change. Phew!
2011.03.15: Added linear gradients for Opera 11.10. (Thanks, Mike!)
2011.03.26: Added Ceaser link.
2011.04.07: Added background-size (thx codler!).
2011.04.09: Simplified and corrected MS gradient filter syntax. (thanks david meister)
2011.04.11: Added background-clip for the border-radius rule (thx matthewlein!).
2011.04.12: Added gradient for IE10! (thx calvein!)
*/
.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; }/* */