From ef19013d7ec45318845b565b91ff042a93bea031 Mon Sep 17 00:00:00 2001
From: raylu <raylu@mixpanel.com>
Date: Mon, 4 Jul 2011 01:22:09 -0700
Subject: gradient mask!

---
 views/pages/home.html.php | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

(limited to 'views')

diff --git a/views/pages/home.html.php b/views/pages/home.html.php
index 46d96cb..9d39b95 100644
--- a/views/pages/home.html.php
+++ b/views/pages/home.html.php
@@ -1,7 +1,18 @@
 <h1>The Otaku Social Network</h1>
 <a href="/users/signup">Sign up!</a>
-<div id="scrollwrapper">
-	<a class="prev browse left"></a>
+<svg height="0">
+	<mask id="scrollmask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+		<linearGradient id="g" gradientUnits="objectBoundingBox" x2="1" y2="0">
+			<stop stop-color="white" stop-opacity="0" offset="0"/>
+			<stop stop-color="white" stop-opacity="1" offset="0.03"/>
+			<stop stop-color="white" stop-opacity="1" offset="0.89"/>
+			<stop stop-color="white" stop-opacity="0" offset="1"/>
+		</linearGradient>
+		<rect x="0.0" y="0.0" width="1.0" height="1.0" fill="url(#g)"/>
+	</mask>
+</svg>
+<a class="prev browse left"></a>
+<div id="scrollwrapper" style="mask: url(#scrollmask)">
 	<div id="browsable" class="scrollable">
 		<div class="items">
 			<div>
@@ -51,8 +62,8 @@
 			</div>
 		</div>
 	</div>
-	<a class="next browse right"></a>
 </div>
+<a class="next browse right"></a>
 
 <h2 class="ribbon">Why you'll &#9825; OtakuHub~</h2>
 <div class="triangle-ribbon"></div>
-- 
cgit v1.2.3