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內置光標效果：

css3 內置光標效果：

二：擴大可點擊區域

這也是咱們平時作頁面的時候，能夠優化的一點，儘量的擴大可點擊區域，這樣用戶更容易到底可點擊的區域。

例以下圖：咱們不要只給➕ 設置點擊 事件，而是給整個圓圈區域設置點擊事件。

三：經過陰影來弱化背景

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

方案一：陰影部分用一層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);
}
複製代碼

肯定：瀏覽器的兼容性有限

四：經過模糊來弱化背景

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

代碼以下：

<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);
}
複製代碼

五：滾動提示

首先，咱們看一下效果：

思路講解： 首先，上下的陰影效果能夠經過設置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;
}
複製代碼