Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

190 lines (167 sloc) 5.943 kB
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Basic CSS3 Demos - in RTL</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
background: #EEE;
direction: rtl;
}
.section {
border: 1px solid #CCC;
padding: 1em 2em 2em;
margin: 3em;
background: #FFF;
}
.section h2 {
border: 1px solid #CCC;
position: relative;
/*left: -3em;*/
top: -2em;
background: #FFF;
font-size: 1em;
padding: .25em 1em;
margin: 0;
}
.section code {
display: block;
white-space: pre;
margin-left: 250px;
min-height: 100px;
color: #999;
overflow: auto;
}
.section code strong {
color: #000;
}
.test {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
border: 2px solid;
background: #FFF;
float: left;
position: relative;
behavior: url(../build/PIE.htc);
}
#test1 {
border-color: #c00;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
}
#test2 {
border-color: #090;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
-webkit-box-shadow: #999 0 .25em .5em;
-moz-box-shadow: #999 0 .25em .5em;
box-shadow: #999 0 .25em .5em;
}
#test3 {
border-color: #00c;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
-webkit-box-shadow: #999 0 .25em .5em;
-moz-box-shadow: #999 0 .25em .5em;
box-shadow: #999 0 .25em .5em;
background: #9CF;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9CF), color-stop(100%, #03C));
background: -moz-linear-gradient(#9CF, #03C);
background: linear-gradient(#9CF, #03C);
-pie-background: linear-gradient(#9CF, #03C);
}
#test4 {
border-color: #F99;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
-webkit-box-shadow: #999 0 .25em .5em;
-moz-box-shadow: #999 0 .25em .5em;
box-shadow: #999 0 .25em .5em;
background: #FFF url(icon-ie.png) no-repeat 50% 0;
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;
-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;
}
#test5 {
-webkit-border-image: url(border2.png) 15 stretch;
-moz-border-image: url(border2.png) 15 stretch;
border-image: url(border2.png) 15 fill stretch;
border: 15px solid transparent;
width: 180px;
}
</style>
</head>
<body>
<h1>RTL</h1>
<div class="section">
<h2>border-radius</h2>
<div class="test" id="test1">Cherry</div>
<code><strong>border-radius: 1em; /* Standard */
-moz-border-radius: 1em; /* Gecko */
-webkit-border-radius: 1em; /* WebKit */</strong></code>
</div>
<div class="section">
<h2>box-shadow</h2>
<div class="test" id="test2">Apple</div>
<code>border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
<strong>box-shadow: #999 0 .25em .5em;
-webkit-box-shadow: #999 0 .25em .5em;
-moz-box-shadow: #999 0 .25em .5em;</strong></code>
</div>
<div class="section">
<h2>linear-gradient</h2>
<div class="test" id="test3">Blueberry</div>
<code>border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
box-shadow: #999 0 .25em .5em;
-webkit-box-shadow: #999 0 .25em .5em;
-moz-box-shadow: #999 0 .25em .5em;
<strong>background: #9CF; /* Fallback */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#9CF), to(#03C));
background: -moz-linear-gradient(#9CF, #03C);
background: linear-gradient(#9CF, #03C);</strong></code>
</div>
<div class="section">
<h2>multiple background images</h2>
<div class="test" id="test4">Rhubarb</div>
<code>border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
box-shadow: #999 0 .25em .5em;
-webkit-box-shadow: #999 0 .25em .5em;
-moz-box-shadow: #999 0 .25em .5em;
<strong>background: url(icon-ie.png) no-repeat 50% 0 #FFF; /* Fallback */
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;</strong></code>
</div>
<div class="section">
<h2>border-image</h2>
<div class="test" id="test5">Pumpkin</div>
<code>border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
box-shadow: #999 0 .25em .5em;
-webkit-box-shadow: #999 0 .25em .5em;
-moz-box-shadow: #999 0 .25em .5em;
<strong>border-image: url(border2.png) 15 fill stretch;
-moz-border-image: url(border2.png) 15 stretch;
-webkit-border-image: url(border2.png) 15 stretch;
border: 15px solid transparent;</strong></code>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.