Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 358 lines (296 sloc) 21.278 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 /* -------------------------------------------------------------
5c0f4a2 @paulirish recommend using autoprefixer instead.
authored
30 CSS3, Please!
b573c27 @paulirish writing style tags instead of inline style edits. mucho better
authored
31 ===================================================
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
32
5c0f4a2 @paulirish recommend using autoprefixer instead.
authored
33 Update: We recommend using <a href="http://css-tricks.com/autoprefixer/">Autoprefixer</a> instead of CSS3Please.
34
b573c27 @paulirish writing style tags instead of inline style edits. mucho better
authored
35 You can edit the underlined values in this css file,
36 but don't worry about making sure the corresponding
37 values match, that's all done automagically for you.
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
38
b573c27 @paulirish writing style tags instead of inline style edits. mucho better
authored
39 Whenever you want, you can copy the whole or part of
40 this page and paste it into your own stylesheet.
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
41 ------------------------------------------------------------- */
42
43 </pre>
44
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
45 <div id="box_round" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
46 <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
47 <pre class="rule">
39d716a @boazsender finished the browser support comments
boazsender authored
48 .box_round {
79bff6e @romamatusevich Remove support for old browsers
romamatusevich authored
49 border-radius: <b g="0">12px</b>; <span class="comment">/* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ <span class="endcomment">*/</span></span>
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
50
51 <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>
3c7b2b9 Update `background-clip` information
albert scheiner authored
52 background-clip: padding-box; <span class="comment">/* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ <span class="endcomment">*/</span></span>
878c6c0 @paulirish changeup rotation rules - thx zomigi
authored
53 }</pre>
54 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
55 </div>
40e79e5 @paulirish disable complex rounding
authored
56 <!--
878c6c0 @paulirish changeup rotation rules - thx zomigi
authored
57 <div id="box_round_complex" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
58 <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
59 <pre class="rule">
60 .box_round {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
61 -moz-border-radius: <b g="0">8px 8px 0px 0px</b>; <span class="comment">/* Firefox 1+ <span class="endcomment">*/</span></span>
62 -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
63 -webkit-border-top-right-radius: <b g="2" readonly>8px</b>;
64 -webkit-border-bottom-right-radius: <b g="3" readonly>0px</b>;
65 -webkit-border-bottom-left-radius: <b g="4" readonly>0px</b>;
eee1e6d @alrra Minor improvements
alrra authored
66 border-radius: <b g="0">8px 8px 0px 0px</b>; <span class="comment">/* Chrome, IE 9+, Opera 10.50+, Safari 5+ <span class="endcomment">*/</span></span>
33a9bc8 @paulirish better spacing
authored
67 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
68 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
69 </div>
40e79e5 @paulirish disable complex rounding
authored
70 -->
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
71
72 <div id="box_shadow" class="rule_wrapper">
1f561f5 Add `inset` toggle for `box-shadow`
Ryan authored
73 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="inset">[toggle inset on]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
7093576 @paulirish whitespace. tabs to spaces and rule indentation
authored
74 <pre class="rule">
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
75 .box_shadow {
eee1e6d @alrra Minor improvements
alrra authored
76 -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">/* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 <span class="endcomment">*/</span></span>
77 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">/* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ <span class="endcomment">*/</span></span>
33a9bc8 @paulirish better spacing
authored
78 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
79 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
80 </div>
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
81
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
82 <div id="box_gradient" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
83 <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
84 <pre class="rule">
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
85 .box_gradient {
58c36fc Or probably even better fix
Max Degterev authored
86 background-color: <b g="0" i="lHex">#444444</b>;
37bdeb1 @paulirish chrome 26 support: unprefixed transitions/gradients
authored
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-25, iOS 5+, Safari 5.1+ <span class="endcomment">*/</span></span>
79bff6e @romamatusevich Remove support for old browsers
romamatusevich authored
88 background-image: linear-gradient(to bottom, <b g="0" i="lHex">#444444</b>, <b g="1" i="lHex">#999999</b>); <span class="comment">/* Chrome 26, Firefox 16+, IE 10+, Opera <span class="endcomment">*/</span></span>
33a9bc8 @paulirish better spacing
authored
89 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
90 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
91 </div>
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
92
fa187b6 @zoltan-dulac IE Support ... completed!! (I think ... I hope ... Oh God, it was pa…
zoltan-dulac authored
93
94
95 <div id="box_rgba" class="rule_wrapper commentedout">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
96 <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
97 <pre class="rule">
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
98 .box_rgba {
1ba0371 @thedavidmeister edited .box_rgba to correct capitalization in the IE filter, removed …
thedavidmeister authored
99 background-color: transparent;
eee1e6d @alrra Minor improvements
alrra authored
100 background-color: <b g="0" i="s2aHex" o="aCh">rgba(180, 180, 144, 0.6)</b>; <span class="comment">/* Chrome, Firefox 3+, IE 9+, Opera 10.10+, Safari 3+ <span class="endcomment">*/</span></span>
33a9bc8 @paulirish better spacing
authored
101 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
102 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
103 </div>
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
104
eb3a3d5 @paulirish comment color fixed in IE8
authored
105 <div id="box_rotate" class="rule_wrapper commentedout">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
106 <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
107 <pre class="rule">
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
108 .box_rotate {
79bff6e @romamatusevich Remove support for old browsers
romamatusevich authored
109 -webkit-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Chrome, Opera 15+, Safari 3.1+ <span class="endcomment">*/</span></span>
eee1e6d @alrra Minor improvements
alrra authored
110 -ms-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* IE 9 <span class="endcomment">*/</span></span>
79bff6e @romamatusevich Remove support for old browsers
romamatusevich authored
111 transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Firefox 16+, IE 10+, Opera <span class="endcomment">*/</span></span>
33a9bc8 @paulirish better spacing
authored
112 }</pre>
94cc614 @zoltan-dulac sylvester
zoltan-dulac authored
113 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
114 </div>
115
a69e008 @uxder Add css transform scale. Note that it's not additive to transform ro…
uxder authored
116 <div id="box_scale" class="rule_wrapper commentedout">
117 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
118 <pre class="rule">
119 .box_scale {
79bff6e @romamatusevich Remove support for old browsers
romamatusevich authored
120 -webkit-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Chrome, Opera 15+, Safari 3.1+ <span class="endcomment">*/</span></span>
eee1e6d @alrra Minor improvements
alrra authored
121 -ms-transform: scale(<b g="0">0.8</b>); <span class="comment">/* IE 9 <span class="endcomment">*/</span></span>
79bff6e @romamatusevich Remove support for old browsers
romamatusevich authored
122 transform: scale(<b g="0">0.8</b>); <span class="comment">/* Firefox 16+, IE 10+, Opera <span class="endcomment">*/</span></span>
a69e008 @uxder Add css transform scale. Note that it's not additive to transform ro…
uxder authored
123 }</pre>
124 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
125 </div>
126
bc24802 @uxder Added 3dtransforms.
uxder authored
127 <div id="box_3dtransforms" class="rule_wrapper commentedout">
128 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
129 <pre class="rule">
130 .box_3dtransforms {
6000e89 @desandro Add px unit for perspective
desandro authored
131 -webkit-perspective: <b g="0">300px</b>; <span class="comment">/* Chrome 12+, Safari 4+ <span class="endcomment">*/</span></span>
132 -ms-perspective: <b g="0">300px</b>; <span class="comment">/* IE 10 <span class="endcomment">*/</span></span>
133 perspective: <b g="0">300px</b>;
52eaa34 @paulirish Removing Firefox 3.6 support. It has reached EOL. Details below:
authored
134 -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
135 -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
136 transform: rotateY(<b g="1">180</b>deg); transform-style: preserve-3d;
bc24802 @uxder Added 3dtransforms.
uxder authored
137 }</pre>
138 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
139 </div>
140
ef157d8 @zoltan-dulac IE changes ... with filtering grouped.
zoltan-dulac authored
141
77b8162 @paulirish adding css transitions. it works beautifully!
authored
142 <div id="box_transition" class="rule_wrapper ">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
143 <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
144 <pre class="rule">
145 .box_transition {
79bff6e @romamatusevich Remove support for old browsers
romamatusevich authored
146 -webkit-transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 <span class="endcomment">*/</span></span>
3c73f25 @paulirish merge
authored
147 transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ <span class="endcomment">*/</span></span>
33a9bc8 @paulirish better spacing
authored
148 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
149 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
150 </div>
4a3463c @sneakyness copypasta
sneakyness authored
151
4325875 @paulirish only make stylesheets for real things. also a stupid test box for IE
authored
152
4e19107 @zoltan-dulac Added IE matrix stuff.
zoltan-dulac authored
153
a18e5eb @paulirish text-shadow.
authored
154 <div id="box_textshadow" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
155 <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
156 <pre class="rule">
157 .box_textshadow {
eee1e6d @alrra Minor improvements
alrra authored
158 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">/* Chrome, Firefox 3.5+, IE 10+, Opera 9+, Safari 1+ <span class="endcomment">*/</span></span>
33a9bc8 @paulirish better spacing
authored
159 }</pre>
a18e5eb @paulirish text-shadow.
authored
160 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
161 </div>
162
163
10ffb87 @paulirish move opacity. fixes #28
authored
164 <div id="box_opacity" 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>
10ffb87 @paulirish move opacity. fixes #28
authored
166 <pre class="rule">
167 .box_opacity {
eee1e6d @alrra Minor improvements
alrra authored
168 opacity: <b g="0">0.9</b>; <span class="comment">/* Android 2.1+, Chrome 4+, Firefox 2+, IE 9+, iOS 3.2+, Opera 9+, Safari 3.1+ <span class="endcomment">*/</span></span>
10ffb87 @paulirish move opacity. fixes #28
authored
169 }</pre>
170 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
171 </div>
172
173
174
3729623 @paulirish box sizing yessss
authored
175 <div id="box_boxsizing" class="rule_wrapper">
176 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <span class="endcomment">*/</span></pre>
177 <pre class="rule">
178 * {
eee1e6d @alrra Minor improvements
alrra authored
179 -webkit-box-sizing: <b g="0">border-box</b>; <span class="comment">/* Android &le; 2.3, iOS &le; 4 <span class="endcomment">*/</span></span>
f8a91cb @redpik Update index.html
redpik authored
180 -moz-box-sizing: <b g="0">border-box</b>; <span class="comment">/* Firefox &le; 28 <span class="endcomment">*/</span></span>
181 box-sizing: <b g="0">border-box</b>; <span class="comment">/* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 <span class="endcomment">*/</span></span>
3729623 @paulirish box sizing yessss
authored
182 }</pre>
183 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
184 </div>
185
186
aeddfdf @paulirish move bgsize to the bottom. add changelog.
authored
187 <div id="box_bgsize" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
188 <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
189 <pre class="rule">
190 .box_bgsize {
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
191 -webkit-background-size: <b g="0">100% 100%</b>; <span class="comment">/* Safari 3-4 <span class="endcomment">*/</span></span>
eee1e6d @alrra Minor improvements
alrra authored
192 background-size: <b g="0">100% 100%</b>; <span class="comment">/* Chrome, Firefox 4+, IE 9+, Opera, Safari 5+ <span class="endcomment">*/</span></span>
aeddfdf @paulirish move bgsize to the bottom. add changelog.
authored
193 }</pre>
194 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
195 </div>
196
c947b70 @paulirish reformat column rules. also off by default.
authored
197 <div id="box_columns" class="rule_wrapper commentedout">
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 on]</a> <span class="endcomment">*/</span></pre>
d394b5b @hotmeteor Added columns support.
hotmeteor authored
199 <pre class="rule">
200 .box_columns {
eee1e6d @alrra Minor improvements
alrra authored
201 -webkit-column-count: <b g="0">2</b>; -webkit-column-gap: <b g="1">15px</b>; <span class="comment">/* Chrome, Safari 3 <span class="endcomment">*/</span></span>
7cdd933 @mathiasbynens Avoid the use of abbreviations for browser names consistently
mathiasbynens authored
202 -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>
eee1e6d @alrra Minor improvements
alrra authored
203 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
204 }</pre>
205 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
206 </div>
207
55961db @paulirish finish off working demo for animations.
authored
208 <div id="box_animation" class="rule_wrapper ">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
209 <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
210 <pre class="rule">
55961db @paulirish finish off working demo for animations.
authored
211 .box_animation&#58;hover {
79bff6e @romamatusevich Remove support for old browsers
romamatusevich authored
212 -webkit-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Chrome, Opera 15+, Safari 5+ <span class="endcomment">*/</span></span>
213 animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Chrome, Firefox 16+, IE 10+, Opera <span class="endcomment">*/</span></span>
392a519 @paulirish i fix animations all nice and nice.
authored
214 }
215
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
216 @-webkit-keyframes <b g="0">myanim</b> {
392a519 @paulirish i fix animations all nice and nice.
authored
217 <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
218 <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
219 <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
220 }
9b4fe07 @uxder add animation and keyframes. #99
uxder authored
221 @keyframes <b g="0">myanim</b> {
222 <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
223 <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
224 <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
225 }
392a519 @paulirish i fix animations all nice and nice.
authored
226 </pre>
08fec1a @wookiehangover adding @keyframe
wookiehangover authored
227 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
228 </div>
229
9425743 @paulirish matrix tool added. sweet.
authored
230 <script defer src="http://peterned.home.xs4all.nl/matrices/matrices.js"></script>
231
232 <div id="box_matrix" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
233 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
234
9425743 @paulirish matrix tool added. sweet.
authored
235 <div id="matrixbox">
236 <span id="save">
237 Oh hai :)
238 <br><br>
239 From <a href="http://peterned.home.xs4all.nl/matrices/">Peter Nederlof</a>
240 <a href="#1,0,0,1,0,0" class="reset">oh noes!</a>
241 </span>
242 <span id="play">
243 Manipulate me, please!
244 <span class="rotate">rotate</span>
245 <span class="scale">scale</span>
246 <span class="skewx">skew</span>
247 <span class="skewy">skew</span>
248 <span class="move">move</span>
249 </span>
250 </div>
251
252 <pre class="rule">
253 .matrix {
254 <div class="comment"><div id="output" class="declaration" style="min-height: 100px">Play for output ...</div></div>
255 }</pre>
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
256
9425743 @paulirish matrix tool added. sweet.
authored
257
258 </div>
259
260
0527f7f @paulirish Revert "no more @font-face"
authored
261 <div id="box_webfont" class="rule_wrapper">
262 <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>
eee1e6d @alrra Minor improvements
alrra authored
263 <pre class="rule">
0527f7f @paulirish Revert "no more @font-face"
authored
264 @font-face {
265 font-family: '<b g="1">WebFont</b>';
eee1e6d @alrra Minor improvements
alrra authored
266 src: url('<b g="0">myfont</b>.woff') format('woff'), <span class="comment">/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ <span class="endcomment">*/</span></span>
267 url('<b g="0">myfont</b>.ttf') format('truetype'); <span class="comment">/* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 <span class="endcomment">*/</span></span>
268 }</pre>
0527f7f @paulirish Revert "no more @font-face"
authored
269 <!-- <pre class="rule comment commentclose"><span class="comment">/* */</span></pre> -->
270 </div>
cc57686 @mathiasbynens Add `tab-size`
mathiasbynens authored
271
272
273 <div id="box_tabsize" class="rule_wrapper">
274 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
275 <pre class="rule">
276 .box_tabsize {
277 -moz-tab-size: <b g="0">2</b>; <span class="comment">/* Firefox 4+ <span class="endcomment">*/</span></span>
278 tab-size: <b g="0">2</b>;
4aaf203 @mathiasbynens Move @font-face block to below the box stuff
mathiasbynens authored
279 }</pre>
280 <!-- <pre class="rule comment commentclose"><span class="comment">/* */</span></pre> -->
281 </div>
282
9425743 @paulirish matrix tool added. sweet.
authored
283
0ef5c51 @paulirish fixing footer
authored
284 <pre class="rule footer"><span class="comment">
037e6d0 @paulirish footer
authored
285
286
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
287 /*
44ba4a3 @paulirish footer and stylies
authored
288 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
289 coming soon.. extra css transforms (skew, scale) and more.
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
290 <a href="http://paulirish.com/2010/introducing-css3please/#comments">plz leave feedback here</a>.
97ce745 @paulirish note about github repo.
authored
291 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
292
293 Notes:
8c7c2b4 @timmywil Change timmy's website address
timmywil authored
294 + 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
295 + 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>
296 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
297 + 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
298
cdaf4cc @jonathantneal Remove IE6-8 support
jonathantneal authored
299 &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
300
eee1e6d @alrra Minor improvements
alrra authored
301 if you like this, you'll probably also dig <a href="http://yayquery.com/">yayQuery</a> and <a href="//mothereffinghsl.com">mothereffinghsl.com</a>. &lt;3
44ba4a3 @paulirish footer and stylies
authored
302 */
037e6d0 @paulirish footer
authored
303
304
305
2c9d511 @zoltan-dulac Added rotation stuff for IE - first phase (no translation midpoint en…
zoltan-dulac authored
306 </span>
037e6d0 @paulirish footer
authored
307 </pre>
09513b1 @paulirish google analtyics
authored
308
9e88ac5 @paulirish removing dropshadow filter
authored
309 <pre class="rule changelog">
52eaa34 @paulirish Removing Firefox 3.6 support. It has reached EOL. Details below:
authored
310 /*
9e88ac5 @paulirish removing dropshadow filter
authored
311 __Changelog__
84f6685 @alrra Update Opera 12.10+ prefix information
alrra authored
312
313 2013.04.05: Opera 12.10 supports unprefixed CSS animations, gradients, transforms, and transitions.
314 2013.04.05: Removed -webkit-background-clip (thx <a href="https://github.com/scheinercc">Albert Scheiner</a>).
bdcba47 @alrra Correct a date in the changelog
alrra authored
315 2013.02.11: Added inset toggle for box-shadow (thx <a href="https://github.com/ryanttb">Ryan</a>).
e75945a @rdsn Fix typo
rdsn authored
316 2013.02.05: Chrome 26 support for unprefix transitions and unprefixed gradients.
bdcba47 @alrra Correct a date in the changelog
alrra authored
317 2012.12.31: Removed -moz-background-clip (thx <a href="https://github.com/Mottie">Mottie</a>).
cdaf4cc @jonathantneal Remove IE6-8 support
jonathantneal authored
318 2012.08.29: Removed IE6-8 support.
9b4fe07 @uxder add animation and keyframes. #99
uxder authored
319 2012.06.06: Removed -ms prefixes from transition, animations and gradients.
3729623 @paulirish box sizing yessss
authored
320 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
321 2012.01.21: Added transform scale and 3d transforms.(thx <a href="https://github.com/uxder">uxder</a>)
45b0b7d Changelog Updated!
gitbase authored
322 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
323 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
324 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
325 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
326 2011.07.27: Added multicolumn. (thx <a href="https://twitter.com/hotmeteor" target="_blank">hotmeteor</a>!)
327 2011.04.12: Added gradient for IE10! (thx <a href="https://github.com/Calvein" target="_blank">calvein</a>!)
328 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>!).
329 2011.04.09: Simplified and corrected MS gradient filter syntax. (thanks <a href="https://github.com/thedavidmeister" target="_blank">david meister</a>)
330 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
331 2011.03.26: Added Ceaser link.
11a0b74 @paulirish reversed changelog order.
authored
332 2011.03.15: Added linear gradients for Opera 11.10. (Thanks, <a href="http://miketaylr.com/" target="_blank">Mike</a>!)
333 2012.03.01: Went one year into the future to make a minor text change. Phew!
334 2011.02.22: Browser support updated.
335 2011.02.20: Tab key support added (good idea, iszak)
336 2011.02.20: Fixed longstanding rgba NaN bug.
337 2011.02.16: Fixed IE filter sizingMethod (moved to the end) after maybe 10 bug reports for it. (Whoops.)
338 2011.02.10: New gradient syntax (Thx <a href="http://samhuri.net/" target="_blank">Sami</a>). Update @font-face syntax.
339 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>)
340 2010.11.19: Better handling of users without Flash. (Thx <a href="http://mathiasbynens.be/" target="_blank">Mathias</a>)
341 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.
342 2010.10.05: Unprefixed transitions, transforms
343 2010.06.02: Clipboard click strips comments
3d56c5b @mathiasbynens Add a Gruntfile and use concatenated + minified versions of JS and CSS
mathiasbynens authored
344 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
345 2010.04.11: text-shadow added.
346 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)
347 2010.04.04: New copy to clipboard style. Better mousewheel support.
cdaf4cc @jonathantneal Remove IE6-8 support
jonathantneal authored
348 2010.03.25: Fixed the gradient flipflop. Fixed positioning bug.
9e88ac5 @paulirish removing dropshadow filter
authored
349 */
350
351
352
353
354 </pre>
355
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
356 </body>
08fec1a @wookiehangover adding @keyframe
wookiehangover authored
357 </html>
Something went wrong with that request. Please try again.