Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 188 lines (166 sloc) 5.92 kb
694dd02 Add testcase showing basic CSS3 features
Jason Johnston authored
1 <!DOCTYPE html>
2 <html>
3 <head>
4
5 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
6 <title>Basic CSS3 Demos</title>
7
8 <style type="text/css">
9
10 html, body {
11 margin: 0;
12 padding: 0;
13 font-family: sans-serif;
14 font-size: 16px;
15 background: #EEE;
16 }
17
18 .section {
19 border: 1px solid #CCC;
20 padding: 1em 2em 2em;
21 margin: 3em;
22 background: #FFF;
ad97e7a Prevent position flickering in basic test
Jason Johnston authored
23 position: relative;
694dd02 Add testcase showing basic CSS3 features
Jason Johnston authored
24 }
25
26 .section h2 {
27 border: 1px solid #CCC;
28 position: relative;
29 left: -3em;
30 top: -2em;
31 background: #FFF;
32 font-size: 1em;
33 padding: .25em 1em;
34 margin: 0;
35 }
36
37 .section code {
38 display: block;
39 white-space: pre;
40 margin-left: 250px;
41 min-height: 100px;
42 color: #999;
43 overflow: auto;
44 }
45 .section code strong {
46 color: #000;
47 }
48
49 .test {
50 width: 200px;
51 height: 100px;
52 line-height: 100px;
53 text-align: center;
54 border: 2px solid;
55 background: #FFF;
56 float: left;
57 position: relative;
58 behavior: url(../build/PIE.htc);
59 }
60
61 #test1 {
62 border-color: #c00;
63 -webkit-border-radius: 1em;
64 -moz-border-radius: 1em;
65 border-radius: 1em;
66 }
67
68 #test2 {
69 border-color: #090;
70 -webkit-border-radius: 1em;
71 -moz-border-radius: 1em;
72 border-radius: 1em;
73 -webkit-box-shadow: #999 0 .25em .5em;
74 -moz-box-shadow: #999 0 .25em .5em;
75 box-shadow: #999 0 .25em .5em;
76 }
77
78 #test3 {
79 border-color: #00c;
80 -webkit-border-radius: 1em;
81 -moz-border-radius: 1em;
82 border-radius: 1em;
83 -webkit-box-shadow: #999 0 .25em .5em;
84 -moz-box-shadow: #999 0 .25em .5em;
85 box-shadow: #999 0 .25em .5em;
86 background: #9CF;
87 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9CF), color-stop(100%, #03C));
88 background: -moz-linear-gradient(#9CF, #03C);
89 background: linear-gradient(#9CF, #03C);
90 -pie-background: linear-gradient(#9CF, #03C);
91 }
92
93 #test4 {
94 border-color: #F99;
95 -webkit-border-radius: 1em;
96 -moz-border-radius: 1em;
97 border-radius: 1em;
98 -webkit-box-shadow: #999 0 .25em .5em;
99 -moz-box-shadow: #999 0 .25em .5em;
100 box-shadow: #999 0 .25em .5em;
101 background: #FFF url(icon-ie.png) no-repeat 50% 0;
102 background: url(icon-ie.png) no-repeat 50% 0, url(icon-firefox.png) no-repeat 0 0, url(icon-chrome.png) no-repeat 100% 0, url(icon-safari.png) no-repeat 0 100%, url(icon-opera.png) no-repeat 100% 100% #FFF;
103 -pie-background: url(icon-ie.png) no-repeat 50% 0, url(icon-firefox.png) no-repeat 0 0, url(icon-chrome.png) no-repeat 100% 0, url(icon-safari.png) no-repeat 0 100%, url(icon-opera.png) no-repeat 100% 100% #FFF;
104 }
105
106 #test5 {
107 -webkit-border-image: url(border2.png) 15 stretch;
108 -moz-border-image: url(border2.png) 15 stretch;
109 border-image: url(border2.png) 15 fill stretch;
110 border: 15px solid transparent;
111 width: 180px;
112 }
113
114 </style>
115
116 </head>
117 <body>
118
119
120 <div class="section">
121 <h2>border-radius</h2>
122 <div class="test" id="test1">Cherry</div>
123 <code><strong>border-radius: 1em; /* Standard */
124 -moz-border-radius: 1em; /* Gecko */
125 -webkit-border-radius: 1em; /* WebKit */</strong></code>
126 </div>
127
128 <div class="section">
129 <h2>box-shadow</h2>
130 <div class="test" id="test2">Apple</div>
131 <code>border-radius: 1em;
132 -moz-border-radius: 1em;
133 -webkit-border-radius: 1em;
134 <strong>box-shadow: #999 0 .25em .5em;
135 -webkit-box-shadow: #999 0 .25em .5em;
136 -moz-box-shadow: #999 0 .25em .5em;</strong></code>
137 </div>
138
139 <div class="section">
140 <h2>linear-gradient</h2>
141 <div class="test" id="test3">Blueberry</div>
142 <code>border-radius: 1em;
143 -moz-border-radius: 1em;
144 -webkit-border-radius: 1em;
145 box-shadow: #999 0 .25em .5em;
146 -webkit-box-shadow: #999 0 .25em .5em;
147 -moz-box-shadow: #999 0 .25em .5em;
148 <strong>background: #9CF; /* Fallback */
149 background: -webkit-gradient(linear, 0 0, 0 100%, from(#9CF), to(#03C));
150 background: -moz-linear-gradient(#9CF, #03C);
151 background: linear-gradient(#9CF, #03C);</strong></code>
152 </div>
153
154 <div class="section">
155 <h2>multiple background images</h2>
156 <div class="test" id="test4">Rhubarb</div>
157 <code>border-radius: 1em;
158 -moz-border-radius: 1em;
159 -webkit-border-radius: 1em;
160 box-shadow: #999 0 .25em .5em;
161 -webkit-box-shadow: #999 0 .25em .5em;
162 -moz-box-shadow: #999 0 .25em .5em;
163 <strong>background: url(icon-ie.png) no-repeat 50% 0 #FFF; /* Fallback */
164 background: url(icon-ie.png) no-repeat 50% 0,
165 url(icon-firefox.png) no-repeat 0 0,
166 url(icon-chrome.png) no-repeat 100% 0,
167 url(icon-safari.png) no-repeat 0 100%,
168 url(icon-opera.png) no-repeat 100% 100% #FFF;</strong></code>
169 </div>
170
171 <div class="section">
172 <h2>border-image</h2>
173 <div class="test" id="test5">Pumpkin</div>
174 <code>border-radius: 1em;
175 -moz-border-radius: 1em;
176 -webkit-border-radius: 1em;
177 box-shadow: #999 0 .25em .5em;
178 -webkit-box-shadow: #999 0 .25em .5em;
179 -moz-box-shadow: #999 0 .25em .5em;
180 <strong>border-image: url(border2.png) 15 fill stretch;
181 -moz-border-image: url(border2.png) 15 stretch;
182 -webkit-border-image: url(border2.png) 15 stretch;
183 border: 15px solid transparent;</strong></code>
184 </div>
185
186
187 </body>
188 </html>
Something went wrong with that request. Please try again.