Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 190 lines (167 sloc) 5.943 kb
ccc50dc Force ltr direction on rendering element to prevent incorrect positionin...
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.