Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 385 lines (319 sloc) 24.399 kb
1534f058 » paulirish
2010-04-02 readonly support
1 <!DOCTYPE html>
f92a6b8d » jonathantneal
2010-02-01 New engine
2 <html>
3 <head>
80cf68d7 » mathiasbynens
2010-11-19 Don’t display non-functional “copy to clipboard” links if Flash is no…
4 <meta charset="UTF-8">
7093576c » paulirish
2010-03-09 whitespace. tabs to spaces and rule indentation
5 <title>CSS3 Please! The Cross-Browser CSS3 Rule Generator</title>
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
6
9425743e » paulirish
2011-10-23 matrix tool added. sweet.
7 <link rel="stylesheet" href="http://peterned.home.xs4all.nl/matrices/matrices.css">
92db5870 »
2012-02-09 Added ColorPicker
8 <link rel="stylesheet" href="css/colorpicker.css">
80cf68d7 » mathiasbynens
2010-11-19 Don’t display non-functional “copy to clipboard” links if Flash is no…
9 <link rel="stylesheet" href="css/stylesheet.css" media="screen">
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
10
403adb23 » mathiasbynens
2011-01-05 Removed unneeded -ms-filter declarations. Updated which browsers supp…
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>
ef157d89 » zoltan-dulac
2010-03-30 IE changes ... with filtering grouped.
12
80cf68d7 » mathiasbynens
2010-11-19 Don’t display non-functional “copy to clipboard” links if Flash is no…
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... -->
aa9300ca »
2012-03-01 Fix color picker
14 <script src="javascript/jquery-1.7.1.min.js"></script>
80cf68d7 » mathiasbynens
2010-11-19 Don’t display non-functional “copy to clipboard” links if Flash is no…
15 <script src="javascript/jquery.plugins.min.js"></script>
16 <script src="javascript/javascript.js"></script>
17 <script src="javascript/cb_plugins.js"></script>
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
18 </head>
cc673d4f » paulirish
2010-04-02 clipboard work
19
f92a6b8d » jonathantneal
2010-02-01 New engine
20 <body>
21
bb2fb3aa » paulirish
2010-03-27 added back sandbox wrap.. zoltan wiped it out. :)
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>
66ac21c8 » paulirish
2012-03-03 box sizing yessss
28 This element will receive instant changes as you edit the CSS rules on the left. Enjoy!
bb2fb3aa » paulirish
2010-03-27 added back sandbox wrap.. zoltan wiped it out. :)
29 </p>
30 </div>
f4a60b88 » curtisblackwell
2010-11-06 Changed index.php back to index.html
31 <pre class="rule comment">/* <a class="off">[toggle styling]</a><span class="endcomment"> */</span></pre>
f92a6b8d » jonathantneal
2010-02-01 New engine
32 </div>
33
34 <pre class="rule">
35 /* -------------------------------------------------------------
b573c274 » paulirish
2010-03-08 writing style tags instead of inline style edits. mucho better
36 CSS3, Please! The Cross-Browser CSS3 Rule Generator
37 ===================================================
f92a6b8d » jonathantneal
2010-02-01 New engine
38
b573c274 » paulirish
2010-03-08 writing style tags instead of inline style edits. mucho better
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.
f92a6b8d » jonathantneal
2010-02-01 New engine
42
b573c274 » paulirish
2010-03-08 writing style tags instead of inline style edits. mucho better
43 Whenever you want, you can copy the whole or part of
44 this page and paste it into your own stylesheet.
f92a6b8d » jonathantneal
2010-02-01 New engine
45 ------------------------------------------------------------- */
46
47 </pre>
48
453fc0ff » sneakyness
2010-02-09 added really un-DRY copypaste
49 <div id="box_round" class="rule_wrapper">
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
50 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
7093576c » paulirish
2010-03-09 whitespace. tabs to spaces and rule indentation
51 <pre class="rule">
39d716aa » boazsender
2010-03-09 finished the browser support comments
52 .box_round {
cb168bc7 » paulirish
2012-01-17 fixing html entity. fixes #80. cleanup a few ie10 compat refs.
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>
47819ddd » paulirish
2011-08-30 update order for happiness.
54 -moz-border-radius: <b g="0">12px</b>; <span class="comment">/* FF1-3.6 <span class="endcomment">*/</span></span>
dcac9217 » paulirish
2011-05-22 browser support for broder radius in android. thx snook!
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>
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
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;
878c6c07 » paulirish
2010-07-16 changeup rotation rules - thx zomigi
59 }</pre>
60 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
61 </div>
40e79e5d » paulirish
2010-08-13 disable complex rounding
62 <!--
878c6c07 » paulirish
2010-07-16 changeup rotation rules - thx zomigi
63 <div id="box_round_complex" class="rule_wrapper">
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
64 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
878c6c07 » paulirish
2010-07-16 changeup rotation rules - thx zomigi
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>;
403adb23 » mathiasbynens
2011-01-05 Removed unneeded -ms-filter declarations. Updated which browsers supp…
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>
33a9bc8a » paulirish
2010-04-11 better spacing
73 }</pre>
8cd3d0f1 » paulirish
2010-03-09 stupid ff shitty comments
74 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0ff » sneakyness
2010-02-09 added really un-DRY copypaste
75 </div>
40e79e5d » paulirish
2010-08-13 disable complex rounding
76 -->
453fc0ff » sneakyness
2010-02-09 added really un-DRY copypaste
77
78 <div id="box_shadow" class="rule_wrapper">
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
79 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
7093576c » paulirish
2010-03-09 whitespace. tabs to spaces and rule indentation
80 <pre class="rule">
f92a6b8d » jonathantneal
2010-02-01 New engine
81 .box_shadow {
e2b67485 »
2012-02-08 Added box-shadow spread #69
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>
33a9bc8a » paulirish
2010-04-11 better spacing
85 }</pre>
8cd3d0f1 » paulirish
2010-03-09 stupid ff shitty comments
86 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0ff » sneakyness
2010-02-09 added really un-DRY copypaste
87 </div>
f92a6b8d » jonathantneal
2010-02-01 New engine
88
453fc0ff » sneakyness
2010-02-09 added really un-DRY copypaste
89 <div id="box_gradient" class="rule_wrapper">
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
90 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
7093576c » paulirish
2010-03-09 whitespace. tabs to spaces and rule indentation
91 <pre class="rule">
f92a6b8d » jonathantneal
2010-02-01 New engine
92 .box_gradient {
40c5c42a » paulirish
2010-04-06 fallback color for gradients
93 background-color: <b g="0" i="s2Hex">#444444</b>;
8aae765d » mathiasbynens
2011-04-07 Simplify the old-school -webkit-gradient() syntax. Fixes #42.
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>
fddbc1ce » davidcalhoun
2011-08-31 updating comment with iOS 5 info (maybe wait until official iOS5 rele…
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>
a4be1900 » paulirish
2011-04-29 reorder the gradients
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>
ca3ece83 »
2012-01-18 Update liner-gradient syntax
99 background-image: linear-gradient(to bottom, <b g="0" i="s2Hex">#444444</b>, <b g="1" i="s2Hex">#999999</b>);</span>
33a9bc8a » paulirish
2010-04-11 better spacing
100 }</pre>
8cd3d0f1 » paulirish
2010-03-09 stupid ff shitty comments
101 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0ff » sneakyness
2010-02-09 added really un-DRY copypaste
102 </div>
f92a6b8d » jonathantneal
2010-02-01 New engine
103
fa187b6e » zoltan-dulac
2010-03-31 IE Support ... completed!! (I think ... I hope ... Oh God, it was pai…
104
105
106 <div id="box_rgba" class="rule_wrapper commentedout">
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
107 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
7093576c » paulirish
2010-03-09 whitespace. tabs to spaces and rule indentation
108 <pre class="rule">
f92a6b8d » jonathantneal
2010-02-01 New engine
109 .box_rgba {
1ba03717 » thedavidmeister
2011-04-09 edited .box_rgba to correct capitalization in the IE filter, removed …
110 background-color: transparent;
bf1271c2 » paulirish
2010-10-05 ie9 comments
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>
1ba03717 » thedavidmeister
2011-04-09 edited .box_rgba to correct capitalization in the IE filter, removed …
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;
33a9bc8a » paulirish
2010-04-11 better spacing
114 }</pre>
8cd3d0f1 » paulirish
2010-03-09 stupid ff shitty comments
115 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0ff » sneakyness
2010-02-09 added really un-DRY copypaste
116 </div>
f92a6b8d » jonathantneal
2010-02-01 New engine
117
eb3a3d58 » paulirish
2010-03-09 comment color fixed in IE8
118 <div id="box_rotate" class="rule_wrapper commentedout">
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
119 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
7093576c » paulirish
2010-03-09 whitespace. tabs to spaces and rule indentation
120 <pre class="rule">
f92a6b8d » jonathantneal
2010-02-01 New engine
121 .box_rotate {
7093576c » paulirish
2010-03-09 whitespace. tabs to spaces and rule indentation
122 -webkit-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Saf3.1+, Chrome <span class="endcomment">*/</span></span>
47819ddd » paulirish
2011-08-30 update order for happiness.
123 -moz-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* FF3.5+ <span class="endcomment">*/</span></span>
faa507bf » paulirish
2010-11-06 mstransform added. fixes #11. also changelog update.
124 -ms-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* IE9 <span class="endcomment">*/</span></span>
47819ddd » paulirish
2011-08-30 update order for happiness.
125 -o-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Opera 10.5 <span class="endcomment">*/</span></span>
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
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>
153c1b3c » paulirish
2011-02-16 sizingMethod goes on the end
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>
1534f058 » paulirish
2010-04-02 readonly support
129 zoom: 1;
33a9bc8a » paulirish
2010-04-11 better spacing
130 }</pre>
94cc6149 » zoltan-dulac
2010-03-28 sylvester
131 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
132 </div>
133
a69e008d »
2012-01-19 Add css transform scale. Note that it's not additive to transform rot…
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
bc248024 »
2012-01-19 Added 3dtransforms.
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>
7f4978be »
2012-01-21 move transform style to the right of rotateY
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;
bc248024 »
2012-01-19 Added 3dtransforms.
161 }</pre>
162 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
163 </div>
164
ef157d89 » zoltan-dulac
2010-03-30 IE changes ... with filtering grouped.
165
77b81621 » paulirish
2010-04-05 adding css transitions. it works beautifully!
166 <div id="box_transition" class="rule_wrapper ">
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
167 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
77b81621 » paulirish
2010-04-05 adding css transitions. it works beautifully!
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>
a71f2d93 » paulirish
2011-08-15 props should go in length order.
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>
cb168bc7 » paulirish
2012-01-17 fixing html entity. fixes #80. cleanup a few ie10 compat refs.
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>
a71f2d93 » paulirish
2011-08-15 props should go in length order.
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>
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
174 transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>;
33a9bc8a » paulirish
2010-04-11 better spacing
175 }</pre>
8cd3d0f1 » paulirish
2010-03-09 stupid ff shitty comments
176 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
453fc0ff » sneakyness
2010-02-09 added really un-DRY copypaste
177 </div>
4a3463c9 » sneakyness
2010-02-01 copypasta
178
43258753 » paulirish
2010-03-09 only make stylesheets for real things. also a stupid test box for IE
179
4e191074 » zoltan-dulac
2010-03-26 Added IE matrix stuff.
180
a18e5eb6 » paulirish
2010-04-11 text-shadow.
181 <div id="box_textshadow" class="rule_wrapper">
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
182 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
a18e5eb6 » paulirish
2010-04-11 text-shadow.
183 <pre class="rule">
184 .box_textshadow {
e6c008b9 » Calvein
2011-09-27 Added IE10 in the comment of text-shadow
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>
33a9bc8a » paulirish
2010-04-11 better spacing
186 }</pre>
a18e5eb6 » paulirish
2010-04-11 text-shadow.
187 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
188 </div>
189
190
10ffb874 » paulirish
2011-11-08 move opacity. fixes #28
191 <div id="box_opacity" class="rule_wrapper">
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
192 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
10ffb874 » paulirish
2011-11-08 move opacity. fixes #28
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
66ac21c8 » paulirish
2012-03-03 box sizing yessss
203 <div id="box_boxsizing" class="rule_wrapper">
204 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <span class="endcomment">*/</span></pre>
205 <pre class="rule">
206 * {
207 -webkit-box-sizing: <b g="0">border-box</b>; <span class="comment">/* <=iOS4, <= Android 2.3 <span class="endcomment">*/</span></span>
208 -moz-box-sizing: <b g="0">border-box</b>; <span class="comment">/* FF1+ <span class="endcomment">*/</span></span>
209 box-sizing: <b g="0">border-box</b>; <span class="comment">/* Chrome, IE8, Opera, Safari 5.1<span class="endcomment">*/</span></span>
210 }</pre>
211 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
212 </div>
213
214
aeddfdfc » paulirish
2011-04-07 move bgsize to the bottom. add changelog.
215 <div id="box_bgsize" class="rule_wrapper">
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
216 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
aeddfdfc » paulirish
2011-04-07 move bgsize to the bottom. add changelog.
217 <pre class="rule">
218 .box_bgsize {
0176961b » paulirish
2011-04-12 inline the background clip stuff on one line. bgsize can be bunched i…
219 -webkit-background-size: <b g="0">100% 100%</b>; <span class="comment">/* Saf3-4 <span class="endcomment">*/</span></span>
a71f2d93 » paulirish
2011-08-15 props should go in length order.
220 -moz-background-size: <b g="0">100% 100%</b>; <span class="comment">/* FF3.6 <span class="endcomment">*/</span></span>
0176961b » paulirish
2011-04-12 inline the background clip stuff on one line. bgsize can be bunched i…
221 background-size: <b g="0">100% 100%</b>; <span class="comment">/* Opera, IE9, Saf5, Chrome, FF4 <span class="endcomment">*/</span></span>
aeddfdfc » paulirish
2011-04-07 move bgsize to the bottom. add changelog.
222 }</pre>
223 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
224 </div>
225
c947b704 » paulirish
2011-07-27 reformat column rules. also off by default.
226 <div id="box_columns" class="rule_wrapper commentedout">
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
227 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
d394b5b9 » hotmeteor
2011-07-27 Added columns support.
228 <pre class="rule">
229 .box_columns {
c947b704 » paulirish
2011-07-27 reformat column rules. also off by default.
230 -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>
231 -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>
232 column-count: <b g="0">2</b>; column-gap: <b g="1">15px</b>; <span class="comment">/* Opera 11+<span class="endcomment">*/</span></span>
d394b5b9 » hotmeteor
2011-07-27 Added columns support.
233 }</pre>
234 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
235 </div>
236
55961db1 » paulirish
2011-10-18 finish off working demo for animations.
237 <div id="box_animation" class="rule_wrapper ">
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
238 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
08fec1a7 » wookiehangover
2011-10-18 adding @keyframe
239 <pre class="rule">
55961db1 » paulirish
2011-10-18 finish off working demo for animations.
240 .box_animation&#58;hover {
392a519d » paulirish
2011-10-18 i fix animations all nice and nice.
241 -webkit-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Saf5, Chrome <span class="endcomment">*/</span></span>
242 -moz-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* FF5+ <span class="endcomment">*/</span></span>
cb168bc7 » paulirish
2012-01-17 fixing html entity. fixes #80. cleanup a few ie10 compat refs.
243 -ms-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* IE10 <span class="endcomment">*/</span></span>
392a519d » paulirish
2011-10-18 i fix animations all nice and nice.
244 }
245
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
246 @-webkit-keyframes <b g="0">myanim</b> {
392a519d » paulirish
2011-10-18 i fix animations all nice and nice.
247 <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
248 <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
249 <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
250 }
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
251 @-moz-keyframes <b g="0">myanim</b> {
392a519d » paulirish
2011-10-18 i fix animations all nice and nice.
252 <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
253 <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
254 <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
255 }
256 @-ms-keyframes <b g="0">myanim</b> {
257 <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
258 <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
259 <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
260 }
261 </pre>
08fec1a7 » wookiehangover
2011-10-18 adding @keyframe
262 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
263 </div>
264
9425743e » paulirish
2011-10-23 matrix tool added. sweet.
265 <script defer src="http://peterned.home.xs4all.nl/matrices/matrices.js"></script>
266
267 <div id="box_matrix" class="rule_wrapper">
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
268 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
269
9425743e » paulirish
2011-10-23 matrix tool added. sweet.
270 <div id="matrixbox">
271 <span id="save">
272 Oh hai :)
273 <br><br>
274 From <a href="http://peterned.home.xs4all.nl/matrices/">Peter Nederlof</a>
275 <a href="#1,0,0,1,0,0" class="reset">oh noes!</a>
276 </span>
277 <span id="play">
278 Manipulate me, please!
279 <span class="rotate">rotate</span>
280 <span class="scale">scale</span>
281 <span class="skewx">skew</span>
282 <span class="skewy">skew</span>
283
284 <span class="move">move</span>
285 </span>
286 </div>
287
288 <pre class="rule">
289 .matrix {
290 <div class="comment"><div id="output" class="declaration" style="min-height: 100px">Play for output ...</div></div>
291 }</pre>
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
292
9425743e » paulirish
2011-10-23 matrix tool added. sweet.
293
294 </div>
295
296
cc576861 » mathiasbynens
2012-01-14 Add `tab-size`
297
298
299 <div id="box_tabsize" class="rule_wrapper">
300 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
301 <pre class="rule">
302 .box_tabsize {
303 -moz-tab-size: <b g="0">2</b>; <span class="comment">/* Firefox 4+ <span class="endcomment">*/</span></span>
304 -o-tab-size: <b g="0">2</b>; <span class="comment">/* Opera 10.60+ <span class="endcomment">*/</span></span>
305 tab-size: <b g="0">2</b>;
4aaf2036 » mathiasbynens
2012-01-14 Move @font-face block to below the box stuff
306 }</pre>
307 <!-- <pre class="rule comment commentclose"><span class="comment">/* */</span></pre> -->
308 </div>
309
9425743e » paulirish
2011-10-23 matrix tool added. sweet.
310
0ef5c51d » paulirish
2010-03-09 fixing footer
311 <pre class="rule footer"><span class="comment">
037e6d0d » paulirish
2010-03-09 footer
312
313
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
314 /*
44ba4a38 » paulirish
2010-03-09 footer and stylies
315 btw- up/down keys work, along with your mouse wheel. ;)
8c3a3966 »
2012-01-19 text shadow is already in there so it's not coming soon.
316 coming soon.. extra css transforms (skew, scale) and more.
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
317 <a href="http://paulirish.com/2010/introducing-css3please/#comments">plz leave feedback here</a>.
97ce7450 » paulirish
2011-01-07 note about github repo.
318 also css3please is an open source project!. <a href="https://github.com/paulirish/css3please">report bugs or contribute!</a>
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
319
320 Notes:
77b81621 » paulirish
2010-04-05 adding css transitions. it works beautifully!
321 + Multiple IE filters must be comma delimited in a single declaration. They are not additive in separate blocks.
ee7cfd50 » timmywil
2011-06-21 Add another possible solution for gradients + rounded corners in IE9
322 + 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>.
9e88ac5f » paulirish
2010-04-05 removing dropshadow filter
323 + 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.
36e79698 » paulirish
2010-06-07 stuff i did on a plane
324 + 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>
325 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.
d1d33018 » matthewlein
2011-03-26 Added Ceaser link to notes.
326 + 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.
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
327
80cf68d7 » mathiasbynens
2010-11-19 Don’t display non-functional “copy to clipboard” links if Flash is no…
328 &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>
c9f78765 » paulirish
2011-11-27 no more IE filter for gradients... thx tatsh for the poke.
329
0176961b » paulirish
2011-04-12 inline the background clip stuff on one line. bgsize can be bunched i…
330 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
44ba4a38 » paulirish
2010-03-09 footer and stylies
331 */
037e6d0d » paulirish
2010-03-09 footer
332
333
334
2c9d511d » zoltan-dulac
2010-03-26 Added rotation stuff for IE - first phase (no translation midpoint en…
335 </span>
037e6d0d » paulirish
2010-03-09 footer
336 </pre>
09513b18 » paulirish
2010-03-09 google analtyics
337
9e88ac5f » paulirish
2010-04-05 removing dropshadow filter
338 <pre class="rule changelog">
c66fdc60 »
2012-02-13 Disable color picker for now :) #86
339 /*
9e88ac5f » paulirish
2010-04-05 removing dropshadow filter
340 __Changelog__
11a0b747 » paulirish
2011-09-21 reversed changelog order.
341
66ac21c8 » paulirish
2012-03-03 box sizing yessss
342 2012.03.02: Added <a href="http://paulirish.com/2012/box-sizing-border-box-ftw/">box-sizing</a>. Woo!
b8e97668 »
2012-01-21 update change log
343 2012.01.21: Added transform scale and 3d transforms.(thx <a href="https://github.com/uxder">uxder</a>)
45b0b7d0 » gitbase
2012-01-20 Changelog Updated!
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>!)
cc576861 » mathiasbynens
2012-01-14 Add `tab-size`
345 2012.01.14: Added <code>tab-size</code>. (Blame <a href="http://mathiasbynens.be/">Mathias</a> if anything breaks!)
9425743e » paulirish
2011-10-23 matrix tool added. sweet.
346 2011.10.23: Added the sweet matrix manip demo from <a href="http://peterned.home.xs4all.nl/matrices/">Peter Nederlof</a>. Thx Peter!
392a519d » paulirish
2011-10-18 i fix animations all nice and nice.
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>!)
11a0b747 » paulirish
2011-09-21 reversed changelog order.
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!).
15daf584 » matthewlein
2011-03-26 And now I looked at the order for the first time.
353 2011.03.26: Added Ceaser link.
11a0b747 » paulirish
2011-09-21 reversed changelog order.
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
9e88ac5f » paulirish
2010-04-05 removing dropshadow filter
372 */
373
374
375
376
377 </pre>
378
f4a60b88 » curtisblackwell
2010-11-06 Changed index.php back to index.html
379 <div id="toggle_style"></div>
4e89f7bd » paulirish
2011-01-05 analytics got removed at some point.. weird.
380
381
3537218e » mathiasbynens
2012-01-14 Minor JavaScript cleanup
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>
4e89f7bd » paulirish
2011-01-05 analytics got removed at some point.. weird.
383
f92a6b8d » jonathantneal
2010-02-01 New engine
384 </body>
08fec1a7 » wookiehangover
2011-10-18 adding @keyframe
385 </html>
Something went wrong with that request. Please try again.