css揭秘筆記——用戶體驗(yàn)

huaixiaoz 發(fā)布于2019-08-29 13:49 / 1843人閱讀

摘要：使用透明邊框增大熱區(qū)面積，但和并不能阻止背景擴(kuò)大到邊框下面模擬原有邊框自定義復(fù)選框思路使用與復(fù)選框綁定的的偽元素模擬一個(gè)勾選框，可以自定義其樣式，將原來(lái)的復(fù)選框隱藏。這種方式被稱為復(fù)選框。

選用合適的鼠標(biāo)光標(biāo)

css3提供了一大批內(nèi)建光標(biāo)(cursor)
其中某些光標(biāo)很突出，因?yàn)橹恍枰ㄙM(fèi)極少的代碼，就可以迅速地提升大量網(wǎng)頁(yè)應(yīng)用的可用性。
比如禁用（not-allowed），比如，公共觸摸屏中隱藏光標(biāo)，可以直接使用cursor:none搞定，而不需要額外的透明圖片。

擴(kuò)大可點(diǎn)擊區(qū)域

將點(diǎn)擊區(qū)域（熱區(qū)）向外擴(kuò)張可以提升可用性。

cursor: pointer;
border: 20px solid transparent; /*使用透明邊框增大熱區(qū)面積，但box-shadow和outline并不能*/
background-clip: padding-box;  /*阻止背景擴(kuò)大到邊框下面*/
box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset; /*模擬原有邊框*/

自定義復(fù)選框

思路：使用與復(fù)選框綁定的label的偽元素模擬一個(gè)勾選框，可以自定義其樣式，將原來(lái)的復(fù)選框隱藏。這種方式被稱為“復(fù)選框hack”。


Awesome

#awesome + label::before{
    content: "a0"; /*不換行空格*/
    display: inline-block;
    vertical-align: .2em;
    width: .8em;
    height: .8em;
    margin-right: .2em;
    border-radius: .2em;
    background: silver;
    /*text-indent: .15em;*/
    line-height: .65;
}

添加選中的樣式：

#awesome:checked + label::before{
    content: "2713"; /*不換行空格*/
    background: yellowgreen;
}

隱藏原來(lái)的復(fù)選框：

#awesome{
    position: absolute;
    clip: rect(0,0,0,0); /*clip只應(yīng)用在已定位的元素上*/
}

還可以添加聚焦的樣式：

#awesome:focus + label::before{
    box-shadow: 0 0 .1em .1em #58a;
}

禁用樣式：

#awesome:disabled + label::before{
    background: gray;
    box-shadow: none;
    color: #333;
}

開(kāi)關(guān)式按鈕

各種需要保持狀態(tài)的UI組件，比如模態(tài)對(duì)話框、下拉菜單、標(biāo)簽頁(yè)、跑馬燈等，都可以使用上面的“復(fù)選框hack”的思路模擬，只不過(guò)開(kāi)關(guān)式按鈕不需要偽元素，直接把label設(shè)置為按鈕的樣式就可以了。

#switch{
    position: absolute;
    clip: rect(0,0,0,0);
}
#switch + label {
    font-size: 1.5em;
    display: inline-block;
    padding: .3em .5em;
    background: #ccc;
    background-image: linear-gradient(#ffffd, #bbb);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .2em;
    box-shadow: 0 1px white inset;
    text-align: center;
    text-shadow: 0 1px 1px white;
}
#switch:checked + label{
    box-shadow: .05em .1em .2em rgba(0,0,0, .6) inset;
    border-color: rgba(0,0,0,.3);
    background: #bbb;
}

通過(guò)陰影來(lái)弱化背景

增加一層半透明遮罩把后面的一切整體調(diào)暗，來(lái)凸顯某個(gè)特定的UI元素。

方案一：
增加一個(gè)額外的HTML元素用于遮擋背景：

.overlay{
    position:fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
    background: rgba(0,0,0,.8);
}
.lightbox{
    position: absolute;
    z-index: 1;
}

這個(gè)方法穩(wěn)定可靠，但需要增加一個(gè)額外的元素。

方案二：
使用偽元素。

