This element will receive inline changes as you edit the CSS rules on the left. Enjoy!
Latest version css3please.com
/* -------------------------------------------------------------
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.
For the latest version see: http://css3please.com
------------------------------------------------------------- */
/* [to clipboard] [toggle rule off] */
.box_round {
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3+, Chrome */
border-radius: 12px; /* Opera 10.5, IE 9 */
}
/* */
/* [to clipboard] [toggle rule off] */
.box_shadow {
-moz-box-shadow: 5px 3px 4px #999; /* FF3.5+ */
-webkit-box-shadow: 5px 3px 4px #999; /* Saf3.0+, Chrome */
box-shadow: 5px 3px 4px #999; /* Opera 10.5, IE 9.0 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); /* IE 5.5 to 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.shadow(Strength=4, Direction=135, Color='#000000')"; /* IE 8 */
}
/* */
/* [to clipboard] [toggle rule off] */
.box_gradient {
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 */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104)"; /* 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 */
}
/* */
@font-face {
font-family: 'WebFont';
src: url('myfont.eot'); /* IE6+ */
src: local('☺'),
url('myfont.woff') format('woff'), /* FF3.6 */
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.
© 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)
*/
.box_rgba { background-color: #B4B490; background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')"; /* IE8 */ }/* */