This element will receive inline changes as you edit the CSS rules on the left. Enjoy!
/* -------------------------------------------------------------
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+ */
-webkit-border-radius: 12px; /* Saf3-4 */
border-radius: 12px; /* Opera 10.5, IE 9, Saf5, Chrome */
}
/* */
/* [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, IE 9 */
}
/* */
/* [to clipboard] [toggle rule off] */
.box_gradient {
background-color: #444444;
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */
}
/* */
/* [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 */
transform: rotate(7.5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', /* IE6,IE7 */
M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104,
sizingMethod='auto expand')"; /* IE8 */
zoom: 1;
}
/* */
/* [to clipboard] [toggle rule off] */
.box_transition {
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
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'); /* IE6-8 */
src: local('☺'),
url('myfont.woff') format('woff'), /* FF3.6, IE9 */
url('myfont.ttf') format('truetype'); /* Saf3+,Chrome,FF3.5,Opera10+ */
}
/*
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.
Notes:
+ Multiple IE filters must be comma delimited in a single declaration. They are not additive in separate blocks.
+ 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.
© 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. <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
*/
.box_rgba { background-color: #B4B490; 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,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')"; /* IE8 */ }/* */