Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 389 lines (326 sloc) 24.64 kB
1534f05 @paulirish readonly support
authored
1 <!DOCTYPE html>
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
2 <html>
3 <head>
3d56c5b @mathiasbynens Add a Gruntfile and use concatenated + minified versions of JS and CSS
mathiasbynens authored
4 <meta charset="utf-8">
7093576 @paulirish whitespace. tabs to spaces and rule indentation
authored
5 <title>CSS3 Please! The Cross-Browser CSS3 Rule Generator</title>
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
6
3d56c5b @mathiasbynens Add a Gruntfile and use concatenated + minified versions of JS and CSS
mathiasbynens authored
7 <!-- <link rel="stylesheet" href="http://peterned.home.xs4all.nl/matrices/matrices.css"> -->
8 <link rel="stylesheet" href="css/build.min.css">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
9
3d56c5b @mathiasbynens Add a Gruntfile and use concatenated + minified versions of JS and CSS
mathiasbynens authored
10 <!-- it's only up here because the js does syntax highlighting so i want the js loaded before the page loads. bad practice i know... -->
11 <script src="javascript/build.min.js"></script>
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
12 </head>
cc673d4 @paulirish clipboard work
authored
13
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
14 <body>
15
bb2fb3a @paulirish added back sandbox wrap.. zoltan wiped it out. :)
authored
16 <div id="sandboxwrap">
17 <div id="sandbox">
18 <h1>
19 <abbr title="Cascading Style Sheets Level 3">CSS3</abbr>, please!
20 </h1>
21 <p>
3729623 @paulirish box sizing yessss
authored
22 This element will receive instant changes as you edit the CSS rules on the left. Enjoy!
bb2fb3a @paulirish added back sandbox wrap.. zoltan wiped it out. :)
authored
23 </p>
24 </div>
f4a60b8 @curtisblackwell Changed index.php back to index.html
curtisblackwell authored
25 <pre class="rule comment">/* <a class="off">[toggle styling]</a><span class="endcomment"> */</span></pre>
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
26 </div>
27
28 <pre class="rule">
29 /* -------------------------------------------------------------
b573c27 @paulirish writing style tags instead of inline style edits. mucho better
authored
30 CSS3, Please! The Cross-Browser CSS3 Rule Generator
31 ===================================================
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
32
b573c27 @paulirish writing style tags instead of inline style edits. mucho better
authored
33 You can edit the underlined values in this css file,
34 but don't worry about making sure the corresponding
35 values match, that's all done automagically for you.
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
36
b573c27 @paulirish writing style tags instead of inline style edits. mucho better
authored
37 Whenever you want, you can copy the whole or part of
38 this page and paste it into your own stylesheet.
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
39 ------------------------------------------------------------- */
40
41 </pre>
42
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
43 <div id="box_round" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
44 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
7093576 @paulirish whitespace. tabs to spaces and rule indentation
authored
45 <pre class="rule">
39d716a @boazsender finished the browser support comments
boazsender authored
46 .box_round {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
47 -webkit-border-radius: <b g="0">12px</b>; <span class="comment">/* Safari 3-4, iOS 1-3.2, Android &le;1.6 <span class="endcomment">*/</span></span>
48 border-radius: <b g="0">12px</b>; <span class="comment">/* Opera 10.5, IE9, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ <span class="endcomment">*/</span></span>
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
49
50 <span class="comment">/* useful if you don't want a bg color from <a href="http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed">leaking outside</a> the border: */</span>
51 -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
878c6c0 @paulirish changeup rotation rules - thx zomigi
authored
52 }</pre>
53 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
54 </div>
40e79e5 @paulirish disable complex rounding
authored
55 <!--
878c6c0 @paulirish changeup rotation rules - thx zomigi
authored
56 <div id="box_round_complex" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
57 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
878c6c0 @paulirish changeup rotation rules - thx zomigi
authored
58 <pre class="rule">
59 .box_round {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
60 -moz-border-radius: <b g="0">8px 8px 0px 0px</b>; <span class="comment">/* Firefox 1+ <span class="endcomment">*/</span></span>
61 -webkit-border-top-left-radius: <b g="1" readonly>8px</b>; <span class="comment">/* Safari 3-4 <span class="endcomment">*/</span></span>
878c6c0 @paulirish changeup rotation rules - thx zomigi
authored
62 -webkit-border-top-right-radius: <b g="2" readonly>8px</b>;
63 -webkit-border-bottom-right-radius: <b g="3" readonly>0px</b>;
64 -webkit-border-bottom-left-radius: <b g="4" readonly>0px</b>;
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
65 border-radius: <b g="0">8px 8px 0px 0px</b>; <span class="comment">/* Opera 10.5, IE9, Safari 5, Chrome <span class="endcomment">*/</span></span>
33a9bc8 @paulirish better spacing
authored
66 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
67 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
68 </div>
40e79e5 @paulirish disable complex rounding
authored
69 -->
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
70
71 <div id="box_shadow" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
72 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
7093576 @paulirish whitespace. tabs to spaces and rule indentation
authored
73 <pre class="rule">
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
74 .box_shadow {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
75 -webkit-box-shadow: <b g="0">0px</b> <b g="1">0px</b> <b g="2">4px</b> <b g="3">0px</b> <b g="4" i="lHex" o="sHex">#ffffff</b>; <span class="comment">/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ <span class="endcomment">*/</span></span>
76 box-shadow: <b g="0">0px</b> <b g="1">0px</b> <b g="2">4px</b> <b g="3">0px</b> <b g="4" i="lHex" o="sHex">#ffffff</b>; <span class="comment">/* Opera 10.5, IE9, Firefox 4+, Chrome 6+, iOS 5 <span class="endcomment">*/</span></span>
33a9bc8 @paulirish better spacing
authored
77 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
78 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
79 </div>
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
80
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
81 <div id="box_gradient" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
82 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
7093576 @paulirish whitespace. tabs to spaces and rule indentation
authored
83 <pre class="rule">
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
84 .box_gradient {
58c36fc Or probably even better fix
Max Degterev authored
85 background-color: <b g="0" i="lHex">#444444</b>;
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
86 background-image: -webkit-gradient(linear, left top, left bottom, from(<b g="0" i="lHex">#444444</b>), to(<b g="1" i="lHex">#999999</b>)); <span class="comment">/* Safari 4+, Chrome <span class="endcomment">*/</span></span>
87 background-image: -webkit-linear-gradient(top, <b g="0" i="lHex">#444444</b>, <b g="1" i="lHex">#999999</b>); <span class="comment">/* Chrome 10+, Safari 5.1+, iOS 5+ <span class="endcomment">*/</span></span>
e1ade3e @mathiasbynens Add details on Firefox 16
mathiasbynens authored
88 background-image: -moz-linear-gradient(top, <b g="0" i="lHex">#444444</b>, <b g="1" i="lHex">#999999</b>); <span class="comment">/* Firefox 3.6-15 <span class="endcomment">*/</span></span>
58c36fc Or probably even better fix
Max Degterev authored
89 background-image: -o-linear-gradient(top, <b g="0" i="lHex">#444444</b>, <b g="1" i="lHex">#999999</b>); <span class="comment">/* Opera 11.10+ <span class="endcomment">*/</span></span>
e1ade3e @mathiasbynens Add details on Firefox 16
mathiasbynens authored
90 background-image: linear-gradient(to bottom, <b g="0" i="lHex">#444444</b>, <b g="1" i="lHex">#999999</b>); <span class="comment">/* Firefox 16+ <span class="endcomment">*/</span></span>
33a9bc8 @paulirish better spacing
authored
91 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
92 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
93 </div>
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
94
fa187b6 @zoltan-dulac IE Support ... completed!! (I think ... I hope ... Oh God, it was pa…
zoltan-dulac authored
95
96
97 <div id="box_rgba" class="rule_wrapper commentedout">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
98 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
7093576 @paulirish whitespace. tabs to spaces and rule indentation
authored
99 <pre class="rule">
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
100 .box_rgba {
1ba0371 @thedavidmeister edited .box_rgba to correct capitalization in the IE filter, removed …
thedavidmeister authored
101 background-color: transparent;
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
102 background-color: <b g="0" i="s2aHex" o="aCh">rgba(180, 180, 144, 0.6)</b>; <span class="comment">/* Firefox 3+, Safari 3+, Opera 10.10+, Chrome, IE9 <span class="endcomment">*/</span></span>
1ba0371 @thedavidmeister edited .box_rgba to correct capitalization in the IE filter, removed …
thedavidmeister authored
103 <span class="ie">filter: <span class="filter">progid:DXImageTransform.Microsoft.gradient(startColorstr=<b g="0" i="s2aHex">#99B4B490</b>,endColorstr=<b g="0" i="s2aHex">#99B4B490</b>)</span>; <span class="comment">/* IE6–IE9 <span class="endcomment">*/</span></span></span>
104 zoom: 1;
33a9bc8 @paulirish better spacing
authored
105 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
106 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
107 </div>
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
108
eb3a3d5 @paulirish comment color fixed in IE8
authored
109 <div id="box_rotate" class="rule_wrapper commentedout">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
110 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
7093576 @paulirish whitespace. tabs to spaces and rule indentation
authored
111 <pre class="rule">
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
112 .box_rotate {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
113 -webkit-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Safari 3.1+, Chrome <span class="endcomment">*/</span></span>
e1ade3e @mathiasbynens Add details on Firefox 16
mathiasbynens authored
114 -moz-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Firefox 3.5-15 <span class="endcomment">*/</span></span>
faa507b @paulirish mstransform added. fixes #11. also changelog update.
authored
115 -ms-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* IE9 <span class="endcomment">*/</span></span>
e0ac9f2 @mathiasbynens Opera 12.50 will unprefix transforms
mathiasbynens authored
116 -o-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Opera 10.5-12.00 <span class="endcomment">*/</span></span>
117 transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Firefox 16+, Opera 12.50+ <span class="endcomment">*/</span>
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
118 <span class="ie">filter: <span class="filter">progid:DXImageTransform.Microsoft.Matrix(<span class="comment">/* IE6–IE9 <span class="endcomment">*/</span></span>
153c1b3 @paulirish sizingMethod goes on the end
authored
119 <b g="0" i="matrix2deg" o="deg2matrix" readonly>M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104</b>, sizingMethod='auto expand')</span>;</span></span>
1534f05 @paulirish readonly support
authored
120 zoom: 1;
33a9bc8 @paulirish better spacing
authored
121 }</pre>
94cc614 @zoltan-dulac sylvester
zoltan-dulac authored
122 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
123 </div>
124
a69e008 @uxder Add css transform scale. Note that it's not additive to transform ro…
uxder authored
125 <div id="box_scale" class="rule_wrapper commentedout">
126 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
127 <pre class="rule">
128 .box_scale {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
129 -webkit-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Safari 3.1+, Chrome <span class="endcomment">*/</span></span>
130 -moz-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Firefox 3.5+ <span class="endcomment">*/</span></span>
a69e008 @uxder Add css transform scale. Note that it's not additive to transform ro…
uxder authored
131 -ms-transform: scale(<b g="0">0.8</b>); <span class="comment">/* IE9 <span class="endcomment">*/</span></span>
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
132 -o-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Opera 10.50+ <span class="endcomment">*/</span></span>
a69e008 @uxder Add css transform scale. Note that it's not additive to transform ro…
uxder authored
133 transform: scale(<b g="0">0.8</b>);
134 <span class="ie">filter: <span class="filter">progid:DXImageTransform.Microsoft.Matrix(<span class="comment">/* IE6–IE9 <span class="endcomment">*/</span></span>
135 <b g="0" i="matrix2deg" o="deg2matrix" readonly>M11=0.9999025240093042, M12=-0.013962180339145272, M21=0.013962180339145272, M22=0.9999025240093042</b>,SizingMethod='auto expand')</span>;</span></span>
136 }</pre>
137 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
138 </div>
139
bc24802 @uxder Added 3dtransforms.
uxder authored
140 <div id="box_3dtransforms" class="rule_wrapper commentedout">
141 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
142 <pre class="rule">
143 .box_3dtransforms {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
144 -webkit-perspective: <b g="0">300</b>; <span class="comment">/* Safari 4+, Chrome 12+ <span class="endcomment">*/</span></span>
145 -moz-perspective: <b g="0">300</b>; <span class="comment">/* Firefox 10+ <span class="endcomment">*/</span></span>
bc24802 @uxder Added 3dtransforms.
uxder authored
146 -ms-perspective: <b g="0">300</b>; <span class="comment">/* IE10+ <span class="endcomment">*/</span></span>
52eaa34 @paulirish Removing Firefox 3.6 support. It has reached EOL. Details below:
authored
147 perspective: <b g="0">300</b>;
148 -webkit-transform: rotateY(<b g="1">180</b>deg); -webkit-transform-style: preserve-3d;
7f4978b @uxder move transform style to the right of rotateY
uxder authored
149 -moz-transform: rotateY(<b g="1">180</b>deg); -moz-transform-style: preserve-3d;
150 -ms-transform: rotateY(<b g="1">180</b>deg); -ms-transform-style: preserve-3d;
52eaa34 @paulirish Removing Firefox 3.6 support. It has reached EOL. Details below:
authored
151 transform: rotateY(<b g="1">180</b>deg); transform-style: preserve-3d;
bc24802 @uxder Added 3dtransforms.
uxder authored
152 }</pre>
153 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
154 </div>
155
ef157d8 @zoltan-dulac IE changes ... with filtering grouped.
zoltan-dulac authored
156
77b8162 @paulirish adding css transitions. it works beautifully!
authored
157 <div id="box_transition" class="rule_wrapper ">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
158 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
77b8162 @paulirish adding css transitions. it works beautifully!
authored
159 <pre class="rule">
160 .box_transition {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
161 -webkit-transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Safari 3.2+, Chrome <span class="endcomment">*/</span></span>
e1ade3e @mathiasbynens Add details on Firefox 16
mathiasbynens authored
162 -moz-transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Firefox 4-15 <span class="endcomment">*/</span></span>
d155495 @mathiasbynens Opera 12.50 will unprefix transitions
mathiasbynens authored
163 -o-transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Opera 10.5–12.00 <span class="endcomment">*/</span></span>
164 transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Firefox 16+, Opera 12.50+ <span class="endcomment">*/</span>
33a9bc8 @paulirish better spacing
authored
165 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
166 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
167 </div>
4a3463c @sneakyness copypasta
sneakyness authored
168
4325875 @paulirish only make stylesheets for real things. also a stupid test box for IE
authored
169
4e19107 @zoltan-dulac Added IE matrix stuff.
zoltan-dulac authored
170
a18e5eb @paulirish text-shadow.
authored
171 <div id="box_textshadow" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
172 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
a18e5eb @paulirish text-shadow.
authored
173 <pre class="rule">
174 .box_textshadow {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
175 text-shadow: <b g="0">1px</b> <b g="1">1px</b> <b g="2">3px</b> <b g="3" i="lHex" o="sHex">#888</b>; <span class="comment">/* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 <span class="endcomment">*/</span></span>
33a9bc8 @paulirish better spacing
authored
176 }</pre>
a18e5eb @paulirish text-shadow.
authored
177 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
178 </div>
179
180
10ffb87 @paulirish move opacity. fixes #28
authored
181 <div id="box_opacity" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
182 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
10ffb87 @paulirish move opacity. fixes #28
authored
183 <pre class="rule">
184 .box_opacity {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
185 opacity: <b g="0">0.9</b>; <span class="comment">/* Chrome 4+, Firefox 2+, Safari 3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+ <span class="endcomment">*/</span></span>
10ffb87 @paulirish move opacity. fixes #28
authored
186 filter: alpha(opacity=<b g="0" i="fraction" o="percent">90</b>); <span class="comment">/* IE6-IE8 <span class="endcomment">*/</span></span>
187 }</pre>
188 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
189 </div>
190
191
192
3729623 @paulirish box sizing yessss
authored
193 <div id="box_boxsizing" class="rule_wrapper">
194 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <span class="endcomment">*/</span></pre>
195 <pre class="rule">
196 * {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
197 -webkit-box-sizing: <b g="0">border-box</b>; <span class="comment">/* &lt;=iOS4, &lt;= Android 2.3 <span class="endcomment">*/</span></span>
198 -moz-box-sizing: <b g="0">border-box</b>; <span class="comment">/* Firefox 1+ <span class="endcomment">*/</span></span>
3729623 @paulirish box sizing yessss
authored
199 box-sizing: <b g="0">border-box</b>; <span class="comment">/* Chrome, IE8, Opera, Safari 5.1<span class="endcomment">*/</span></span>
200 }</pre>
201 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
202 </div>
203
204
aeddfdf @paulirish move bgsize to the bottom. add changelog.
authored
205 <div id="box_bgsize" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
206 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
aeddfdf @paulirish move bgsize to the bottom. add changelog.
authored
207 <pre class="rule">
208 .box_bgsize {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
209 -webkit-background-size: <b g="0">100% 100%</b>; <span class="comment">/* Safari 3-4 <span class="endcomment">*/</span></span>
210 background-size: <b g="0">100% 100%</b>; <span class="comment">/* Opera, IE9, Safari 5, Chrome, Firefox 4+ <span class="endcomment">*/</span></span>
aeddfdf @paulirish move bgsize to the bottom. add changelog.
authored
211 }</pre>
212 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
213 </div>
214
c947b70 @paulirish reformat column rules. also off by default.
authored
215 <div id="box_columns" class="rule_wrapper commentedout">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
216 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
d394b5b @hotmeteor Added columns support.
hotmeteor authored
217 <pre class="rule">
218 .box_columns {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
219 -webkit-column-count: <b g="0">2</b>; -webkit-column-gap: <b g="1">15px</b>; <span class="comment">/* Safari 3, Chrome<span class="endcomment">*/</span></span>
220 -moz-column-count: <b g="0">2</b>; -moz-column-gap: <b g="1">15px</b>; <span class="comment">/* Firefox 3.5+ <span class="endcomment">*/</span></span>
c947b70 @paulirish reformat column rules. also off by default.
authored
221 column-count: <b g="0">2</b>; column-gap: <b g="1">15px</b>; <span class="comment">/* Opera 11+<span class="endcomment">*/</span></span>
d394b5b @hotmeteor Added columns support.
hotmeteor authored
222 }</pre>
223 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
224 </div>
225
55961db @paulirish finish off working demo for animations.
authored
226 <div id="box_animation" class="rule_wrapper ">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
227 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
08fec1a @wookiehangover adding @keyframe
wookiehangover authored
228 <pre class="rule">
55961db @paulirish finish off working demo for animations.
authored
229 .box_animation&#58;hover {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
230 -webkit-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Safari 5, Chrome <span class="endcomment">*/</span></span>
e1ade3e @mathiasbynens Add details on Firefox 16
mathiasbynens authored
231 -moz-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Firefox 5-15 <span class="endcomment">*/</span></span>
d17bad8 Add -o-keyframes and -o-animation (Opera 12+)
Mike Taylor authored
232 -o-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Opera 12+ <span class="endcomment">*/</span></span>
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
233 animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Safari 5, Chrome, Firefox 16+ <span class="endcomment">*/</span></span>
392a519 @paulirish i fix animations all nice and nice.
authored
234 }
235
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
236 @-webkit-keyframes <b g="0">myanim</b> {
392a519 @paulirish i fix animations all nice and nice.
authored
237 <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
238 <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
239 <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
240 }
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
241 @-moz-keyframes <b g="0">myanim</b> {
392a519 @paulirish i fix animations all nice and nice.
authored
242 <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
243 <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
244 <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
245 }
d17bad8 Add -o-keyframes and -o-animation (Opera 12+)
Mike Taylor authored
246 @-o-keyframes <b g="0">myanim</b> {
247 <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
248 <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
249 <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
250 }
9b4fe07 @uxder add animation and keyframes. #99
uxder authored
251 @keyframes <b g="0">myanim</b> {
252 <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
253 <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
254 <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
255 }
392a519 @paulirish i fix animations all nice and nice.
authored
256 </pre>
08fec1a @wookiehangover adding @keyframe
wookiehangover authored
257 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
258 </div>
259
9425743 @paulirish matrix tool added. sweet.
authored
260 <script defer src="http://peterned.home.xs4all.nl/matrices/matrices.js"></script>
261
262 <div id="box_matrix" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
263 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
264
9425743 @paulirish matrix tool added. sweet.
authored
265 <div id="matrixbox">
266 <span id="save">
267 Oh hai :)
268 <br><br>
269 From <a href="http://peterned.home.xs4all.nl/matrices/">Peter Nederlof</a>
270 <a href="#1,0,0,1,0,0" class="reset">oh noes!</a>
271 </span>
272 <span id="play">
273 Manipulate me, please!
274 <span class="rotate">rotate</span>
275 <span class="scale">scale</span>
276 <span class="skewx">skew</span>
277 <span class="skewy">skew</span>
278
279 <span class="move">move</span>
280 </span>
281 </div>
282
283 <pre class="rule">
284 .matrix {
285 <div class="comment"><div id="output" class="declaration" style="min-height: 100px">Play for output ...</div></div>
286 }</pre>
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
287
9425743 @paulirish matrix tool added. sweet.
authored
288
289 </div>
290
291
0527f7f @paulirish Revert "no more @font-face"
authored
292 <div id="box_webfont" class="rule_wrapper">
293 <pre class="rule comment"><span class="comment">/* <a class="cb">[to clipboard]</a><!-- <a class="off">[toggle rule off]</a>--> <span class="endcomment">*/</span></span> </pre>
294 <pre class="rule">
295 @font-face {
296 font-family: '<b g="1">WebFont</b>';
297 src: url('<b g="0">myfont</b>.eot?#') format('eot'), <span class="comment">/* IE6–8 <span class="endcomment">*/</span></span>
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
298 url('<b g="0">myfont</b>.woff') format('woff'), <span class="comment">/* Firefox 3.6+, IE9, Chrome 6+, Safari 5.1+<span class="endcomment">*/</span></span>
299 url('<b g="0">myfont</b>.ttf') format('truetype'); <span class="comment">/* Safari 3—5, Chrome4+, Firefox 3.5, Opera 10+ <span class="endcomment">*/</span></span>
0527f7f @paulirish Revert "no more @font-face"
authored
300 }
301
302 </pre>
303 <!-- <pre class="rule comment commentclose"><span class="comment">/* */</span></pre> -->
304 </div>
cc57686 @mathiasbynens Add `tab-size`
mathiasbynens authored
305
306
307 <div id="box_tabsize" class="rule_wrapper">
308 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
309 <pre class="rule">
310 .box_tabsize {
311 -moz-tab-size: <b g="0">2</b>; <span class="comment">/* Firefox 4+ <span class="endcomment">*/</span></span>
312 -o-tab-size: <b g="0">2</b>; <span class="comment">/* Opera 10.60+ <span class="endcomment">*/</span></span>
313 tab-size: <b g="0">2</b>;
4aaf203 @mathiasbynens Move @font-face block to below the box stuff
mathiasbynens authored
314 }</pre>
315 <!-- <pre class="rule comment commentclose"><span class="comment">/* */</span></pre> -->
316 </div>
317
9425743 @paulirish matrix tool added. sweet.
authored
318
0ef5c51 @paulirish fixing footer
authored
319 <pre class="rule footer"><span class="comment">
037e6d0 @paulirish footer
authored
320
321
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
322 /*
44ba4a3 @paulirish footer and stylies
authored
323 btw- up/down keys work, along with your mouse wheel. ;)
8c3a396 @uxder text shadow is already in there so it's not coming soon.
uxder authored
324 coming soon.. extra css transforms (skew, scale) and more.
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
325 <a href="http://paulirish.com/2010/introducing-css3please/#comments">plz leave feedback here</a>.
97ce745 @paulirish note about github repo.
authored
326 also css3please is an open source project!. <a href="https://github.com/paulirish/css3please">report bugs or contribute!</a>
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
327
328 Notes:
77b8162 @paulirish adding css transitions. it works beautifully!
authored
329 + Multiple IE filters must be comma delimited in a single declaration. They are not additive in separate blocks.
ee7cfd5 Add another possible solution for gradients + rounded corners in IE9
timmywil authored
330 + IE9 starts to suck with filter-based gradients and rounded corners. Possible solutions are <a href="http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/">using SVG</a> or <a href="http://www.timmywillison.com/2011/Gradients-plus-border-radius-in-IE9.html">adding a wrapper</a>.
9e88ac5 @paulirish removing dropshadow filter
authored
331 + The closest thing to box-shadow for IE is <a href="http://msdn.microsoft.com/en-us/library/ms532979(v=VS.85).aspx">Blur with makeShadow</a> but you need a duplicate div.
36e7969 @paulirish stuff i did on a plane
authored
332 + The rotation transform ends up with a different transform-origin in IE. Look at heygrady's <a href="http://github.com/heygrady/transform">transform</a>
333 library and his <a href="http://wiki.github.com/heygrady/transform/correcting-transform-origin-and-translate-in-ie">excellent guide</a> for the best results.
d1d3301 @matthewlein Added Ceaser link to notes.
matthewlein authored
334 + If you’re doing transitions, Matthew Lein’s <a href="http://matthewlein.com/ceaser/">Ceaser</a> generates code with lots of presets, including the Penner equations.
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
335
80cf68d @mathiasbynens Don’t display non-functional “copy to clipboard” links if Flash is no…
mathiasbynens authored
336 &copy; 2010; a <a href="http://paulirish.com/">Paul Irish</a> and <a href="http://twitter.com/jon_neal">Jonathan Neal</a> joint, <small>in association w/ <a href="http://www.boazsender.com/">Boaz Sender</a> and <a href="http://www.useragentman.com/">Zoltan Hawryluk</a>.</small>
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
337
0176961 @paulirish inline the background clip stuff on one line. bgsize can be bunched i…
authored
338 if you like this, you'll probably also dig <a href="http://yayquery.com/">yayQuery</a> and <a href="//mothereffinghsl.com">mothereffinghsl.com</a>. <3
44ba4a3 @paulirish footer and stylies
authored
339 */
037e6d0 @paulirish footer
authored
340
341
342
2c9d511 @zoltan-dulac Added rotation stuff for IE - first phase (no translation midpoint en…
zoltan-dulac authored
343 </span>
037e6d0 @paulirish footer
authored
344 </pre>
09513b1 @paulirish google analtyics
authored
345
9e88ac5 @paulirish removing dropshadow filter
authored
346 <pre class="rule changelog">
52eaa34 @paulirish Removing Firefox 3.6 support. It has reached EOL. Details below:
authored
347 /*
9e88ac5 @paulirish removing dropshadow filter
authored
348 __Changelog__
9b4fe07 @uxder add animation and keyframes. #99
uxder authored
349 2012.06.06: Removed -ms prefixes from transition, animations and gradients.
3729623 @paulirish box sizing yessss
authored
350 2012.03.02: Added <a href="http://paulirish.com/2012/box-sizing-border-box-ftw/">box-sizing</a>. Woo!
b8e9766 @uxder update change log
uxder authored
351 2012.01.21: Added transform scale and 3d transforms.(thx <a href="https://github.com/uxder">uxder</a>)
45b0b7d Changelog Updated!
gitbase authored
352 2012.01.19: Linear Gradient Syntax <a href="https://github.com/paulirish/css3please/issues/78">Updated</a>. (thx <a href="http://cssdeck.com">cssdeck</a> and <a href="https://github.com/uxder">uxder</a>!)
cc57686 @mathiasbynens Add `tab-size`
mathiasbynens authored
353 2012.01.14: Added <code>tab-size</code>. (Blame <a href="http://mathiasbynens.be/">Mathias</a> if anything breaks!)
9425743 @paulirish matrix tool added. sweet.
authored
354 2011.10.23: Added the sweet matrix manip demo from <a href="http://peterned.home.xs4all.nl/matrices/">Peter Nederlof</a>. Thx Peter!
392a519 @paulirish i fix animations all nice and nice.
authored
355 2011.10.18: <a href="http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/">CSS Animations</a> added. (thx <a href="//twitter.com/wookiehangover">wookiehangover</a>!)
11a0b74 @paulirish reversed changelog order.
authored
356 2011.07.27: Added multicolumn. (thx <a href="https://twitter.com/hotmeteor" target="_blank">hotmeteor</a>!)
357 2011.04.12: Added gradient for IE10! (thx <a href="https://github.com/Calvein" target="_blank">calvein</a>!)
358 2011.04.11: Added <a href="https://developer.mozilla.org/en/CSS/background-clip" target="_blank">background-clip</a> for the border-radius rule (thx <a href="//twitter.com/matthewlein" target="_blank">matthewlein</a>!).
359 2011.04.09: Simplified and corrected MS gradient filter syntax. (thanks <a href="https://github.com/thedavidmeister" target="_blank">david meister</a>)
360 2011.04.07: Added <a href="https://developer.mozilla.org/en/CSS/background-size" target="_blank">background-size</a> (thx codler!).
15daf58 @matthewlein And now I looked at the order for the first time.
matthewlein authored
361 2011.03.26: Added Ceaser link.
11a0b74 @paulirish reversed changelog order.
authored
362 2011.03.15: Added linear gradients for Opera 11.10. (Thanks, <a href="http://miketaylr.com/" target="_blank">Mike</a>!)
363 2012.03.01: Went one year into the future to make a minor text change. Phew!
364 2011.02.22: Browser support updated.
365 2011.02.20: Tab key support added (good idea, iszak)
366 2011.02.20: Fixed longstanding rgba NaN bug.
367 2011.02.16: Fixed IE filter sizingMethod (moved to the end) after maybe 10 bug reports for it. (Whoops.)
368 2011.02.10: New gradient syntax (Thx <a href="http://samhuri.net/" target="_blank">Sami</a>). Update @font-face syntax.
369 2011.01.05: Removed unneeded <code>-ms-filter</code> declarations and added unprefixed <code>linear-gradient</code>. (Thx <a href="http://mathiasbynens.be/" target="_blank">Mathias</a>)
370 2010.11.19: Better handling of users without Flash. (Thx <a href="http://mathiasbynens.be/" target="_blank">Mathias</a>)
371 2010.11.06: Toggle to light skin (Thx <a href="http://curtisblackwell.com/" target="_blank">Curtis Blackwell</a>!). IE9 Transform added. Clipboard only grabs rules, no selector.
372 2010.10.05: Unprefixed transitions, transforms
373 2010.06.02: Clipboard click strips comments
3d56c5b @mathiasbynens Add a Gruntfile and use concatenated + minified versions of JS and CSS
mathiasbynens authored
374 2010.05.03: IE Rotation bug fixed. (Thx <a href="http://www.joshuabradley.co.uk/" target="_blank">Joshua</a>!)
11a0b74 @paulirish reversed changelog order.
authored
375 2010.04.11: text-shadow added.
376 2010.04.05: <a href="http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/" target="_blank">Real rotation</a> in IE (Thx Zoltan!). Added transition. No more DropShadow for IE (it's crap)
377 2010.04.04: New copy to clipboard style. Better mousewheel support.
378 2010.03.25: Fixed the gradient flipflop. Fixed positioning bug.
379
9e88ac5 @paulirish removing dropshadow filter
authored
380 */
381
382
383
384
385 </pre>
386
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
387 </body>
08fec1a @wookiehangover adding @keyframe
wookiehangover authored
388 </html>
Something went wrong with that request. Please try again.