Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 190 lines (167 sloc) 5.943 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
10 html, body {
11 margin: 0;
12 padding: 0;
13 font-family: sans-serif;
14 font-size: 16px;
15 background: #EEE;
16 direction: rtl;
17 }
18
19 .section {
20 border: 1px solid #CCC;
21 padding: 1em 2em 2em;
22 margin: 3em;
23 background: #FFF;
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 <h1>RTL</h1>
120
121
122 <div class="section">
123 <h2>border-radius</h2>
124 <div class="test" id="test1">Cherry</div>
125 <code><strong>border-radius: 1em; /* Standard */
126 -moz-border-radius: 1em; /* Gecko */
127 -webkit-border-radius: 1em; /* WebKit */</strong></code>
128 </div>
129
130 <div class="section">
131 <h2>box-shadow</h2>
132 <div class="test" id="test2">Apple</div>
133 <code>border-radius: 1em;
134 -moz-border-radius: 1em;
135 -webkit-border-radius: 1em;
136 <strong>box-shadow: #999 0 .25em .5em;
137 -webkit-box-shadow: #999 0 .25em .5em;
138 -moz-box-shadow: #999 0 .25em .5em;</strong></code>
139 </div>
140
141 <div class="section">
142 <h2>linear-gradient</h2>
143 <div class="test" id="test3">Blueberry</div>
144 <code>border-radius: 1em;
145 -moz-border-radius: 1em;
146 -webkit-border-radius: 1em;
147 box-shadow: #999 0 .25em .5em;
148 -webkit-box-shadow: #999 0 .25em .5em;
149 -moz-box-shadow: #999 0 .25em .5em;
150 <strong>background: #9CF; /* Fallback */
151 background: -webkit-gradient(linear, 0 0, 0 100%, from(#9CF), to(#03C));
152 background: -moz-linear-gradient(#9CF, #03C);
153 background: linear-gradient(#9CF, #03C);</strong></code>
154 </div>
155
156 <div class="section">
157 <h2>multiple background images</h2>
158 <div class="test" id="test4">Rhubarb</div>
159 <code>border-radius: 1em;
160 -moz-border-radius: 1em;
161 -webkit-border-radius: 1em;
162 box-shadow: #999 0 .25em .5em;
163 -webkit-box-shadow: #999 0 .25em .5em;
164 -moz-box-shadow: #999 0 .25em .5em;
165 <strong>background: url(icon-ie.png) no-repeat 50% 0 #FFF; /* Fallback */
166 background: url(icon-ie.png) no-repeat 50% 0,
167 url(icon-firefox.png) no-repeat 0 0,
168 url(icon-chrome.png) no-repeat 100% 0,
169 url(icon-safari.png) no-repeat 0 100%,
170 url(icon-opera.png) no-repeat 100% 100% #FFF;</strong></code>
171 </div>
172
173 <div class="section">
174 <h2>border-image</h2>
175 <div class="test" id="test5">Pumpkin</div>
176 <code>border-radius: 1em;
177 -moz-border-radius: 1em;
178 -webkit-border-radius: 1em;
179 box-shadow: #999 0 .25em .5em;
180 -webkit-box-shadow: #999 0 .25em .5em;
181 -moz-box-shadow: #999 0 .25em .5em;
182 <strong>border-image: url(border2.png) 15 fill stretch;
183 -moz-border-image: url(border2.png) 15 stretch;
184 -webkit-border-image: url(border2.png) 15 stretch;
185 border: 15px solid transparent;</strong></code>
186 </div>
187
188
189 </body>
190 </html>
Something went wrong with that request. Please try again.