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

沉默抒懷者發表於2019-05-05

全目錄

本系列文章,主要是圍繞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;
}
複製程式碼

相關文章