Permalink
Browse files

replaced php with javascript and live preview

  • Loading branch information...
1 parent 7b7d728 commit f0390d1ededf9831b30d5757e2862c4d971252e2 @timjb committed Aug 3, 2010
View
@@ -0,0 +1,3 @@
+[submodule "js/colortriangle"]
+ path = js/colortriangle
+ url = git://github.com/timjb/colortriangle.git
View
@@ -1,115 +0,0 @@
-/***
- * - mooRainbow: defaultCSS
- * author: w00fz <w00fzIT@gmail.com>
- */
-
-#mooRainbow { font-size: 11px; color: #000; }
-
-.moor-box {
- width: 390px;
- height: 310px;
- border: 1px solid #636163;
- background-color: #f9f9f9;
-}
-.moor-overlayBox {
- width: 256px; /* Width and Height of the overlay must be setted here: default 256x256 */
- height: 256px;
- margin-top: 9px;
- margin-left: 9px;
- border: 1px solid #000;
-}
-.moor-slider {
- border: 1px solid #000;
- margin-top: 9px;
- margin-left: 280px;
- width: 19px; /* if you want a bigger or smaller slider... */
- height: 256px;
-}
-.moor-colorBox {
- border: 1px solid #000;
- width: 59px;
- height: 68px;
- margin-top: 20px;
- margin-left: 315px;
-}
-.moor-currentColor { /* Bottom Box Color, the backup one */
- margin-top: 55px;
- margin-left: 316px;
- width: 59px;
- height: 34px;
-}
-.moor-okButton {
- font-family: Tahoma;
- font-weight: bold;
- font-size: 11px;
- margin-top: 278px;
- margin-left: 8px;
- background: #e6e6e6;
- height: 23px;
- border: 1px solid #d6d6d6;
- border-left-color: #f5f5f5;
- border-top-color: #f5f5f5;
- width: auto;
-}
-#mooRainbow label {
- font-family: mono;
-}
-/* Following are just <label> */
-.moor-rLabel {
- margin-top: 100px;
- margin-left: 315px;
-}
-.moor-gLabel {
- margin-top: 125px;
- margin-left: 315px;
-}
-.moor-bLabel {
- margin-top: 150px;
- margin-left: 315px;
-}
-.moor-HueLabel {
- margin-top: 190px;
- margin-left: 315px;
-}
-span.moor-ballino { /* Style hue ° (degree) !! */
- margin-top: 190px;
- margin-left: 370px;
-}
-.moor-SatuLabel {
- margin-top: 215px;
- margin-left: 315px;
-}
-.moor-BrighLabel {
- margin-top: 240px;
- margin-left: 315px;
-}
-.moor-hexLabel {
- margin-top: 275px;
- margin-left: 280px;
-}
-
-/* <input> */
-.moor-rInput, .moor-gInput, .moor-bInput, .moor-HueInput, .moor-SatuInput, .moor-BrighInput {
- width: 30px;
-}
-.moor-hexInput {
- width: 55px;
-}
-.moor-cursor {
- background-image: url(../img/moor_cursor.gif);
- width: 12px;
- height: 12px;
-}
-.moor-arrows {
- background-image: url(../img/moor_arrows.gif);
- top: 9px;
- left: 270px;
- width: 41px;
- height: 9px;
-}
-.moor-chooseColor { /* Top Box Color, the choosen one */
- margin-top: 21px;
- margin-left: 316px;
- width: 59px;
- height: 34px;
-}
View
@@ -21,8 +21,6 @@ margin: 100px auto 0;
width: 1000px; }
.halftransparent {
-background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWOYPXu2DwAFxAIeBz7ufQAAAABJRU5ErkJggg==') repeat;
-*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c9b9b9b, endColorstr=#4c9b9b9b) /* won't validate, CSS hack, a method for alpha color backgrounds, http://tinyurl.com/ly6rj2 */;
display: inline; /* fix for double margin bug */
padding: 20px; }
#title {
@@ -62,11 +60,11 @@ width: 350px; }
#code {
background: #111;
font-family: 'Andale Mono', monospace;
-overflow: auto;
-padding: 10px;
-white-space: nowrap; }
+overflow: scroll;
+width: 482px;
+padding: 10px; }
#imgsrc {
bottom: 5px;
position: absolute;
-right: 5px; }
+right: 5px; }
View
@@ -1,21 +0,0 @@
-<?php
-function get1pxAlphaPNG($rgb, $alpha) {
- $img = imagecreatetruecolor(1, 1);
-
- // Make the img alpha
- imagealphablending($img, false);
- imagesavealpha($img, true);
-
- $imgcolor = imagecolorallocatealpha($img, $rgb[0], $rgb[1], $rgb[2], (127 - ((int) ($alpha * 127))));
- imagesetpixel($img, 0, 0, $imgcolor);
-
- ob_start();
- imagepng($img);
- $imgdata = ob_get_contents();
- ob_end_clean();
-
- imagedestroy($img);
-
- return $imgdata;
-}
-?>
View
@@ -1,13 +0,0 @@
-<?php
-function getHexFromRGB($rgb) {
- $hex = '';
- foreach($rgb as $i => $c) {
- $chex = dechex($c);
- if(strlen($chex) == 1) {
- $chex = '0' . $chex;
- }
- $hex .= $chex;
- }
- return $hex;
-}
-?>
View
@@ -1,37 +0,0 @@
-<?php
-function getRGBFromString($color) {
- $rgb = false;
- if(stristr($color, 'rgb(')) {
- $color = str_ireplace('rgb(', '', $color);
- $color = str_ireplace(')', '', $color);
- $rgb = explode(',', $color);
- foreach($rgb as $i => $c) {
- $c = trim($c);
- $rgb[$i] = (int) $c;
- }
- }
- else {
- if($color[0] == '#') {
- $color = substr($color, 1);
- }
- if(strlen($color) == 6) {
- $rgbhex = array($color[0].$color[1], $color[2].$color[3], $color[4].$color[5]);
- }
- else if(strlen($color) == 3)
- {
- $rgbhex = array($color[0].$color[0], $color[1].$color[1], $color[2].$color[2]);
- }
- if(isset($rgbhex)) {
- $rgb = array();
- foreach($rgbhex as $i => $c) {
- $rgb[$i] = hexdec($c);
- }
- }
- }
- // hat alles geklappt?
- if(!(count($rgb) == 3 && $rgb[0] >= 0 && $rgb[0] <= 255 && $rgb[1] >= 0 && $rgb[1] <= 255 && $rgb[2] >= 0 && $rgb[2] <= 255)) {
- $rgb = false;
- }
- return $rgb;
-}
-?>
View
Deleted file not rendered
View
Deleted file not rendered
View
Deleted file not rendered
View
Deleted file not rendered
View
Deleted file not rendered
View
Deleted file not rendered
View
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta charset=utf-8>
+<title>Teiltransparente Hintergrundfarben in allen Browsern (fast) ohne PNG-Dateien &ndash; CSS-Generator</title>
+<meta name=description content="CSS-Generator für einfarbige, halbtransparente Hintergründe, die in allen Browsern funktionieren">
+<meta name=author content="Tim Baumann">
+<meta name=language content=de>
+<link rel=stylesheet href=css/style.css>
+<link rel="shortcut icon" href=img/favicon.png>
+
+<body>
+<div id=wrapper>
+
+<div id=title class=halftransparent>
+ <h1>Teiltransparente Hintergrundfarben in allen Browsern (fast) ohne PNG-Dateien &ndash; CSS-Generator</h1>
+</div>
+<div id=explanation class=halftransparent>
+ Dieser CSS-Generator erzeugt den Code um Elementen eine halbdurchsichtige Hintergrundfarbe zu verpassen. Die Methode, die in allen Browsern funktioniert, hat Peter Kröner, deren Erfinder, in <a href=http://www.peterkroener.de/teiltransparente-hintergrundfarben-in-allen-browsern-fast-ohne-png-dateien/>einem Blogeintrag</a> beschrieben. Das ganze funktioniert mit halbtransparenten 1-Pixel-PNGs, die als Data-URL modernen Browsern verabreicht werden, und der MS-proprietären CSS-Eigenschaft filter für den Internet Exploder. Leider ist das Ganze etwas umständlich. Deshalb dieser Generator. Einfach das Feld Farbe mit einem Hex-Wert befüllen und in das Feld Alpha-Wert eine Zahl zwischen 0 (= voll transparent) und 1 (= voll opak) eingeben. Den einbaufertigen Code kannst du sofort dem entsprechenden Feld entnehmen. Dieser enthält einen CSS-Hack, damit der IE7 nicht sowohl PNG als auch den Filter anzeigt. Du kannst dieses Problem natürlich auch mit Conditional Comments lösen.
+</div>
+<div id=input class=halftransparent>
+ <h2>Eingabe</h2>
+ <form>
+ <label>Farbe: <input type=color id=color value=#424e6a></label>
+ <label>Alpha-Wert: <input type=number id=alpha value=0.5 min=0 max=1 step=any></label>
+ </form>
+</div>
+<div id=output class=halftransparent>
+ <h2>Ausgabe</h2>
+ <pre id=code></pre>
+</div>
+
+</div><!-- close wrapper -->
+
+<div id=imgsrc>
+ Bokeh background by <a href=http://www.flickr.com/photos/calebkimbrough/4151252608/in/set-72157622915120782/>calebkimbrough</a>
+</div>
+
+<script src=js/colortriangle/colortriangle.js></script>
+<script defer src=js/app.js></script>
View
@@ -1,84 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-<meta charset=utf-8>
-<title>Teiltransparente Hintergrundfarben in allen Browsern (fast) ohne PNG-Dateien &ndash; CSS-Generator</title>
-<meta name=description content="CSS-Generator für einfarbige, halbtransparente Hintergründe, die in allen Browsern funktionieren">
-<meta name=author content="Tim Baumann">
-<meta name=language content=de>
-<link rel=stylesheet href=css/style.css>
-<link rel=stylesheet href=css/mooRainbow.css>
-<link rel="shortcut icon" href=img/favicon.png>
-
-<body>
-<div id=wrapper>
-
-<div id=title class=halftransparent>
- <h1>Teiltransparente Hintergrundfarben in allen Browsern (fast) ohne PNG-Dateien &ndash; CSS-Generator</h1>
-</div>
-<div id=explanation class=halftransparent>
- Dieser CSS-Generator erzeugt den Code um Elementen eine halbdurchsichtige Hintergrundfarbe zu verpassen. Die Methode, die in allen Browsern funktioniert, hat Peter Kröner, deren Erfinder, in <a href=http://www.peterkroener.de/teiltransparente-hintergrundfarben-in-allen-browsern-fast-ohne-png-dateien/>einem Blogeintrag</a> beschrieben. Das ganze funktioniert mit halbtransparenten 1-Pixel-PNGs, die als Data-URL modernen Browsern verabreicht werden, und der MS-proprietären CSS-Eigenschaft filter für den Internet Exploder. Leider ist das Ganze etwas umständlich. Deshalb dieser Generator. Einfach das Feld Farbe mit einem Hex- oder rgb()-Wert befüllen und in das Feld Alpha-Wert eine Zahl zwischen 0 (= voll transparent) und 1 (= voll opak) eingeben. Nach dem Klick auf "CSS generieren" wird der einbaufertige Code ausgegeben. Dieser enthält einen CSS-Hack, damit der IE7 nicht sowohl PNG als auch den Filter anzeigt. Du kannst dieses Problem natürlich auch mit Conditional Comments lösen.
-</div>
-<div id=input class=halftransparent>
- <h2>Eingabe</h2>
- <form action="index.php" method="get">
- <label>Farbe: <input type=text id=color name=color value="<?php echo $_GET['color']; ?>"></label>
- <label>Alpha-Wert: <input type=text name=alpha id=alpha value="<?php echo $_GET['alpha']; ?>"></label>
- <input type=submit name=submit id=submit value="CSS generieren">
- </form>
-</div>
-<div id=output class=halftransparent>
- <h2>Ausgabe</h2>
- <p id=code>
-
-<?php
-if(isset($_GET['color']) && $_GET['color'] != '' && isset($_GET['alpha']) && $_GET['alpha'] != '') {
- $color = $_GET['color'];
- $alpha = $_GET['alpha'];
-
- require_once('getRGBFromString.php');
- require_once('getHexFromRGB.php');
- require_once('get1pxAlphaPNG.php');
-
- $rgb = getRGBFromString($color);
- if($rgb) {
- $alphargbhex = (dechex((int) ($alpha * 255))) . getHexFromRGB($rgb);
- if(strlen($alphargbhex) == 7) {
- $alphargbhex = "0" . $alphargbhex;
- }
- $imgdata = base64_encode(get1pxAlphaPNG($rgb, $alpha));
- $css = "background: transparent url('data:image/png;base64," . $imgdata . "') repeat;\n*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#" . $alphargbhex . ", endColorstr=#" . $alphargbhex . ") /* won't validate, CSS hack, a method for alpha color backgrounds, http://tinyurl.com/ly6rj2 */;";
-
- echo '<code>' . nl2br($css) . '</code>';
- }
- else {
- echo 'Hat irgendwie ned geklappt :-(. Versuch was anderes.';
- }
-}
-else {
- echo 'Zuerst Eingabe';
-}
-?>
-
- </p>
-</div>
-
-</div><!-- close wrapper -->
-
-<div id=imgsrc>
- Bokeh background by <a href=http://www.flickr.com/photos/calebkimbrough/4151252608/in/set-72157622915120782/>calebkimbrough</a>
-</div>
-
-<script src=js/mootools.js></script>
-<script src=js/mooRainbow.js></script>
-<script>
-window.addEvent('domready', function() {
- var mooRainbow = new MooRainbow($('color'), {
- imgPath: 'img/',
- onChange: function(color) {
- $('color').set('value', color.hex);
- }
- });
-});
-</script>
Oops, something went wrong.

0 comments on commit f0390d1

Please sign in to comment.