Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

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