iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 18
1
自我挑戰組

30 天 CSS 隨手筆記系列 第 18

30 天 CSS 隨手筆記 - 第 18 天 - UX 相關的眉角 ( 2/3 )

主要參考 CSS SECRETS 這本書裡面的內容作筆記~


可滾動的提示

我自己是個很遲鈍的使用者 =艸=
不知道大家有沒有類似的經驗,還記得之前我一直找不到在 google 搜尋時,設定搜尋條件的地方。

頁面是長這樣的:

結果在某次 F2E 的討論中,才知道原來上面的那條 bar 是可以左右滑動的...

往左滑後,就能看到 "搜尋工具" 的選項了 =口=

因此為了預防我這種使用者,在頁面上放一個可滾動的區塊時,增加一些提示絕對是很明智的選擇。
現在 gmail 的側欄就有一個不錯的效果:

  1. 可以向下滑時,下方顯示陰影
  2. 可以向上滑時,上方顯示陰影

從左到右分別是 不可滑動 / 可以向下滑動 / 可以向上及向下滑動 的狀況

這邊寫了一個可以上下滾動的 ul:https://jsfiddle.net/lazy_shyu/7t0fdrqx/1/

先加上上方的陰影樣式:https://jsfiddle.net/lazy_shyu/7t0fdrqx/2/

ul {
	/* 
     * 一些本來的設定
     */

    background: radial-gradient(at top, rgba(0, 0, 0, .2),transparent 70%) no-repeat;
    background-size: 100% 15px;
}

但我們希望它只在最上方顯示 ( 會隨著滾動一起往上 ),所以我們可以新增設定

ul {
	/* 
     * 一些本來的設定
     */

    background-attachment: local;
}

可以做到這個效果後,就很方便了~!!
我們可以設定多個背景,其中陰影設為 scroll、在設定一個白色的 local 區塊 ( 用來擋住陰影的 ),這樣就能做到 "滑到頂時沒有陰影" 的效果了。

https://jsfiddle.net/lazy_shyu/7t0fdrqx/3/

最後下方的陰影也比照辦理就可以了~
https://jsfiddle.net/lazy_shyu/7t0fdrqx/4/


以上是理想狀況,在 firefox 跟 safari 瀏覽的狀況也符合預期,
但討厭的是,chrome 上面的效果並不好 ( background 的疊加效果不如預期 Orz )
我還沒查到原因,之後如果找到相關的討論的話會再補上。

最後用 ::before 跟 ::after 做了一個替代方案:
https://jsfiddle.net/7t0fdrqx/6/


上一篇
30 天 CSS 隨手筆記 - 第 17 天 - UX 相關的眉角 ( 1/3 )
下一篇
30 天 CSS 隨手筆記 - 第 19 天 - UX 相關的眉角 ( 3/? )
系列文
30 天 CSS 隨手筆記30

1 則留言

1
kc
iT邦新手 4 級 ‧ 2017-01-03 10:33:32

現在才知道 google 搜尋上面的bar是可以左右滑的....(遮臉

lazy_shyu iT邦新手 5 級 ‧ 2017-01-03 21:33:36 檢舉

朋友朋友 XD

我要留言

立即登入留言