Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 386 lines (320 sloc) 24.467 kb
1534f05 @paulirish readonly support
authored
1 <!DOCTYPE html>
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
2 <html>
3 <head>
80cf68d @mathiasbynens Don’t display non-functional “copy to clipboard” links if Flash is not a...
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
9425743 @paulirish matrix tool added. sweet.
authored
7 <link rel="stylesheet" href="http://peterned.home.xs4all.nl/matrices/matrices.css">
dff2002 @uxder Added ColorPicker
uxder authored
8 <link rel="stylesheet" href="css/colorpicker.css">
80cf68d @mathiasbynens Don’t display non-functional “copy to clipboard” links if Flash is not a...
mathiasbynens authored
9 <link rel="stylesheet" href="css/stylesheet.css" media="screen">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
10
403adb2 @mathiasbynens Removed unneeded -ms-filter declarations. Updated which browsers support...
mathiasbynens authored
11 <script>if (((navigator.plugins && typeof navigator.plugins['Shockwave Flash'] == 'object') || (window.ActiveXObject && (new ActiveXObject('ShockwaveFlash.ShockwaveFlash')))) && location.protocol != 'file:') document.documentElement.className = 'flash';</script>
ef157d8 @zoltan-dulac IE changes ... with filtering grouped.
zoltan-dulac authored
12
80cf68d @mathiasbynens Don’t display non-functional “copy to clipboard” links if Flash is not a...
mathiasbynens authored
13 <!-- its only up here because the js does syntax highlighting so i want the js loaded before the page loads. bad practice i know... -->
e417dfc @uxder Fix color picker
uxder authored
14 <script src="javascript/jquery-1.7.1.min.js"></script>
80cf68d @mathiasbynens Don’t display non-functional “copy to clipboard” links if Flash is not a...
mathiasbynens authored
15 <script src="javascript/jquery.plugins.min.js"></script>
16 <script src="javascript/javascript.js"></script>
17 <script src="javascript/cb_plugins.js"></script>
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
18 </head>
cc673d4 @paulirish clipboard work
authored
19
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
20 <body>
21
bb2fb3a @paulirish added back sandbox wrap.. zoltan wiped it out. :)
authored
22 <div id="sandboxwrap">
23 <div id="sandbox">
24 <h1>
25 <abbr title="Cascading Style Sheets Level 3">CSS3</abbr>, please!
26 </h1>
27 <p>
28 This element will receive inline changes as you edit the CSS rules on the left. Enjoy!
29 </p>
30 </div>
f4a60b8 @curtisblackwell Changed index.php back to index.html
curtisblackwell authored
31 <pre class="rule comment">/* <a class="off">[toggle styling]</a><span class="endcomment"> */</span></pre>
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
32 </div>
33
34 <pre class="rule">
35 /* -------------------------------------------------------------
b573c27 @paulirish writing style tags instead of inline style edits. mucho better
authored
36 CSS3, Please! The Cross-Browser CSS3 Rule Generator
37 ===================================================
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
38
b573c27 @paulirish writing style tags instead of inline style edits. mucho better
authored
39 You can edit the underlined values in this css file,
40 but don't worry about making sure the corresponding
41 values match, that's all done automagically for you.
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
42
b573c27 @paulirish writing style tags instead of inline style edits. mucho better
authored
43 Whenever you want, you can copy the whole or part of
44 this page and paste it into your own stylesheet.
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
45 ------------------------------------------------------------- */
46
47 </pre>
48
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
49 <div id="box_round" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
50 <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
51 <pre class="rule">
39d716a @boazsender finished the browser support comments
boazsender authored
52 .box_round {
cb168bc @paulirish fixing html entity. fixes #80. cleanup a few ie10 compat refs.
authored
53 -webkit-border-radius: <b g="0">12px</b>; <span class="comment">/* Saf3-4, iOS 1-3.2, Android &le;1.6 <span class="endcomment">*/</span></span>
47819dd @paulirish update order for happiness.
authored
54 -moz-border-radius: <b g="0">12px</b>; <span class="comment">/* FF1-3.6 <span class="endcomment">*/</span></span>
dcac921 @paulirish browser support for broder radius in android. thx snook!
authored
55 border-radius: <b g="0">12px</b>; <span class="comment">/* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ <span class="endcomment">*/</span></span>
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
56
57 <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>
58 -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
878c6c0 @paulirish changeup rotation rules - thx zomigi
authored
59 }</pre>
60 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
61 </div>
40e79e5 @paulirish disable complex rounding
authored
62 <!--
878c6c0 @paulirish changeup rotation rules - thx zomigi
authored
63 <div id="box_round_complex" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
64 <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
65 <pre class="rule">
66 .box_round {
67 -moz-border-radius: <b g="0">8px 8px 0px 0px</b>; <span class="comment">/* FF1+ <span class="endcomment">*/</span></span>
68 -webkit-border-top-left-radius: <b g="1" readonly>8px</b>; <span class="comment">/* Saf3-4 <span class="endcomment">*/</span></span>
69 -webkit-border-top-right-radius: <b g="2" readonly>8px</b>;
70 -webkit-border-bottom-right-radius: <b g="3" readonly>0px</b>;
71 -webkit-border-bottom-left-radius: <b g="4" readonly>0px</b>;
403adb2 @mathiasbynens Removed unneeded -ms-filter declarations. Updated which browsers support...
mathiasbynens authored
72 border-radius: <b g="0">8px 8px 0px 0px</b>; <span class="comment">/* Opera 10.5, IE9, Saf5, Chrome <span class="endcomment">*/</span></span>
33a9bc8 @paulirish better spacing
authored
73 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
74 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
75 </div>
40e79e5 @paulirish disable complex rounding
authored
76 -->
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
77
78 <div id="box_shadow" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
79 <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
80 <pre class="rule">
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
81 .box_shadow {
f23c758 @uxder Added Box-shadow spread
uxder authored
82 -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="s2Hex" o="sHex">#ffffff</b>; <span class="comment">/* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ <span class="endcomment">*/</span></span>
83 -moz-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="s2Hex" o="sHex">#ffffff</b>; <span class="comment">/* FF3.5 - 3.6 <span class="endcomment">*/</span></span>
84 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="s2Hex" o="sHex">#ffffff</b>; <span class="comment">/* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 <span class="endcomment">*/</span></span>
33a9bc8 @paulirish better spacing
authored
85 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
86 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
87 </div>
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
88
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
89 <div id="box_gradient" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
90 <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
91 <pre class="rule">
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
92 .box_gradient {
40c5c42 @paulirish fallback color for gradients
authored
93 background-color: <b g="0" i="s2Hex">#444444</b>;
8aae765 @mathiasbynens Simplify the old-school -webkit-gradient() syntax. Fixes #42.
mathiasbynens authored
94 background-image: -webkit-gradient(linear, left top, left bottom, from(<b g="0" i="s2Hex">#444444</b>), to(<b g="1" i="s2Hex">#999999</b>)); <span class="comment">/* Saf4+, Chrome <span class="endcomment">*/</span></span>
fddbc1c @davidcalhoun updating comment with iOS 5 info (maybe wait until official iOS5 release...
davidcalhoun authored
95 background-image: -webkit-linear-gradient(top, <b g="0" i="s2Hex">#444444</b>, <b g="1" i="s2Hex">#999999</b>); <span class="comment">/* Chrome 10+, Saf5.1+, iOS 5+ <span class="endcomment">*/</span></span>
a4be190 @paulirish reorder the gradients
authored
96 background-image: -moz-linear-gradient(top, <b g="0" i="s2Hex">#444444</b>, <b g="1" i="s2Hex">#999999</b>); <span class="comment">/* FF3.6 <span class="endcomment">*/</span></span>
97 background-image: -ms-linear-gradient(top, <b g="0" i="s2Hex">#444444</b>, <b g="1" i="s2Hex">#999999</b>); <span class="comment">/* IE10 <span class="endcomment">*/</span></span>
98 background-image: -o-linear-gradient(top, <b g="0" i="s2Hex">#444444</b>, <b g="1" i="s2Hex">#999999</b>); <span class="comment">/* Opera 11.10+ <span class="endcomment">*/</span></span>
ca3ece8 @uxder Update liner-gradient syntax
uxder authored
99 background-image: linear-gradient(to bottom, <b g="0" i="s2Hex">#444444</b>, <b g="1" i="s2Hex">#999999</b>);</span>
33a9bc8 @paulirish better spacing
authored
100 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
101 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
102 </div>
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
103
fa187b6 @zoltan-dulac IE Support ... completed!! (I think ... I hope ... Oh God, it was painf...
zoltan-dulac authored
104
105
106 <div id="box_rgba" class="rule_wrapper commentedout">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
107 <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
108 <pre class="rule">
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
109 .box_rgba {
1ba0371 @thedavidmeister edited .box_rgba to correct capitalization in the IE filter, removed sin...
thedavidmeister authored
110 background-color: transparent;
bf1271c @paulirish ie9 comments
authored
111 background-color: <b g="0" i="s2aHex" o="aCh">rgba(180, 180, 144, 0.6)</b>; <span class="comment">/* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 <span class="endcomment">*/</span></span>
1ba0371 @thedavidmeister edited .box_rgba to correct capitalization in the IE filter, removed sin...
thedavidmeister authored
112 <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>
113 zoom: 1;
33a9bc8 @paulirish better spacing
authored
114 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
115 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
116 </div>
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
117
eb3a3d5 @paulirish comment color fixed in IE8
authored
118 <div id="box_rotate" class="rule_wrapper commentedout">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
119 <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
120 <pre class="rule">
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
121 .box_rotate {
7093576 @paulirish whitespace. tabs to spaces and rule indentation
authored
122 -webkit-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Saf3.1+, Chrome <span class="endcomment">*/</span></span>
47819dd @paulirish update order for happiness.
authored
123 -moz-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* FF3.5+ <span class="endcomment">*/</span></span>
faa507b @paulirish mstransform added. fixes #11. also changelog update.
authored
124 -ms-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* IE9 <span class="endcomment">*/</span></span>
47819dd @paulirish update order for happiness.
authored
125 -o-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Opera 10.5 <span class="endcomment">*/</span></span>
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
126 transform: rotate(<b g="0">7.5</b>deg);
127 <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
128 <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
129 zoom: 1;
33a9bc8 @paulirish better spacing
authored
130 }</pre>
94cc614 @zoltan-dulac sylvester
zoltan-dulac authored
131 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
132 </div>
133
a69e008 @uxder Add css transform scale. Note that it's not additive to transform rotat...
uxder authored
134 <div id="box_scale" class="rule_wrapper commentedout">
135 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
136 <pre class="rule">
137 .box_scale {
138 -webkit-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Saf3.1+, Chrome <span class="endcomment">*/</span></span>
139 -moz-transform: scale(<b g="0">0.8</b>); <span class="comment">/* FF3.5+ <span class="endcomment">*/</span></span>
140 -ms-transform: scale(<b g="0">0.8</b>); <span class="comment">/* IE9 <span class="endcomment">*/</span></span>
141 -o-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Opera 10.5+ <span class="endcomment">*/</span></span>
142 transform: scale(<b g="0">0.8</b>);
143 <span class="ie">filter: <span class="filter">progid:DXImageTransform.Microsoft.Matrix(<span class="comment">/* IE6–IE9 <span class="endcomment">*/</span></span>
144 <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>
145 }</pre>
146 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
147 </div>
148
bc24802 @uxder Added 3dtransforms.
uxder authored
149 <div id="box_3dtransforms" class="rule_wrapper commentedout">
150 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
151 <pre class="rule">
152 .box_3dtransforms {
153 -webkit-perspective: <b g="0">300</b>; <span class="comment">/* Saf4+, Chrome 12+ <span class="endcomment">*/</span></span>
154 -moz-perspective: <b g="0">300</b>; <span class="comment">/* FF10+ <span class="endcomment">*/</span></span>
155 -ms-perspective: <b g="0">300</b>; <span class="comment">/* IE10+ <span class="endcomment">*/</span></span>
7f4978b @uxder move transform style to the right of rotateY
uxder authored
156 perspective: <b g="0">300</b>;
157 -webkit-transform: rotateY(<b g="1">180</b>deg); -webkit-transform-style: preserve-3d;
158 -moz-transform: rotateY(<b g="1">180</b>deg); -moz-transform-style: preserve-3d;
159 -ms-transform: rotateY(<b g="1">180</b>deg); -ms-transform-style: preserve-3d;
160 transform: rotateY(<b g="1">180</b>deg); transform-style: preserve-3d;
bc24802 @uxder Added 3dtransforms.
uxder authored
161 }</pre>
162 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
163 </div>
164
ef157d8 @zoltan-dulac IE changes ... with filtering grouped.
zoltan-dulac authored
165
77b8162 @paulirish adding css transitions. it works beautifully!
authored
166 <div id="box_transition" class="rule_wrapper ">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
167 <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
168 <pre class="rule">
169 .box_transition {
170 -webkit-transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Saf3.2+, Chrome <span class="endcomment">*/</span></span>
a71f2d9 @paulirish props should go in length order.
authored
171 -moz-transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* FF4+ <span class="endcomment">*/</span></span>
cb168bc @paulirish fixing html entity. fixes #80. cleanup a few ie10 compat refs.
authored
172 -ms-transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* IE10 <span class="endcomment">*/</span></span>
a71f2d9 @paulirish props should go in length order.
authored
173 -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+ <span class="endcomment">*/</span></span>
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
174 transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>;
33a9bc8 @paulirish better spacing
authored
175 }</pre>
8cd3d0f @paulirish stupid ff shitty comments
authored
176 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0f @sneakyness added really un-DRY copypaste
sneakyness authored
177 </div>
4a3463c @sneakyness copypasta
sneakyness authored
178
4325875 @paulirish only make stylesheets for real things. also a stupid test box for IE
authored
179
4e19107 @zoltan-dulac Added IE matrix stuff.
zoltan-dulac authored
180
a18e5eb @paulirish text-shadow.
authored
181 <div id="box_textshadow" 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>
a18e5eb @paulirish text-shadow.
authored
183 <pre class="rule">
184 .box_textshadow {
e6c008b @Calvein Added IE10 in the comment of text-shadow
Calvein authored
185 text-shadow: <b g="0">1px</b> <b g="1">1px</b> <b g="2">3px</b> <b g="3" i="s2Hex" o="sHex">#888</b>; <span class="comment">/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 <span class="endcomment">*/</span></span>
33a9bc8 @paulirish better spacing
authored
186 }</pre>
a18e5eb @paulirish text-shadow.
authored
187 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
188 </div>
189
190
10ffb87 @paulirish move opacity. fixes #28
authored
191 <div id="box_opacity" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
192 <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
193 <pre class="rule">
194 .box_opacity {
195 opacity: <b g="0">0.9</b>; <span class="comment">/* Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+ <span class="endcomment">*/</span></span>
196 filter: alpha(opacity=<b g="0" i="fraction" o="percent">90</b>); <span class="comment">/* IE6-IE8 <span class="endcomment">*/</span></span>
197 }</pre>
198 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
199 </div>
200
201
202
aeddfdf @paulirish move bgsize to the bottom. add changelog.
authored
203 <div id="box_bgsize" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
204 <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
205 <pre class="rule">
206 .box_bgsize {
0176961 @paulirish inline the background clip stuff on one line. bgsize can be bunched in c...
authored
207 -webkit-background-size: <b g="0">100% 100%</b>; <span class="comment">/* Saf3-4 <span class="endcomment">*/</span></span>
a71f2d9 @paulirish props should go in length order.
authored
208 -moz-background-size: <b g="0">100% 100%</b>; <span class="comment">/* FF3.6 <span class="endcomment">*/</span></span>
0176961 @paulirish inline the background clip stuff on one line. bgsize can be bunched in c...
authored
209 background-size: <b g="0">100% 100%</b>; <span class="comment">/* Opera, IE9, Saf5, Chrome, FF4 <span class="endcomment">*/</span></span>
aeddfdf @paulirish move bgsize to the bottom. add changelog.
authored
210 }</pre>
211 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
212 </div>
213
c947b70 @paulirish reformat column rules. also off by default.
authored
214 <div id="box_columns" class="rule_wrapper commentedout">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
215 <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
216 <pre class="rule">
217 .box_columns {
c947b70 @paulirish reformat column rules. also off by default.
authored
218 -webkit-column-count: <b g="0">2</b>; -webkit-column-gap: <b g="1">15px</b>; <span class="comment">/* Saf3, Chrome<span class="endcomment">*/</span></span>
219 -moz-column-count: <b g="0">2</b>; -moz-column-gap: <b g="1">15px</b>; <span class="comment">/* FF3.5+ <span class="endcomment">*/</span></span>
220 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
221 }</pre>
222 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
223 </div>
224
55961db @paulirish finish off working demo for animations.
authored
225 <div id="box_animation" class="rule_wrapper ">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
226 <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
227 <pre class="rule">
55961db @paulirish finish off working demo for animations.
authored
228 .box_animation&#58;hover {
392a519 @paulirish i fix animations all nice and nice.
authored
229 -webkit-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Saf5, Chrome <span class="endcomment">*/</span></span>
230 -moz-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* FF5+ <span class="endcomment">*/</span></span>
cb168bc @paulirish fixing html entity. fixes #80. cleanup a few ie10 compat refs.
authored
231 -ms-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* IE10 <span class="endcomment">*/</span></span>
392a519 @paulirish i fix animations all nice and nice.
authored
232 }
233
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
234 @-webkit-keyframes <b g="0">myanim</b> {
392a519 @paulirish i fix animations all nice and nice.
authored
235 <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
236 <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
237 <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
238 }
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
239 @-moz-keyframes <b g="0">myanim</b> {
392a519 @paulirish i fix animations all nice and nice.
authored
240 <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
241 <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
242 <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
243 }
244 @-ms-keyframes <b g="0">myanim</b> {
245 <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
246 <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
247 <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
248 }
249 </pre>
08fec1a @wookiehangover adding @keyframe
wookiehangover authored
250 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
251 </div>
252
9425743 @paulirish matrix tool added. sweet.
authored
253 <script defer src="http://peterned.home.xs4all.nl/matrices/matrices.js"></script>
254
255 <div id="box_matrix" class="rule_wrapper">
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
256 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
257
9425743 @paulirish matrix tool added. sweet.
authored
258 <div id="matrixbox">
259 <span id="save">
260 Oh hai :)
261 <br><br>
262 From <a href="http://peterned.home.xs4all.nl/matrices/">Peter Nederlof</a>
263 <a href="#1,0,0,1,0,0" class="reset">oh noes!</a>
264 </span>
265 <span id="play">
266 Manipulate me, please!
267 <span class="rotate">rotate</span>
268 <span class="scale">scale</span>
269 <span class="skewx">skew</span>
270 <span class="skewy">skew</span>
271
272 <span class="move">move</span>
273 </span>
274 </div>
275
276 <pre class="rule">
277 .matrix {
278 <div class="comment"><div id="output" class="declaration" style="min-height: 100px">Play for output ...</div></div>
279 }</pre>
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
280
9425743 @paulirish matrix tool added. sweet.
authored
281
282 </div>
283
284
4aaf203 @mathiasbynens Move @font-face block to below the box stuff
mathiasbynens authored
285 <div id="box_webfont" class="rule_wrapper">
286 <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>
287 <pre class="rule">
288 @font-face {
289 font-family: '<b g="1">WebFont</b>';
290 src: url('<b g="0">myfont</b>.eot?#') format('eot'), <span class="comment">/* IE6–8 <span class="endcomment">*/</span></span>
291 url('<b g="0">myfont</b>.woff') format('woff'), <span class="comment">/* FF3.6+, IE9, Chrome6+, Saf5.1+<span class="endcomment">*/</span></span>
292 url('<b g="0">myfont</b>.ttf') format('truetype'); <span class="comment">/* Saf3—5, Chrome4+, FF3.5, Opera 10+ <span class="endcomment">*/</span></span>
cc57686 @mathiasbynens Add `tab-size`
mathiasbynens authored
293 }
294
295 </pre>
296 <!-- <pre class="rule comment commentclose"><span class="comment">/* */</span></pre> -->
297 </div>
298
299
300 <div id="box_tabsize" class="rule_wrapper">
301 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
302 <pre class="rule">
303 .box_tabsize {
304 -moz-tab-size: <b g="0">2</b>; <span class="comment">/* Firefox 4+ <span class="endcomment">*/</span></span>
305 -o-tab-size: <b g="0">2</b>; <span class="comment">/* Opera 10.60+ <span class="endcomment">*/</span></span>
306 tab-size: <b g="0">2</b>;
4aaf203 @mathiasbynens Move @font-face block to below the box stuff
mathiasbynens authored
307 }</pre>
308 <!-- <pre class="rule comment commentclose"><span class="comment">/* */</span></pre> -->
309 </div>
310
9425743 @paulirish matrix tool added. sweet.
authored
311
0ef5c51 @paulirish fixing footer
authored
312 <pre class="rule footer"><span class="comment">
037e6d0 @paulirish footer
authored
313
314
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
315 /*
44ba4a3 @paulirish footer and stylies
authored
316 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
317 coming soon.. extra css transforms (skew, scale) and more.
c9f7876 @paulirish no more IE filter for gradients... thx tatsh for the poke.
authored
318 <a href="http://paulirish.com/2010/introducing-css3please/#comments">plz leave feedback here</a>.
97ce745 @paulirish note about github repo.
authored
319 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
320
321 Notes:
77b8162 @paulirish adding css transitions. it works beautifully!
authored
322 + 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
323 + 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
324 + 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
325 + 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>
326 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
327 + 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
328
80cf68d @mathiasbynens Don’t display non-functional “copy to clipboard” links if Flash is not a...
mathiasbynens authored
329 &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
330
0176961 @paulirish inline the background clip stuff on one line. bgsize can be bunched in c...
authored
331 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
332 */
037e6d0 @paulirish footer
authored
333
334
335
2c9d511 @zoltan-dulac Added rotation stuff for IE - first phase (no translation midpoint enfor...
zoltan-dulac authored
336 </span>
037e6d0 @paulirish footer
authored
337 </pre>
09513b1 @paulirish google analtyics
authored
338
9e88ac5 @paulirish removing dropshadow filter
authored
339 <pre class="rule changelog">
1700751 @uxder Disable color picker for now :) #86
uxder authored
340 /*
9e88ac5 @paulirish removing dropshadow filter
authored
341 __Changelog__
11a0b74 @paulirish reversed changelog order.
authored
342
b8e9766 @uxder update change log
uxder authored
343 2012.01.21: Added transform scale and 3d transforms.(thx <a href="https://github.com/uxder">uxder</a>)
45b0b7d Changelog Updated!
gitbase authored
344 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
345 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
346 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
347 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
348 2011.07.27: Added multicolumn. (thx <a href="https://twitter.com/hotmeteor" target="_blank">hotmeteor</a>!)
349 2011.04.12: Added gradient for IE10! (thx <a href="https://github.com/Calvein" target="_blank">calvein</a>!)
350 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>!).
351 2011.04.09: Simplified and corrected MS gradient filter syntax. (thanks <a href="https://github.com/thedavidmeister" target="_blank">david meister</a>)
352 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
353 2011.03.26: Added Ceaser link.
11a0b74 @paulirish reversed changelog order.
authored
354 2011.03.15: Added linear gradients for Opera 11.10. (Thanks, <a href="http://miketaylr.com/" target="_blank">Mike</a>!)
355 2012.03.01: Went one year into the future to make a minor text change. Phew!
356 2011.02.22: Browser support updated.
357 2011.02.20: Tab key support added (good idea, iszak)
358 2011.02.20: Fixed longstanding rgba NaN bug.
359 2011.02.16: Fixed IE filter sizingMethod (moved to the end) after maybe 10 bug reports for it. (Whoops.)
360 2011.02.10: New gradient syntax (Thx <a href="http://samhuri.net/" target="_blank">Sami</a>). Update @font-face syntax.
361 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>)
362 2010.11.19: Better handling of users without Flash. (Thx <a href="http://mathiasbynens.be/" target="_blank">Mathias</a>)
363 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.
364 2010.10.05: Unprefixed transitions, transforms
365 2010.06.02: Clipboard click strips comments
366 2010.05.03: IE Rotation bug fixed. (Thx <a href="http://www.joshuabradley.co.uk/" target="_blank">Joshua</a>);
367 2010.04.11: text-shadow added.
368 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)
369 2010.04.04: New copy to clipboard style. Better mousewheel support.
370 2010.03.25: Fixed the gradient flipflop. Fixed positioning bug.
371
9e88ac5 @paulirish removing dropshadow filter
authored
372 */
373
374
375
376
377 </pre>
378
f4a60b8 @curtisblackwell Changed index.php back to index.html
curtisblackwell authored
379 <div id="toggle_style"></div>
4e89f7b @paulirish analytics got removed at some point.. weird.
authored
380
381
3537218 @mathiasbynens Minor JavaScript cleanup
mathiasbynens authored
382 <script>var _gaq=[['_setAccount','UA-15142720-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));</script>
4e89f7b @paulirish analytics got removed at some point.. weird.
authored
383
f92a6b8 @mikeescobedo New engine
mikeescobedo authored
384 </body>
08fec1a @wookiehangover adding @keyframe
wookiehangover authored
385 </html>
Something went wrong with that request. Please try again.