css揭祕筆記——用戶體驗

時間 2019-12-09

標籤 css 揭祕筆記用戶體驗欄目 CSS 简体版

原文原文鏈接

選用合適的鼠標光標

css3提供了一大批內建光標(cursor)
其中某些光標很突出，由於只須要花費極少的代碼，就能夠迅速地提高大量網頁應用的可用性。
好比禁用（not-allowed），好比，公共觸摸屏中隱藏光標，能夠直接使用cursor:none搞定，而不須要額外的透明圖片。css

擴大可點擊區域

將點擊區域（熱區）向外擴張能夠提高可用性。css3

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

自定義複選框

思路：使用與複選框綁定的label的僞元素模擬一個勾選框，能夠自定義其樣式，將原來的複選框隱藏。這種方式被稱爲「複選框hack」。函數

<input type="checkbox" id="awesome" disabled="true" checked="true">
<label for="awesome">Awesome</label>

#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;
}

添加選中的樣式：spa

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

隱藏原來的複選框：指針

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

還能夠添加聚焦的樣式：code

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

禁用樣式：事件

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

開關式按鈕

各類須要保持狀態的UI組件，好比模態對話框、下拉菜單、標籤頁、跑馬燈等，均可以使用上面的「複選框hack」的思路模擬，只不過開關式按鈕不須要僞元素，直接把label設置爲按鈕的樣式就能夠了。圖片

#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(#ddd, #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;
}

經過陰影來弱化背景

增長一層半透明遮罩把後面的一切總體調暗，來凸顯某個特定的UI元素。ip

方案一：
增長一個額外的HTML元素用於遮擋背景：get

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

這個方法穩定可靠，但須要增長一個額外的元素。

方案二：
使用僞元素。

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

這個方法移植性很差，<body>的僞元素可能被其餘須要佔用了。

或者，能夠把遮罩交給要凸顯的元素的僞元素來實現，僞元素設置z-index:-1;。
可是，這樣不能保證遮罩出如今這個元素後面，仍是這個元素的父元素或祖先元素後面。
另外，僞元素沒法綁定獨立的JavaScript事件處理函數。

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

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

這裏的擴張半徑用了vmax這個單位。首先，一個固定值沒法知足不一樣屏幕大小的狀況。而後只能用視口單位來解決。1vmax至關於1vw和1vh二者中的較大值。100vw等於整個視口的寬度，100vh至關於視口的高度。
這個方案有兩個嚴重的問題：

遮罩層的尺寸和視口有關，當咱們滾動頁面時，遮罩層就露出來了，除非給它加上position:absolute;。因此要麼頁面不須要滾動，要麼加固定定位。
box-shadow不能捕獲指針事件，並且也不能阻止鼠標和其餘組件交互，只能在視覺上引導注意力。

方案四：
使用<dialog>元素及其::backdrop僞元素

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

可是目前這個元素支持度不高。。

經過模糊來弱化背景

爲了達到「景深效果」，也就是當咱們的實現聚焦在較近的物體上時，遠處的背景就是虛的，咱們能夠用以前的毛玻璃效果，可是要模糊掉除了凸顯元素以外的其餘全部元素，不能將虛化濾鏡放在<body>元素上，由於，這樣，要凸顯的元素也被模糊掉了。這時，咱們須要一個<mian>元素包裹住頁面上除了彈出框以外的全部內容元素。當彈出一個對話框時，就給這個元素加一個類，來應用模糊濾鏡。

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);/*回退方案*/
}

滾動提示

要實現滾動元素時，容器上下有淡淡的陰影提示，如：

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; /*遮罩層設爲local，陰影層默認值*/
  background-size: 100% 50px, 100% 15px,100% 50px, 100% 15px;
  background-repeat:  no-repeat;
  background-position: top, top, bottom, bottom;
}

background-attachment的一個新屬性local，會隨內容滾動，當滑到最頂端時，上面的遮罩層遮住陰影層，滑到最底端時，下面的遮罩層遮住陰影層；在中間時，兩個陰影層不會被遮住。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。