Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
86 lines (72 sloc) 3.53 KB
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>Cross-Browser CSS3 Rule Generator</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" media="screen" title="Stylesheet" />
<script src="javascript/jquery-1.4.1.js" type="text/javascript"></script>
<script src="javascript/javascript.js" type="text/javascript"></script>
</head>
<body>
<div id="sandbox">
<h1>
Fun with <abbr title="Cascading Style Sheets Level 3">CSS3</abbr>
</h1>
<p>
This element with receive inline changes as you edit the CSS rules on the right. Enjoy!
</p>
</div>
<pre class="rule">
/* -------------------------------------------------------------
Cross-Browser CSS3 Rule Generator
=================================
You can edit the underlined values in this css file,
but don't worry about making sure the corresponding
values match, that's all done automagically for you.
Whenever you want, you can copy the whole or part of
this page and paste it into your own stylesheets.
------------------------------------------------------------- */
</pre>
<pre class="rule">
.box_round {
-moz-border-radius: <b g="0">12px</b>;
-webkit-border-radius: <b g="0">12px</b>;
border-radius: <b g="0">12px</b>;
}
</pre>
<pre class="rule">
.box_shadow {
-moz-box-shadow: <b g="0">0px</b> <b g="1">0px</b> <b g="2">4px</b> <b g="3" i="s2Hex" o="sHex">#0c1021</b>;
-webkit-box-shadow: <b g="0">0px</b> <b g="1">0px</b> <b g="2">4px</b> <b g="3" i="s2Hex" o="sHex">#0c1021</b>;
box-shadow: <b g="0">0px</b> <b g="1">0px</b> <b g="2">4px</b> <b g="3" i="s2Hex" o="sHex">#0c1021</b>;
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=<b g="0">0px</b>, OffY=<b g="1">0px</b>, Color='<b g="3" i="s2Hex" o="lHex">#0c1021</b>');
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=<b g="0">0px</b>, OffY=<b g="1">0px</b>, Color='<b g="3" i="s2Hex" o="lHex">#0c1021</b>')";
}
</pre>
<pre class="rule">
.box_gradient {
background-image: -moz-linear-gradient(top, <b g="0" i="s2Hex">#FFF</b>, <b g="1" i="s2Hex">#000</b>);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, <b g="0" i="s2Hex">#FFF</b>),color-stop(1, <b g="1" i="s2Hex">#000</b>));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='<b g="0" i="s2Hex">#FFFFFF</b>', endColorstr='<b g="1" i="s2Hex">#000000</b>');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='<b g="0" i="s2Hex">#FFFFFF</b>', endColorstr='<b g="1" i="s2Hex">#000000</b>')";
}
</pre>
<pre class="rule">
.box_rgba {
background-color: <b g="0" i="s2aHex" o="aCh">rgba(155, 151, 109, 0.15)</b>;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='<b g="0" i="s2aHex">#009B976D</b>',endColorstr='<b g="0" i="s2aHex">#009B976D</b>');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='<b g="0" i="s2aHex">#009B976D</b>',endColorstr='<b g="0" i="s2aHex">#009B976D</b>')";
}
</pre>
<pre class="rule">
.box_rotate {
-moz-transform: rotate(<b g="0">-4.5</b>deg);
-o-transform: rotate(<b g="0">-4.5</b>deg);
-webkit-transform: rotate(<b g="0">-4.5</b>deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=<b g="0" i="s2deg" o="rot">-0.05</b>);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=<b g="0" i="s2deg" o="rot">-0.05</b>)";
}
</pre>
<img id="guestbook" src="img/guestbook.gif" alt="guestbook" width="75" height="39" />
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.