diff options
| author | raylu <raylu@mixpanel.com> | 2011-07-04 01:22:09 -0700 |
|---|---|---|
| committer | raylu <raylu@mixpanel.com> | 2011-07-04 01:22:09 -0700 |
| commit | ef19013d7ec45318845b565b91ff042a93bea031 (patch) | |
| tree | cba826b30f7d63c75edeb07eaf2919f83774e89e | |
| parent | 8fc399621803ddec4e2a0253c0f8ffa14e972a14 (diff) | |
| download | otakuhub-ef19013d7ec45318845b565b91ff042a93bea031.tar.xz | |
gradient mask!
| -rw-r--r-- | views/pages/home.html.php | 17 | ||||
| -rw-r--r-- | webroot/css/base.css | 5 |
2 files changed, 17 insertions, 5 deletions
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 ♡ OtakuHub~</h2> <div class="triangle-ribbon"></div> diff --git a/webroot/css/base.css b/webroot/css/base.css index 5a2cb29..ec4ddf9 100644 --- a/webroot/css/base.css +++ b/webroot/css/base.css @@ -463,10 +463,10 @@ dl.definition dd { } #scrollwrapper { - padding: 15px; + padding: 15px 20px; border: 1px solid #ccc; float: left; - margin: 15px 32px; + margin: 10px 25px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; @@ -495,6 +495,7 @@ dl.definition dd { border: 1px solid #ccc; float: left; height: 300px; + margin-right: 15px; } .scrollable .active { border: 2px solid #000; |