CSS3 Please! The Cross-Browser CSS3 Rule Generator  

Posted by ReelTym


CSS3, Please! The Cross-Browser CSS3 Rule Generator

.box_round {
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3-4 */
border-radius: 12px; /* Opera 10.5, IE 9, Saf5, Chrome */
}

.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 */
}

.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 */
}

.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 */
}

.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;
}

.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;
}

.box_textshadow {
text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome */
}

@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+ */
}

/*
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
*/

This entry was posted on Friday, October 08, 2010 and is filed under . You can leave a response and follow any responses to this entry through the Subscribe to: Post Comments (Atom) .

0 comments