Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 378 lines (316 sloc) 23.022 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>
cdaf4cc @jonathantneal Remove IE6-8 support
jonathantneal authored
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>
cdaf4cc @jonathantneal Remove IE6-8 support
jonathantneal authored
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>
3445ac6 @codler Update browser detail on gradient
codler 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-12.00 <span class="endcomment">*/</span></span>
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+, IE10, Opera 12.50+ <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;
cdaf4cc @jonathantneal Remove IE6-8 support
jonathantneal 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>
33a9bc8 @paulirish better spacing
authored
103 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
104 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
105 </div>
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
106
eb3a3d5 @paulirish comment color fixed in IE8
authored
107 <div id="box_rotate" class="rule_wrapper commentedout">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
108 <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
109 <pre class="rule">
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
110 .box_rotate {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
111 -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
112 -moz-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Firefox 3.5-15 <span class="endcomment">*/</span></span>
cdaf4cc @jonathantneal Remove IE6-8 support
jonathantneal authored
113 -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
114 -o-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Opera 10.5-12.00 <span class="endcomment">*/</span></span>
af5ab81 @CalebKester Closing some wild span tags
CalebKester authored
115 transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Firefox 16+, Opera 12.50+ <span class="endcomment">*/</span></span>
33a9bc8 @paulirish better spacing
authored
116 }</pre>
94cc614 @zoltan-dulac sylvester
zoltan-dulac authored
117 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
118 </div>
119
a69e008 @uxder Add css transform scale. Note that it's not additive to transform ro…
uxder authored
120 <div id="box_scale" class="rule_wrapper commentedout">
121 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
122 <pre class="rule">
123 .box_scale {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
124 -webkit-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Safari 3.1+, Chrome <span class="endcomment">*/</span></span>
125 -moz-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Firefox 3.5+ <span class="endcomment">*/</span></span>
cdaf4cc @jonathantneal Remove IE6-8 support
jonathantneal authored
126 -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
127 -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
128 transform: scale(<b g="0">0.8</b>);
129 }</pre>
130 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
131 </div>
132
bc24802 @uxder Added 3dtransforms.
uxder authored
133 <div id="box_3dtransforms" class="rule_wrapper commentedout">
134 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
135 <pre class="rule">
136 .box_3dtransforms {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
137 -webkit-perspective: <b g="0">300</b>; <span class="comment">/* Safari 4+, Chrome 12+ <span class="endcomment">*/</span></span>
138 -moz-perspective: <b g="0">300</b>; <span class="comment">/* Firefox 10+ <span class="endcomment">*/</span></span>
bc24802 @uxder Added 3dtransforms.
uxder authored
139 -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
140 perspective: <b g="0">300</b>;
141 -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
142 -moz-transform: rotateY(<b g="1">180</b>deg); -moz-transform-style: preserve-3d;
143 -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
144 transform: rotateY(<b g="1">180</b>deg); transform-style: preserve-3d;
bc24802 @uxder Added 3dtransforms.
uxder authored
145 }</pre>
146 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
147 </div>
148
ef157d8 @zoltan-dulac IE changes ... with filtering grouped.
zoltan-dulac authored
149
77b8162 @paulirish adding css transitions. it works beautifully!
authored
150 <div id="box_transition" class="rule_wrapper ">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
151 <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
152 <pre class="rule">
153 .box_transition {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
154 -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
155 -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
156 -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>
af5ab81 @CalebKester Closing some wild span tags
CalebKester authored
157 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></span>
33a9bc8 @paulirish better spacing
authored
158 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
159 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
160 </div>
4a3463c @sneakyness copypasta
sneakyness authored
161
4325875 @paulirish only make stylesheets for real things. also a stupid test box for IE
authored
162
4e19107 @zoltan-dulac Added IE matrix stuff.
zoltan-dulac authored
163
a18e5eb @paulirish text-shadow.
authored
164 <div id="box_textshadow" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
165 <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
166 <pre class="rule">
167 .box_textshadow {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
168 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
169 }</pre>
a18e5eb @paulirish text-shadow.
authored
170 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
171 </div>
172
173
10ffb87 @paulirish move opacity. fixes #28
authored
174 <div id="box_opacity" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
175 <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
176 <pre class="rule">
177 .box_opacity {
cdaf4cc @jonathantneal Remove IE6-8 support
jonathantneal authored
178 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
179 }</pre>
180 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
181 </div>
182
183
184
3729623 @paulirish box sizing yessss
authored
185 <div id="box_boxsizing" class="rule_wrapper">
186 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <span class="endcomment">*/</span></pre>
187 <pre class="rule">
188 * {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
189 -webkit-box-sizing: <b g="0">border-box</b>; <span class="comment">/* &lt;=iOS4, &lt;= Android 2.3 <span class="endcomment">*/</span></span>
190 -moz-box-sizing: <b g="0">border-box</b>; <span class="comment">/* Firefox 1+ <span class="endcomment">*/</span></span>
cdaf4cc @jonathantneal Remove IE6-8 support
jonathantneal authored
191 box-sizing: <b g="0">border-box</b>; <span class="comment">/* Chrome, IE8+, Opera, Safari 5.1<span class="endcomment">*/</span></span>
3729623 @paulirish box sizing yessss
authored
192 }</pre>
193 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
194 </div>
195
196
aeddfdf @paulirish move bgsize to the bottom. add changelog.
authored
197 <div id="box_bgsize" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
198 <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
199 <pre class="rule">
200 .box_bgsize {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
201 -webkit-background-size: <b g="0">100% 100%</b>; <span class="comment">/* Safari 3-4 <span class="endcomment">*/</span></span>
cdaf4cc @jonathantneal Remove IE6-8 support
jonathantneal authored
202 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
203 }</pre>
204 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
205 </div>
206
c947b70 @paulirish reformat column rules. also off by default.
authored
207 <div id="box_columns" class="rule_wrapper commentedout">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
208 <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
209 <pre class="rule">
210 .box_columns {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
211 -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>
212 -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
213 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
214 }</pre>
215 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
216 </div>
217
55961db @paulirish finish off working demo for animations.
authored
218 <div id="box_animation" class="rule_wrapper ">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
219 <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
220 <pre class="rule">
55961db @paulirish finish off working demo for animations.
authored
221 .box_animation&#58;hover {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
222 -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
223 -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
224 -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
225 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
226 }
227
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
228 @-webkit-keyframes <b g="0">myanim</b> {
392a519 @paulirish i fix animations all nice and nice.
authored
229 <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
230 <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
231 <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
232 }
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
233 @-moz-keyframes <b g="0">myanim</b> {
392a519 @paulirish i fix animations all nice and nice.
authored
234 <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
235 <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
236 <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
237 }
d17bad8 Add -o-keyframes and -o-animation (Opera 12+)
Mike Taylor authored
238 @-o-keyframes <b g="0">myanim</b> {
239 <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
240 <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
241 <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
242 }
9b4fe07 @uxder add animation and keyframes. #99
uxder authored
243 @keyframes <b g="0">myanim</b> {
244 <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
245 <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
246 <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
247 }
392a519 @paulirish i fix animations all nice and nice.
authored
248 </pre>
08fec1a @wookiehangover adding @keyframe
wookiehangover authored
249 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
250 </div>
251
9425743 @paulirish matrix tool added. sweet.
authored
252 <script defer src="http://peterned.home.xs4all.nl/matrices/matrices.js"></script>
253
254 <div id="box_matrix" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
255 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
256
9425743 @paulirish matrix tool added. sweet.
authored
257 <div id="matrixbox">
258 <span id="save">
259 Oh hai :)
260 <br><br>
261 From <a href="http://peterned.home.xs4all.nl/matrices/">Peter Nederlof</a>
262 <a href="#1,0,0,1,0,0" class="reset">oh noes!</a>
263 </span>
264 <span id="play">
265 Manipulate me, please!
266 <span class="rotate">rotate</span>
267 <span class="scale">scale</span>
268 <span class="skewx">skew</span>
269 <span class="skewy">skew</span>
270
271 <span class="move">move</span>
272 </span>
273 </div>
274
275 <pre class="rule">
276 .matrix {
277 <div class="comment"><div id="output" class="declaration" style="min-height: 100px">Play for output ...</div></div>
278 }</pre>
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
279
9425743 @paulirish matrix tool added. sweet.
authored
280
281 </div>
282
283
0527f7f @paulirish Revert "no more @font-face"
authored
284 <div id="box_webfont" class="rule_wrapper">
285 <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>
286 <pre class="rule">
287 @font-face {
288 font-family: '<b g="1">WebFont</b>';
cdaf4cc @jonathantneal Remove IE6-8 support
jonathantneal authored
289 src: 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>
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
290 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
291 }
292
293 </pre>
294 <!-- <pre class="rule comment commentclose"><span class="comment">/* */</span></pre> -->
295 </div>
cc57686 @mathiasbynens Add `tab-size`
mathiasbynens authored
296
297
298 <div id="box_tabsize" class="rule_wrapper">
299 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
300 <pre class="rule">
301 .box_tabsize {
302 -moz-tab-size: <b g="0">2</b>; <span class="comment">/* Firefox 4+ <span class="endcomment">*/</span></span>
303 -o-tab-size: <b g="0">2</b>; <span class="comment">/* Opera 10.60+ <span class="endcomment">*/</span></span>
304 tab-size: <b g="0">2</b>;
4aaf203 @mathiasbynens Move @font-face block to below the box stuff
mathiasbynens authored
305 }</pre>
306 <!-- <pre class="rule comment commentclose"><span class="comment">/* */</span></pre> -->
307 </div>
308
9425743 @paulirish matrix tool added. sweet.
authored
309
0ef5c51 @paulirish fixing footer
authored
310 <pre class="rule footer"><span class="comment">
037e6d0 @paulirish footer
authored
311
312
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
313 /*
44ba4a3 @paulirish footer and stylies
authored
314 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
315 coming soon.. extra css transforms (skew, scale) and more.
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
316 <a href="http://paulirish.com/2010/introducing-css3please/#comments">plz leave feedback here</a>.
97ce745 @paulirish note about github repo.
authored
317 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
318
319 Notes:
8c7c2b4 @timmywil Change timmy's website address
timmywil authored
320 + IE&lt;10 browsers do not support gradients. 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://timmywillison.com/post/31419874608/gradients-plus-border-radius-in-ie9">using a filter with a wrapper div</a>.
36e7969 @paulirish stuff i did on a plane
authored
321 + 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>
322 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
323 + 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
324
cdaf4cc @jonathantneal Remove IE6-8 support
jonathantneal authored
325 &copy; 2012; 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
326
0176961 @paulirish inline the background clip stuff on one line. bgsize can be bunched i…
authored
327 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
328 */
037e6d0 @paulirish footer
authored
329
330
331
2c9d511 @zoltan-dulac Added rotation stuff for IE - first phase (no translation midpoint en…
zoltan-dulac authored
332 </span>
037e6d0 @paulirish footer
authored
333 </pre>
09513b1 @paulirish google analtyics
authored
334
9e88ac5 @paulirish removing dropshadow filter
authored
335 <pre class="rule changelog">
52eaa34 @paulirish Removing Firefox 3.6 support. It has reached EOL. Details below:
authored
336 /*
9e88ac5 @paulirish removing dropshadow filter
authored
337 __Changelog__
cdaf4cc @jonathantneal Remove IE6-8 support
jonathantneal authored
338 2012.08.29: Removed IE6-8 support.
9b4fe07 @uxder add animation and keyframes. #99
uxder authored
339 2012.06.06: Removed -ms prefixes from transition, animations and gradients.
3729623 @paulirish box sizing yessss
authored
340 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
341 2012.01.21: Added transform scale and 3d transforms.(thx <a href="https://github.com/uxder">uxder</a>)
45b0b7d Changelog Updated!
gitbase authored
342 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
343 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
344 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
345 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
346 2011.07.27: Added multicolumn. (thx <a href="https://twitter.com/hotmeteor" target="_blank">hotmeteor</a>!)
347 2011.04.12: Added gradient for IE10! (thx <a href="https://github.com/Calvein" target="_blank">calvein</a>!)
348 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>!).
349 2011.04.09: Simplified and corrected MS gradient filter syntax. (thanks <a href="https://github.com/thedavidmeister" target="_blank">david meister</a>)
350 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
351 2011.03.26: Added Ceaser link.
11a0b74 @paulirish reversed changelog order.
authored
352 2011.03.15: Added linear gradients for Opera 11.10. (Thanks, <a href="http://miketaylr.com/" target="_blank">Mike</a>!)
353 2012.03.01: Went one year into the future to make a minor text change. Phew!
354 2011.02.22: Browser support updated.
355 2011.02.20: Tab key support added (good idea, iszak)
356 2011.02.20: Fixed longstanding rgba NaN bug.
357 2011.02.16: Fixed IE filter sizingMethod (moved to the end) after maybe 10 bug reports for it. (Whoops.)
358 2011.02.10: New gradient syntax (Thx <a href="http://samhuri.net/" target="_blank">Sami</a>). Update @font-face syntax.
359 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>)
360 2010.11.19: Better handling of users without Flash. (Thx <a href="http://mathiasbynens.be/" target="_blank">Mathias</a>)
361 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.
362 2010.10.05: Unprefixed transitions, transforms
363 2010.06.02: Clipboard click strips comments
3d56c5b @mathiasbynens Add a Gruntfile and use concatenated + minified versions of JS and CSS
mathiasbynens authored
364 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
365 2010.04.11: text-shadow added.
366 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)
367 2010.04.04: New copy to clipboard style. Better mousewheel support.
cdaf4cc @jonathantneal Remove IE6-8 support
jonathantneal authored
368 2010.03.25: Fixed the gradient flipflop. Fixed positioning bug.
9e88ac5 @paulirish removing dropshadow filter
authored
369 */
370
371
372
373
374 </pre>
375
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
376 </body>
08fec1a @wookiehangover adding @keyframe
wookiehangover authored
377 </html>
Something went wrong with that request. Please try again.