Rounding up usage examples page with all current filters

mezzoblue · Sep 14, 2010 · e9eb4f0 · e9eb4f0
1 parent b9858bd
commit e9eb4f0
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/demo/css/playground.css b/demo/css/playground.css
@@ -33,7 +33,7 @@ body {
 h2 {
 	font-size: 14px;
 	font-weight: normal;
-	background: rgba(0, 0, 0, 0.08);
+	background: rgba(0, 0, 0, 0.12);
 	text-shadow: rgba(0, 0, 0, 0.05) 1px 1px 2px;
 	padding: 3px 12px 5px 12px;
 	-webkit-border-radius: 12px;
@@ -194,7 +194,7 @@ header aside {
 	line-height: 1.5;
 	color: #949cac;
 	text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0;
-	background: rgba(255, 255, 255, 0.02);
+	background: rgba(255, 255, 255, 0.06);
 	border-top: solid 1px rgba(0, 0, 0, 0.15);
 	border-bottom: solid 1px rgba(255, 255, 255, 0.05);
 }

diff --git a/demo/usage.html b/demo/usage.html
@@ -63,7 +63,6 @@ <h2>Mosaic Size 12, Opacity 0.5</h2>
 	data-pb-mosaic-amount="15"
 	data-pb-mosaic-opacity="0.5"&gt;</textarea>
 
-
 			<img class="filtered filter-noise" src="images/500/lighthouse.jpg" width="200" height="133" alt="">
 			<h2>Basic Noise</h2>
 			<textarea>&lt;img src="lighthouse.jpg" 
@@ -78,6 +77,49 @@ <h2>Noise Amount 100, Type Colour</h2>
 	data-pb-noise-amount="100"
 	data-pb-noise-type="colour"&gt;</textarea>
 
+			<img class="filtered filter-posterize" src="images/500/bee.jpg" width="200" height="133" alt="">
+			<h2>Basic Posterize</h2>
+			<textarea>&lt;img src="bee.jpg" 
+	width="200" height="133"
+	class="filter-posterize"&gt;</textarea>
+
+			<img class="filtered filter-posterize" data-pb-posterize-amount="3" data-pb-posterize-opacity="0.4" src="images/500/jordan.jpg" width="200" height="133" alt="">
+			<h2>Posterize Amount x</h2>
+			<textarea>&lt;img src="jordan.jpg" 
+	width="200" height="133"
+	data-pb-posterize-amount="3"
+	data-pb-posterize-opacity="0.4"
+	class="filter-posterize"&gt;</textarea>
+
+			<img class="filtered filter-sepia" src="images/500/sign.jpg" width="200" height="133" alt="">
+			<h2>Basic Sepia</h2>
+			<textarea>&lt;img src="sign.jpg" 
+	width="200" height="133"
+	class="filter-sepia"&gt;</textarea>
+
+			<img class="filtered filter-sepia" data-pb-sepia-opacity="0.5" src="images/500/leaves.jpg" width="200" height="133" alt="">
+			<h2>Sepia Value 0.5</h2>
+			<textarea>&lt;img src="leaves.jpg" 
+	width="200" height="133"
+	class="filter-sepia"
+	data-pb-sepia-opacity="0.5"&gt;</textarea>
+
+
+
+			<img class="filtered filter-tint" src="images/500/staples.jpg" width="200" height="133" alt="">
+			<h2>Basic Tint</h2>
+			<textarea>&lt;img src="staples.jpg" 
+	width="200" height="133"
+	class="filter-tint"&gt;</textarea>
+
+			<img class="filtered filter-tint" data-pb-tint-color="#0066CC" data-pb-tint-opacity="0.1" src="images/500/louvre.jpg" width="200" height="133" alt="">
+			<h2>Tint Colour #0066CC, Opacity 0.1</h2>
+			<textarea>&lt;img src="louvre.jpg" 
+	width="200" height="133"
+	class="filter-tint"
+	data-pb-tint-colour="#0066CC"
+	data-pb-tint-opacity="0.1"&gt;</textarea>
+
 		</div>