matrix tool added. sweet.

uxder · Oct 24, 2011 · 9425743 · 9425743
1 parent c259332
commit 9425743
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 4 deletions.
diff --git a/css/light.css b/css/light.css
@@ -1,4 +1,4 @@
-body {
+body, #box_matrix  {
 	background-color: #eeeeee;
 	background-image: -moz-linear-gradient(top, #eeeeee, #ffffff);
 	background-image: -ms-linear-gradient(top, #eeeeee, #ffffff);

diff --git a/css/stylesheet.css b/css/stylesheet.css
@@ -10,6 +10,7 @@
 
 html {
 	overflow-y: scroll;
+	background:none;
 }
 
 article,
@@ -27,6 +28,7 @@ a {
 	cursor: pointer;
 	outline: none;
 }
+a:link { color: #aaa;}
 
 q:before,
 q:after {
@@ -238,7 +240,7 @@ dfn {
 
 body {
 	background-color: #0c1021; /*was url(../img/texture.jpg)*/
-	color: #f8f8f8;
+
 }
 
 #sandboxwrap {
@@ -275,7 +277,8 @@ body {
 #sandbox p{
 	font-size: 30px;
 	line-height: 50px;
-	margin: 0
+	margin: 0;
+	width: auto;
 }
 
 .rule,
@@ -287,6 +290,7 @@ body {
 	z-index: 1;
 	display: inline
 }
+.bracket { color: #f8f8f8; }
 
 .rule .comment {
     color: #0088ff;
@@ -399,4 +403,35 @@ body {
 /* @mathias */
 
 .cb { display: none; }
-.flash .cb { display: inline; }
+.flash .cb { display: inline; }
+
+
+/* overruling the new matrix stuff. */
+
+
+#matrixbox { position:relative; top: 160px;}
+#output { position: static; background: initial; border: 0;
+		text-align: inherit;
+		font-family: inherit;
+}
+#box_matrix { 
+position: relative;
+z-index: 10;
+background: #0c1021;
+min-height: 270px;
+margin-right: -10px;
+}
+
+
+
+#play, #save { 
+height: 160px;
+width: 160px;
+padding: 50px;
+text-align: center;
+right: 12%;
+z-index: 20;
+left: auto;
+}
+#save { color: white;
+border-color: white; }
diff --git a/index.html b/index.html
@@ -3,6 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <title>CSS3 Please! The Cross-Browser CSS3 Rule Generator</title>
+
+  <link rel="stylesheet" href="http://peterned.home.xs4all.nl/matrices/matrices.css">
+
   <link rel="stylesheet" href="css/stylesheet.css" media="screen">
 
 <script>if (((navigator.plugins && typeof navigator.plugins['Shockwave Flash'] == 'object') || (window.ActiveXObject && (new ActiveXObject('ShockwaveFlash.ShockwaveFlash')))) && location.protocol != 'file:') document.documentElement.className = 'flash';</script>
@@ -221,6 +224,39 @@ <h1>
 
 
 
+<script defer src="http://peterned.home.xs4all.nl/matrices/matrices.js"></script>
+
+<div id="box_matrix" class="rule_wrapper">
+  <pre class="rule comment">/*                           <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre> 
+
+<div id="matrixbox">
+<span id="save">
+    Oh hai :)
+    <br><br>
+    From <a href="http://peterned.home.xs4all.nl/matrices/">Peter Nederlof</a>
+    <a href="#1,0,0,1,0,0" class="reset">oh noes!</a>
+</span>
+<span id="play">
+    Manipulate me, please!
+    <span class="rotate">rotate</span>
+    <span class="scale">scale</span>
+    <span class="skewx">skew</span>
+    <span class="skewy">skew</span>
+
+    <span class="move">move</span>
+  </span>
+</div>
+
+  <pre class="rule">
+.matrix {
+  <div class="comment"><div id="output" class="declaration" style="min-height: 100px">Play for output ...</div></div>
+}</pre>
+
+
+</div>
+
+
+
 <pre class="rule footer"><span class="comment">
 
 
@@ -252,6 +288,7 @@ <h1>
 /*  
     __Changelog__
 
+    2011.10.23: Added the sweet matrix manip demo from <a href="http://peterned.home.xs4all.nl/matrices/">Peter Nederlof</a>. Thx Peter!
     2011.10.18: <a href="http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/">CSS Animations</a> added. (thx <a href="//twitter.com/wookiehangover">wookiehangover</a>!)
     2011.07.27: Added multicolumn. (thx <a href="https://twitter.com/hotmeteor" target="_blank">hotmeteor</a>!)
     2011.04.12: Added gradient for IE10! (thx <a href="https://github.com/Calvein" target="_blank">calvein</a>!)