Skip to content
Browse files

added a background tile with texture to help visualize transparency i…

…n the #sandbox, and added a guestbook, and some more sensible beginning styles
  • Loading branch information...
1 parent 67d06a2 commit fae24919a455128e33ab88c83e618a6ccfc8104c @boazsender boazsender committed Feb 3, 2010
Showing with 38 additions and 224 deletions.
  1. +26 −4 css/stylesheet.css
  2. +12 −220 index.html
View
30 css/stylesheet.css
@@ -169,27 +169,48 @@ dfn {
--------------------------------*/
body {
- background: #0c1021;
+ background: url(../img/texture.jpg);
color: #f8f8f8;
}
#sandbox {
- background: #555;
- border: 5px solid #888;
+ font-family: "goudy-bookletter-1911-1","goudy-bookletter-1911-2","Baskerville","Georgia",serif;
+ border:1px solid rgba(155, 151, 109, 0.2);
overflow: hidden;
padding: 20px;
position: fixed;
right: 75px;
top: 50px;
width: 400px;
z-index: 2;
+ color: rgba(0, 0, 0, 0.5);
+ font-size: 16px;
+}
+#sandbox h1{
+ font-weight: normal;
+ margin: 0;
+}
+#sandbox abbr{
+ cursor: help;
+ font-size: 1.5em;
+ color: #721212;
+ color: rgba(94, 18, 18, .6);
+ text-shadow: 0px 0px 1px #333;
+ border-bottom: 1px dashed #888;
+}
+#sandbox p{
+ font-size: 20px;
}
.rule,
.rule input {
font: 14px/20px Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
white-space: pre;
margin: 0;
+ background: url(../img/texture.jpg);
+ position: relative;
+ z-index: 3;
+ display: inline
}
.rule .comment {
@@ -236,4 +257,5 @@ body {
.rule b.edit input {
display: inline;
-}
+}
+#guestbook{position:absolute;right:10px;padding-bottom: 10px; }
View
232 index.html
@@ -1,14 +1,9 @@
<!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>
@@ -17,10 +12,10 @@
<div id="sandbox">
<h1>
- Fun with CSS3
+ Fun with <abbr title="Cascading Style Sheets Level 3">CSS3</abbr>
</h1>
<p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ This element with receive inline changes as you edit the CSS rules on the right. Enjoy!
</p>
</div>
@@ -45,18 +40,16 @@
-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">2px</b> <b g="1">5px</b> <b g="2">5px</b> <b g="3" i="s2Hex" o="sHex">#8AC</b>;
- -webkit-box-shadow: <b g="0">2px</b> <b g="1">5px</b> <b g="2">5px</b> <b g="3" i="s2Hex" o="sHex">#8AC</b>;
- box-shadow: <b g="0">2px</b> <b g="1">5px</b> <b g="2">5px</b> <b g="3" i="s2Hex" o="sHex">#8AC</b>;
- filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=<b g="0">5px</b>, OffY=<b g="1">5px</b>, Color='<b g="3" i="s2Hex" o="lHex">#88AACC</b>');
- -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=<b g="0">5px</b>, OffY=<b g="1">5px</b>, Color='<b g="3" i="s2Hex" o="lHex">#88AACC</b>')";
+ -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">
@@ -71,12 +64,10 @@
<pre class="rule">
.box_rgba {
- background-color: transparent;
- background-color: <b g="0" i="s2aHex" o="aCh">rgba(255, 0, 255, 128)</b>;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='<b g="0" i="s2aHex">#80FF00FF</b>',endColorstr='<b g="0" i="s2aHex">#80FF00FF</b>');
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='<b g="0" i="s2aHex">#80FF00FF</b>',endColorstr='<b g="0" i="s2aHex">#80FF00FF</b>')";
+ 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">
@@ -90,205 +81,6 @@
</pre>
-
+<img id="guestbook" src="img/guestbook.gif" alt="guestbook" width="75" height="39" />
</body>
-
-</html>
-<!--
-<!doctype html>
-<html>
-<head>
- <title>Cross Browser CSS3 Rule Generator</title>
- <style type="text/css" media="screen">
-/*Styles*/
-body {
- background: #353535;
- color: #BBB;
-}
-
-body,
-pre,
-input {
- font: 15px/20px "Palatino Linotype", "Book Antiqua", Palatino, serif;
-}
-
-pre {
- background: transparent;
- border: 5px solid #EEE;
- padding: 20px;
-}
-
-u {
- text-decoration: none;
-}
-
-b {
- font-weight: normal;
-}
-
-i {
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- border-radius: 5px;
- border: 0;
- background: #3B3B3B;
- font-style: normal;
- overflow: hidden;
- position: relative;
-}
-
-i input {
- background: none;
- border: 0;
- color: inherit;
- left: 0;
- min-width: 2em;
- outline: 0;
- padding: 0;
- position: absolute;
- top: 0;
- width: 200%;
-}
-
-i.edit {
- background: #222;
- color: #FFF;
-}
-
- </style>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
- <script type="text/javascript">
-
-cssfn = {
- matchRgba: /^rgba\s{0,}\(\s{0,}(\d+)\s{0,},\s{0,}(\d+)\s{0,},\s{0,}(\d+)\s{0,},\s{0,}(\d+)\s{0,}\)/,
- matchHexa: /^#{0,}([A-f0-9]{2,2})([A-f0-9]{2,2})([A-f0-9]{2,2})([A-f0-9]{2,2})/,
- matchShortHex: /^#{0,}([A-f0-9])([A-f0-9])([A-f0-9])$/,
- matchLongHex: /#{0,}([A-f0-9])\1([A-f0-9])\2([A-f0-9])\3$/,
- basicImageToDeg: function (d) {
- return (d * 90) || 0;
- },
- degToBasicImage: function (d) {
- return Math.round(((d / 90) || 0) * 100) / 100;
- },
- decimalToHex: function (d) {
- return ('0' + parseInt(d, 10).toString(16)).substr(-2).toUpperCase();
- },
- hexToDecimal: function (d) {
- return parseInt(d, 16);
- },
- longHex: function (h) {
- return (h.toUpperCase().match(this.matchShortHex)) ? h.toUpperCase().replace(this.matchShortHex, '#$1$1$2$2$3$3') : h.toUpperCase();
- },
- shortHex: function (h) {
- return (h.toUpperCase().match(this.matchLongHex)) ? h.toUpperCase().replace(this.matchLongHex, '#$1$2$3').toUpperCase() : h.toUpperCase();
- },
- rgbaToHexa: function (c) {
- var i = 0,
- h = '#',
- m = ((c = c.toLowerCase().match(this.matchRgba)) !== null) ? c : [null, 0, 0, 0, 0];
-
- while (++i < 5) {
- h += this.decimalToHex(m[i]);
- }
-
- return h.toUpperCase();
- },
- hexaToRgba: function (c) {
- var i = 0,
- h = [],
- m = ((c = c.toUpperCase().match(this.matchHexa)) !== null) ? c : [null, '00', '00', '00', '00'];
-
- while (++i < 5) {
- h.push(this.hexToDecimal(m[i]));
- }
-
- return 'rgba(' + h.join(', ') + ')';
- }
-};
-
-$(function () {
- var fn = function () {
- };
- $('i').live('click', function () {
- var $out = $(this),
- $in = $(document.createElement('input'));
-
- if ($out.hasClass('edit')) {
- return;
- } else {
- $in.val($out.addClass('edit').wrapInner('<span>').children().attr('to', $out.attr('to') || '').css('visibility', 'hidden').html());
- }
-
- $out.append($in);
-
- $in.focus().bind('keydown keypress keyup', function () {
- var $in = $(this),
- $out = $in.parent(),
- val = $in.val();
-
- $out.children('span').html($in.val());
-
- val = ($out.attr('is')) ? eval($out.attr('is')) : val;
-
- $out.parent().find('i[group=' + $out.attr('group') + ']:not(.edit)').each(function () {
- this.innerHTML = (this.getAttribute('to')) ? eval(this.getAttribute('to')) : val;
- });
- }).bind('blur change', function () {
- var $in = $(this),
- $out = $in.parent().removeClass('edit'),
- val = $in.val();
-
- val = ($out.attr('is')) ? eval($out.attr('is')) : val;
-
- val = ($out.attr('to')) ? eval($out.attr('to')) : val;
-
- $out.html(val);
-
- $in.remove();
- });
- });
-});
-
- </script>
-</head>
-<body>
-
-<pre><u>.box_round</u> {
- <b>-moz-border-radius</b>: <i group="0">5px</i>;
- <b>-webkit-border-radius</b>: <i group="0">5px</i>;
- <b>border-radius</b>: <i group="0">5px</i>;
-}</pre>
-
-<pre><u>.box_shadow</u> {
- <b>-moz-box-shadow</b>: <i group="0">2px</i> <i group="1">2px</i> <i group="2">1px</i> <i group="3" is="cssfn.shortHex(val)">#000</i>;
- <b>-webkit-box-shadow</b>: <i group="0">2px</i> <i group="1">2px</i> <i group="2">1px</i> <i group="3" is="cssfn.shortHex(val)">#000</i>;
- <b>box-shadow</b>: <i group="0">2px</i> <i group="1">2px</i> <i group="2">1px</i> <i group="3" is="cssfn.shortHex(val)">#000</i>;
- <b>filter</b>: progid:DXImageTransform.Microsoft.dropshadow(OffX=<i group="0">2px</i>, OffY=<i group="1">2px</i>, Color='<i group="3" to="cssfn.longHex(val)" is="cssfn.shortHex(val)">#000000</i>');
- <b>-ms-filter</b>: "progid:DXImageTransform.Microsoft.dropshadow(OffX=<i group="0">2px</i>, OffY=<i group="1">2px</i>, Color='<i group="3" to="cssfn.longHex(val)" is="cssfn.shortHex(val)">#000000</i>')";
-}</pre>
-
-<pre><u>.box_gradient</u> {
- <b>background-image</b>: -moz-linear-gradient(top, <i group="0" is="cssfn.shortHex(val)">#FFF</i>, <i group="1" is="cssfn.shortHex(val)">#000</i>);
- <b>background-image</b>: -webkit-gradient(linear, left top, left bottom, from(<i group="0" is="cssfn.shortHex(val)">#FFF</i>) to(<i group="1" is="cssfn.shortHex(val)">#000</i>);
- <b>filter</b>: progid:DXImageTransform.Microsoft.gradient(startColorstr='<i group="0" to="cssfn.longHex(val)" is="cssfn.shortHex(val)">#FFFFFF</i>', endColorstr='<i group="1" to="cssfn.longHex(val)" is="cssfn.shortHex(val)">#000000</i>');
- <b>-ms-filter</b>: "progid:DXImageTransform.Microsoft.gradient(startColorstr='<i group="0" to="cssfn.longHex(val)" is="cssfn.shortHex(val)">#FFFFFF</i>', endColorstr='<i group="1" to="cssfn.longHex(val)" is="cssfn.shortHex(val)">#000000</i>')";
-}</pre>
-
-<pre><u>.box_rgba</u> {
- <b>background-color</b>: transparent;
- <b>background-color</b>: <i group="0" is="cssfn.rgbaToHexa(val)" to="cssfn.hexaToRgba(val)">rgba(255, 0, 255, 128)</i>;
- <b>filter</b>: progid:DXImageTransform.Microsoft.gradient(startColorstr='<i group="0">#FF00FF80</i>',endColorstr='<i group="0">#FF00FF80</i>');
- <b>-ms-filter</b>: "progid:DXImageTransform.Microsoft.gradient(startColorstr='<i group="0">#FF00FF80</i>',endColorstr='<i group="0">#FF00FF80</i>')";
-}</pre>
-
-<pre><u>.box_rotate</u> {
- -moz-transform: rotate(<i group="0">90</i>deg);
- -o-transform: rotate(<i group="0">90</i>deg);
- -webkit-transform: rotate(<i group="0">90</i>deg);
- filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=<i group="0" is="cssfn.basicImageToDeg(val)" to="cssfn.degToBasicImage(val)">1</i>);
- -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=<i group="0" is="cssfn.basicImageToDeg(val)" to="cssfn.degToBasicImage(val)">1</i>)";
-}</pre>
-
-</body>
-</html>
--->
+</html>

0 comments on commit fae2491

Please sign in to comment.
Something went wrong with that request. Please try again.