/* -------------------------------------------------------------
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 {
-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 {
-webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}
/* [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+, iOS 5+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background-image: linear-gradient(to bottom, #444444, #999999);
}
/* [to clipboard] [toggle rule on]
.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;
}
/* */
/* [to clipboard] [toggle rule on]
.box_rotate {
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome
-moz-transform: rotate(7.5deg); /* FF3.5+
-ms-transform: rotate(7.5deg); /* IE9
-o-transform: rotate(7.5deg); /* Opera 10.5
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 on]
.box_scale {
-webkit-transform: scale(0.8); /* Saf3.1+, Chrome
-moz-transform: scale(0.8); /* FF3.5+
-ms-transform: scale(0.8); /* IE9
-o-transform: scale(0.8); /* Opera 10.5+
transform: scale(0.8);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9
M11=0.9999025240093042, M12=-0.013962180339145272, M21=0.013962180339145272, M22=0.9999025240093042,SizingMethod='auto expand');
}
/* */
/* [to clipboard] [toggle rule on]
.box_3dtransforms {
-webkit-perspective: 300; /* Saf4+, Chrome 12+
-moz-perspective: 300; /* FF10+
-ms-perspective: 300; /* IE10+
perspective: 300;
-webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d;
-moz-transform: rotateY(180deg); -moz-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; /* Saf3.2+, Chrome */
-moz-transition: all 0.3s ease-out; /* FF4+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
transition: all 0.3s ease-out;
}
Thanks to css3 please site for wonderful list
/* [to clipboard] [toggle rule off]*/
.box_textshadow {
text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}
/* [to clipboard] [toggle rule off]*/
.box_opacity {
opacity: 0.9; /* Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+ */
filter: alpha(opacity=90); /* IE6-IE8 */
}
/* [to clipboard]*/
* {
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: border-box; /* FF1+ */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}
/* [to clipboard] [toggle rule off]*/
.box_bgsize {
-webkit-background-size: 100% 100%; /* Saf3-4 */
background-size: 100% 100%; /* Opera, IE9, Saf5, Chrome, FF4+ */
}
/* [to clipboard] [toggle rule on]
.box_columns {
-webkit-column-count: 2; -webkit-column-gap: 15px; /* Saf3, Chrome
-moz-column-count: 2; -moz-column-gap: 15px; /* FF3.5+
column-count: 2; column-gap: 15px; /* Opera 11+
}
/* */
/* [to clipboard] [toggle rule off]*/
.box_animation:hover {
-webkit-animation: myanim 5s infinite; /* Saf5, Chrome */
-moz-animation: myanim 5s infinite; /* FF5+ */
-o-animation: myanim 5s infinite; /* Opera 12+ */
animation: myanim 5s infinite; /* Saf5, Chrome */
}
@-webkit-keyframes myanim {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
@-moz-keyframes myanim {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
@-o-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]*/
FromPeter Nederlofoh noes!Manipulate me, please!rotatescaleskewskewmove
.matrix {
Play for output …
}
/* [to clipboard]*/
@font-face {
font-family: 'WebFont';
src: url('myfont.eot?#') format('eot'), /* IE6–8 */
url('myfont.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('myfont.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
/* [to clipboard] [toggle rule off]*/
.box_tabsize {
-moz-tab-size: 2; /* Firefox 4+ */
-o-tab-size: 2; /* Opera 10.60+ */
tab-size: 2;
}
If you enjoyed this article, please consider sharing it!
