diff options
| author | raylu <raylu@mixpanel.com> | 2011-07-10 13:50:27 -0700 |
|---|---|---|
| committer | raylu <raylu@mixpanel.com> | 2011-07-10 13:50:27 -0700 |
| commit | 91d78c52f26817d5904a8a031fa0bac0d49c6316 (patch) | |
| tree | 27bbcce06177be626e57cec7385a4e62944363d1 | |
| parent | 6933531b74d2bc92a829703c629433b66ae6079a (diff) | |
| download | otakuhub-91d78c52f26817d5904a8a031fa0bac0d49c6316.tar.xz | |
make homepage scroll gradient work in webkit on non-OSX
use overlaid div with background instead of SVG mask
| -rw-r--r-- | views/pages/home.html.php | 15 | ||||
| -rw-r--r-- | webroot/css/home.css | 31 |
2 files changed, 29 insertions, 17 deletions
diff --git a/views/pages/home.html.php b/views/pages/home.html.php index c261efb..b682a27 100644 --- a/views/pages/home.html.php +++ b/views/pages/home.html.php @@ -4,19 +4,10 @@ $this->styles($this->html->style("/css/home.css")); <h1>The Otaku Social Network</h1> <a href="/users/signup" id="signup" class="gradient">Sign up!</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="scrollwrapper"> + <div id="sg_left"></div> + <div id="sg_right"></div> <div id="browsable" class="scrollable"> <div class="items"> <div> diff --git a/webroot/css/home.css b/webroot/css/home.css index f6fa51a..74f3b14 100644 --- a/webroot/css/home.css +++ b/webroot/css/home.css @@ -1,11 +1,32 @@ -#scrollwrapper { +div#scrollwrapper { padding: 15px 20px; border: 1px solid #ccc; + border-width: 1px 0; float: left; margin: 10px 25px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; + position: relative; /* non-static for sg_left/right */ +} +div#sg_left { + position: absolute; + top: -1px; + left: 0; + bottom: -1px; + width: 3%; + background: -moz-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0)); + background: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffffff00', GradientType=1); + z-index: 1; +} +div#sg_right { + position: absolute; + top: -1px; + right: 0; + bottom: -1px; + width: 11%; + background: -moz-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0)); + background: -webkit-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff00', endColorstr='#ffffffff', GradientType=1); + z-index: 1; } .scrollable { height: 330px; @@ -46,7 +67,7 @@ a.browse { display: block; width: 30px; height: 30px; - margin: 150px 10px; + margin: 200px 10px; cursor: pointer; font-size: 1px; position: absolute; |