css « 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");

Comments (0)

Filed under: CSS,HTML,Uncategorized — Tags: black and white, cdn, css, filter, grayscale — 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:

Example 01

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>

Comments (0)

Filed under: CSS,HTML5,JavaScript — Tags: canvas, chord, css, diagram, guitar, html5, javascript — GG @ 8:44 am