CSS提高用戶體驗的那些事

浠ラ箍發布于2019-08-29 12:20 / 983人閱讀

1. 選擇合適的鼠標光標

在有一些觸摸屏上我們可能需要隱藏鼠標的光標，比如說播放器的屏幕上，這種情形下隱藏鼠標光標能帶來性能方面的提升。

使用cursor: none;可以達到隱藏鼠標光標的效果。

對于一些舊的瀏覽器可能不支持這些新的光標關鍵字，可以通過使用老的方式，用一張1 * 1 的透明GIF圖片，然后這樣做：

video {
    cursor: url("transparent.gif");
}

最后我們生成隱藏鼠標光標的兼容各種情況的css代碼如下：

video {
    cursor: url("transparent.gif");
    cursor: none;
}

2. 擴大按鈕的可點擊區域

可點擊區域向外擴張往往也可以帶來可用性的提升。沒有人愿意對一個狹小的按鈕嘗
試點按很多次

比如把元素的熱區在四個方向上各向外擴大10px，解決辦法：

（1）給button增加border，代碼如下：

button {
    padding: 20px;
    cursor: pointer;
    border: 10px solid transparent;
    background: #58a linear-gradient(#77a0bb, #58a);
    /* 
     * border會同時讓按鈕變大
     * 因為背景在默認情況下會蔓延到邊框的下層
     * 使用 background-clip 屬性可以把背景限制在原本的區域內
     */
    background-clip: padding-box;
}

效果如下：

這種解決方案并不是很好，邊框會影響布局，并且有的場景并不能使用邊框，另一種解決方案就是偽元素法，偽元素同樣可以代替其宿主元素來響應鼠標交互。

（2）偽元素法：原理就是偽元素在四個方向都設置成比宿主大10px，基于偽元素的方法很靈活，基本上可以把熱區設置為任何想要的尺寸、位置或形狀，甚至可以脫離元素原有的位代碼如下：

.button {
    position: relative;
    /*其他的樣式*/
}
.button::after {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
}

3.自定義復選框的樣式

復選框和單選框這兩種控件在絕大多數瀏覽器中仍然是幾乎或完全無法設置樣式的，解決方法可以通過label元素來設置樣式，然后把真正的復選框隱藏起來，代碼如下：

html部分


Awesome

css部分

input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 4px;
    border-radius: 4px;
    background: silver;
    text-indent: 2px;
    line-height: 13px;
}

效果如下：

還可以設置各種狀態的樣式，checked、focus、disabled。

4.通過模糊弱化背景

將背景虛化來突出當前的文本內容

解決代碼如下：

html部分


    
      這是背景
    
    
      i am a dialog

css部分

.virtual-container {
  width: 1000px;
  height: 500px;
  position: relative;
}
.main {
  width: 100%;
  height: 100%;
  transition: .6s filter;
  background: #ccc;
  
}

.virtual-container:hover .main {
  filter: blur(2px) contrast(.8) brightness(.8);
} 

.virtual-container .alert {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
    background: #fff;
}

效果對比圖如下：

5.交互式的圖片對比控件

對比兩張圖片的排布方式是經常出現的，為了突出圖片反應的問題
比如這種的圖片對比交互：

應用了一點jQuery，實現的代碼如下：

html部分

css部分

.image-slider {
    position:relative;
    display: inline-block;
}
.image-slider > div {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 50%; /* 初始寬度 */
    overflow: hidden; /* 讓它可以裁切圖片 */
}
.image-slider img {
    display: block;
    user-select: none;
    width: 400px;
    height: 400px;
}
.image-slider input {
    position: absolute;
    left: 0;
    bottom: 10px;
    margin: 0;
    /*
     * 增加range的大小，提升用戶的體驗
     * 先減小它的寬度，在用變形將它放大
     */
    width: 50%;
    transform: scale(2);
    transform-origin: left bottom;
}

js部分

var slider = $(".image-slider");
var div = document.createElement("div");
$(".before").wrap("");

var range = document.createElement("input");
range.type = "range";
range.oninput = function() {
  $(".img-continer").width(this.value + "%");
}; 
slider.append(range);

GPU云服務器云服務器云服務器那些事用戶體驗的用戶體驗的要素用戶體驗

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111824.html

前端入坑指南

摘要：作為自學兩年的初級前端，希望對那些想入門前端開發的人分享一些觀點。尤其是這幾年前端領域飛速的發展，新東西層出不窮。或者關注下我的微信公眾號前端獲取每天分享前端入門知識。為什么選擇前端做一件事之前最好問問自己為什么要做，然后再去思考該怎么做。如果只是看到別人做了，并且有很不錯的收入，然后自己就決定做了，很可能中途放棄浪費掉很多時間。起碼問自己一個問題：我是否真的熱愛這個領域，并且很樂意在這個...

junnplus 2019-05-22 15:27 評論0 收藏0
關于CSS Reset 那些事（四）之構架CSS基礎樣式庫

摘要：現在回到我們這一章節的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。前言先來回顧一下前幾章節，我們都說了哪些內容： CSS Reset 歷史與 Normalize.css 介紹 Normalize.css...

mj 2019-08-28 18:13 評論0 收藏0
關于CSS Reset 那些事（四）之構架CSS基礎樣式庫

摘要：現在回到我們這一章節的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。前言先來回顧一下前幾章節，我們都說了哪些內容： CSS Reset 歷史與 Normalize.css 介紹 Normalize.css...

Yu_Huang 2019-08-01 14:48 評論0 收藏0
CSS居中那些事

摘要：定寬塊狀元素滿足定寬和塊狀兩個條件的元素是可以通過設置左右值為來實現居中的。設置方法改變塊級元素的為類型設置為行內元素顯示，然后使用來實現居中效果。做前端這一年多來，其實一直都是偏向于js前后端，css什么的總是抱著夠用就好的心態，從來沒有系統的學習或總結過，結果現在的水平也一直停留在夠用的階段。感覺作為一名合格的前端工程師，不能讓css成為自己的短板，于是簡單的總結一下，高手繞路。...

dingding199389 2019-08-30 13:13 評論0 收藏0