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 /webroot/css | |
| 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
Diffstat (limited to 'webroot/css')
| -rw-r--r-- | webroot/css/home.css | 31 |
1 files changed, 26 insertions, 5 deletions
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; |