body.dimmed::before{
    position:fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
    background: rgba(0,0,0,.8);      
}

這個(gè)方法移植性不好，的偽元素可能被其他需要占用了。

或者，可以把遮罩交給要凸顯的元素的偽元素來(lái)實(shí)現(xiàn)，偽元素設(shè)置z-index:-1;。
但是，這樣不能保證遮罩出現(xiàn)在這個(gè)元素后面，還是這個(gè)元素的父元素或祖先元素后面。
另外，偽元素?zé)o法綁定獨(dú)立的JavaScript事件處理函數(shù)。

方案三：
使用box-shadow模擬遮罩。

box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);

這里的擴(kuò)張半徑用了vmax這個(gè)單位。首先，一個(gè)固定值無(wú)法滿足不同屏幕大小的情況。然后只能用視口單位來(lái)解決。1vmax相當(dāng)于1vw和1vh兩者中的較大值。100vw等于整個(gè)視口的寬度，100vh相當(dāng)于視口的高度。
這個(gè)方案有兩個(gè)嚴(yán)重的問(wèn)題：

遮罩層的尺寸和視口有關(guān)，當(dāng)我們滾動(dòng)頁(yè)面時(shí)，遮罩層就露出來(lái)了，除非給它加上position:absolute;。所以要么頁(yè)面不需要滾動(dòng)，要么加固定定位。

box-shadow不能捕獲指針事件，而且也不能阻止鼠標(biāo)和其他組件交互，只能在視覺(jué)上引導(dǎo)注意力。

方案四：
使用

元素及其::backdrop偽元素

dialog::backdrop{
    background: rgba(0,0,0,.8);
}

但是目前這個(gè)元素支持度不高。。

通過(guò)模糊來(lái)弱化背景

為了達(dá)到“景深效果”，也就是當(dāng)我們的實(shí)現(xiàn)聚焦在較近的物體上時(shí)，遠(yuǎn)處的背景就是虛的，我們可以用之前的毛玻璃效果，但是要模糊掉除了凸顯元素之外的其他所有元素，不能將虛化濾鏡放在元素上，因?yàn)椋@樣，要凸顯的元素也被模糊掉了。這時(shí)，我們需要一個(gè)元素包裹住頁(yè)面上除了彈出框之外的所有內(nèi)容元素。當(dāng)彈出一個(gè)對(duì)話框時(shí)，就給這個(gè)元素加一個(gè)類(lèi)，來(lái)應(yīng)用模糊濾鏡。

main{
  transition: filter 1s;
}
main.de-emphasized{
  filter: blur(5px) contrast(.8) brightness(.8);
}
dialog{
    box-shadow: 0 0 0 50vmax rgba(0,0,0, .2);/*回退方案*/
}

滾動(dòng)提示

要實(shí)現(xiàn)滾動(dòng)元素時(shí)，容器上下有淡淡的陰影提示，如：

ul{
  overflow: auto;
  width: 10em;
  height: 8em;
  padding: .3em .5em;
  border: 1px solid silver;
  margin-right: -15px;

  background:
      linear-gradient(white 30%, rgba(255,255,255,0)), /*上面遮罩層*/
      radial-gradient(at top, rgba(0,0,0, .3), transparent 70%),/*上面陰影層*/
      linear-gradient(rgba(255,255,255,0)  30%, white),/*下面遮罩層*/
      radial-gradient(at bottom, rgba(0,0,0, .3), transparent 70%);/*下面陰影層*/
  background-attachment: local, scroll, local, scroll; /*遮罩層設(shè)為local，陰影層默認(rèn)值*/
  background-size: 100% 50px, 100% 15px,100% 50px, 100% 15px;
  background-repeat:  no-repeat;
  background-position: top, top, bottom, bottom;
}

background-attachment的一個(gè)新屬性local，會(huì)隨內(nèi)容滾動(dòng)，當(dāng)滑到最頂端時(shí)，上面的遮罩層遮住陰影層，滑到最底端時(shí)，下面的遮罩層遮住陰影層；在中間時(shí)，兩個(gè)陰影層不會(huì)被遮住。