css揭祕實戰技巧 - 使用者體驗[五]

沉默抒懷者發表於2019-05-05
原文網址 : https://juejin.im/post/5cbdb0e6f265da03ab2327ed
CSS

全目錄

本系列文章，主要是圍繞css3屬性，實現我們常見的各種效果，這些效果都是我們實戰開發中經常可以用到的效果：

  1. css揭祕實戰技巧- 背景與邊框 [一]
  2. css揭祕實戰技巧- 形狀 [二]
  3. css揭祕實戰技巧 - 視覺效果[三]
  4. css揭祕實戰技巧 - 字型排印[四]
  5. css揭祕實戰技巧 - 使用者體驗[五]
  6. css揭祕實戰技巧 - 結構與佈局[六]
  7. css揭祕實戰技巧 - 過渡與動畫[七]

前言

  1. 選用合適的滑鼠游標
  2. 擴大點選區域
  3. 通過陰影來弱化背景
  4. 通過模糊來弱化背景
  5. 滾動提示

一：選用合適的滑鼠游標

平時開發中，我們經常會這是滑鼠游標的效果，那最長設定的就是cursor:pointer;表示可點選的，那麼其實還有其他一些我們不常用，但卻非常有用的游標效果：

  1. pointer: 可點選
  2. not-allowed: 不允許點選
  3. context-menu：表示元素有上下文選單
  4. move: 表示元素可以移動的時候
  5. help: 有幫助資訊的時候
  6. copy: 比如：某一按鈕點選會將文案複製到其他地方或者剪下板的效果，就可以設定為copy
  7. none: 不顯示滑鼠游標（某些不希望使用者操作的時候，該效果是可以使用的）

以下是所有游標的效果：我們只需要記住上面這些常用的效果即可。 css2.1內建游標效果：

css揭祕實戰技巧 - 使用者體驗[五]
css3 內建游標效果：
css揭祕實戰技巧 - 使用者體驗[五]

二：擴大可點選區域

這也是我們平時做頁面的時候，可以優化的一點，儘可能的擴大可點選區域，這樣使用者更容易到底可點選的區域。

例如下圖：我們不要只給➕ 設定點選 事件，而是給整個圓圈區域設定點選事件。

css揭祕實戰技巧 - 使用者體驗[五]

三：通過陰影來弱化背景

首先，我們來看一下效果：

css揭祕實戰技巧 - 使用者體驗[五]

方案一：陰影部分用一層div包括，並且設定透明度，

/* 用於遮擋背景 */ position: fixed;
.overlay { 
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.8);
}
/* 需要吸引使用者注意的元素 */
.lightbox { 
    position: absolute; z-index: 1;
    /* [其餘樣式] */
}
複製程式碼

方案二：用偽元素代替 外層的div

.lightbox::before { 
    position: fixed; top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: rgba(0,0,0,.8);
}
複製程式碼

缺點：偽元素無法繫結獨立的javascript事件處理的回撥函式。

方案三：採用box-shadow

box-shadow: 0 0 0 999px rgba(0,0,0,.8); //此時陰影半徑必須設定的足夠大
或者
box-shadow: 0 0 0 50vmax rgba(0,0,0,.8); //將陰影半徑設定為視口的寬高。
複製程式碼

缺點：陰影也無法繫結獨立的javascript事件處理的回撥函式。

方案四：採用dialog的backdrop屬性

//設定dialog元素的::backdrop偽元素，
dialog::backdrop {
    background: rgba(0, 0, 0, .8);
}
複製程式碼

確定：瀏覽器的相容性有限

四：通過模糊來弱化背景

首先，來看一下我們想要實現的效果：

css揭祕實戰技巧 - 使用者體驗[五]

程式碼如下：

<main>Bacon Ipsum dolor sit amet...</main> 
<dialog>
    O HAI, I'm a dialog. Click on me to dismiss.
</dialog>
複製程式碼
main{
    filter: blur(3px) contrast(.8) brightness(.8);
}
複製程式碼

五：滾動提示

首先，我們看一下效果：

css揭祕實戰技巧 - 使用者體驗[五]
思路講解： 首先，上下的陰影效果可以通過設定radial-gradient實現，滾動到頂部或者底部的時候，陰影消失，可以通過另外加一層白色陰影去覆蓋即可，然後通過backgroud-attachment控制陰影是否在滾動時顯示。

程式碼如下：

ul {
    overflow: auto;
    width: 20em;
    height: 12em;
    padding: .3em .5em;
    border: 1px solid silver;
    background: linear-gradient(white, white) 0 0 / 100% 50px,
                radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0/ 100% 15px,
                linear-gradient(to top, white, white) bottom/ 100% 50px,
                radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom/ 100% 15px;
    background-repeat: no-repeat;
    background-attachment: local, scroll, local, scroll;
}
複製程式碼

相關文章