GGshow reloaded GGshow reloaded

April 23, 2015

Grayscaling your website

A quick solution to convert webpages into black and white using CSS grayscale filter, supported by all major web browsers including MSIE, Firefox, Chrome, Safari. Suitable for making mourning page, paying tribute, & etc.

Demo

Convert the entire page into black & white:

body {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(1);
}

Convert selected elements into black & white:

.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(1);
}

And add grayscale class to selected HTML elements. E.g.:

<div class="grayscale">
 ...
<div>

Print webpages in black & white:

@media print {
  .grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(1);
  }
}

CDN options
CSS also available on CDN.

Grayscale all:

<link rel="stylesheet" type="text/css" href="http://cdn.ggshow.com/styles/grayscale-all.css">

Grayscale selected:

<link rel="stylesheet" type="text/css" href="http://cdn.ggshow.com/styles/grayscale.css">

Grayscale print:

<link rel="stylesheet" type="text/css" href="http://cdn.ggshow.com/styles/grayscale-print.css">

Or using CSS import method:

Grayscale all:

@import url("http://cdn.ggshow.com/styles/grayscale-all.css");

Grayscale selected:

@import url("http://cdn.ggshow.com/styles/grayscale.css");

Grayscale print:

@import url("http://cdn.ggshow.com/styles/grayscale-print.css");
Filed under: CSS,HTML,Uncategorized — Tags: , , , , — GG @ 6:59 pm

January 4, 2014

Chord Canvas

This is a HTML5 build of Dynamic Chord Diagam.

Usage:

  • Include JavaScript at HTML head. 
    <script src="http://commondatastorage.googleapis.com/ggshow/files/chordcanvas/chordcanvas-1-0-0.min.js"></script>
  • Creating/rendering chord instance. 
    var myChord = new ChordCanvas(value, size);
myChord.render();

Simplified method:

  • <script>new ChordCanvas("C,X,3,2,0,1,0","100").render();</script>

Customize Color:

  • var chord1 = new ChordCanvas("C,X,3,2,0,1,0","150");
chord1.backgroundcolor = "#CCF";
chord1.bordercolor = "";
chord1.titlecolor = "#FFF";
chord1.labelcolor = "#00F";
chord1.chordcolor = "#00F";
chord1.titlebackgroundcolor = "#00F";
chord1.render();

Overwrite chord container display style:

  • Chord container has block display by default, you can overwrite the display style by .chord-container class selector. e.g: 
    <style>
.chord-container {
    display:inline-block;
}
</style>

Examples:

Source:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chord Canvas - Example 01</title>
<style>
.chord-container {
display:inline-block;
}
</style>
<script src="http://commondatastorage.googleapis.com/ggshow/files/chordcanvas/chordcanvas-1-0-0.min.js"></script>
</head>
<body>
<h1>Chord Canvas Examples</h1>
<h3>Basic</h3>
<script>new ChordCanvas("C,X,3,2,0,1,0","100").render();</script>
<script>new ChordCanvas("Am,X,0,2,2,1,0","100").render();</script>
<script>new ChordCanvas("F,X,X,3,2,1,1","100").render();</script>
<script>new ChordCanvas("G,X,0,2,2,1,0","100").render();</script>
<br />
<script>new ChordCanvas("C#7-5,X,X,3,4,2,3","100").render();</script>
<script>new ChordCanvas("D♭7-9,X,4,3,4,3,X","100").render();</script>
<script>new ChordCanvas("E♭,11,10,8,8,8,11","100").render();</script>
<script>new ChordCanvas("B♭m,X,X,11,10,11,9","100").render();</script>
<h3>Customize Size</h3>
<script>new ChordCanvas("C,X,3,2,0,1,0","150").render();</script>
<script>new ChordCanvas("C,X,3,2,0,1,0","250").render();</script>
<script>new ChordCanvas("C,X,3,2,0,1,0","").render();</script>
<h3>Customize Color</h3>
<script>
var chord1 = new ChordCanvas("C,X,3,2,0,1,0","150");
chord1.backgroundcolor = "#CCF";
chord1.bordercolor = "";
chord1.titlecolor = "#FFF";
chord1.labelcolor = "#00F";
chord1.chordcolor = "#00F";
chord1.titlebackgroundcolor = "#00F";
chord1.render();

var chord2 = new ChordCanvas("C,8,10,10,9,8,8","150");
chord2.backgroundcolor = "#F00";
chord2.bordercolor = "#F00";
chord2.titlecolor = "#F00";
chord2.labelcolor = "#000";
chord2.chordcolor = "#FFF";
chord2.titlebackgroundcolor = "#FFF";
chord2.render();
</script>
</body>
</html>
Filed under: CSS,HTML5,JavaScript — Tags: , , , , , , — GG @ 8:44 am

February 3, 2012

Duplicated placeholder output

Issue:

  • Zend Framework placeholder (headTitle, headMeta, headLink, headScript, headStyle, inlineScript) creates twice or multiple title/meta/link/script tags in HTML.
  • Duplicated title/meta/link/script tags generated from Zend Framework placeholder.
  • e.g.:

    source:

    <?php echo $this->headScript()->appendFile("/scripts/global.js") ?>
<?php echo $this->headScript()->appendFile("/scripts/main.js") ?>

    output:

    <script src="/scripts/global.js" type="text/javascript"></script>
<script src="/scripts/global.js" type="text/javascript"></script>
<script src="/scripts/main.js" type="text/javascript"></script>

Reason:

  • Echo will output all elements in a placeholder.

Solution:

  • Echo only once for each placeholder.
  • e.g.: 
    <?php $this->headLink()->appendStylesheet('/styles/global.css') ?>
<?php $this->headLink()->appendStylesheet('/styles/main.css') ?>
<?php echo $this->headLink() ?>

<?php $this->headScript()->appendFile("/scripts/global.js") ?>
<?php $this->headScript()->appendFile("/scripts/main.js") ?>
<?php echo $this->headScript() ?>
Filed under: CSS,JavaScript,PHP,Web,Zend Framework — Tags: , , — GG @ 11:15 am

© 2024 GGSHOW | Powered by WordPress