css揭秘筆記——用戶體驗

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

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

選用合適的鼠標光標

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

擴大可點擊區(qū)域

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

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

自定義復選框

思路：使用與復選框綁定的label的偽元素模擬一個勾選框，可以自定義其樣式，將原來的復選框隱藏。這種方式被稱為“復選框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;
}

隱藏原來的復選框：

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

還可以添加聚焦的樣式：

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

禁用樣式：

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

開關式按鈕

各種需要保持狀態(tài)的UI組件，比如模態(tài)對話框、下拉菜單、標簽頁、跑馬燈等，都可以使用上面的“復選框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(#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;
}

通過陰影來弱化背景

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

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

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

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

方案二：
使用偽元素。

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

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

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

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

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

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

遮罩層的尺寸和視口有關，當我們滾動頁面時，遮罩層就露出來了，除非給它加上position:absolute;。所以要么頁面不需要滾動，要么加固定定位。

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

方案四：
使用

元素及其::backdrop偽元素

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

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

通過模糊來弱化背景

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

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

滾動提示

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

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，會隨內(nèi)容滾動，當滑到最頂端時，上面的遮罩層遮住陰影層，滑到最底端時，下面的遮罩層遮住陰影層；在中間時，兩個陰影層不會被遮住。

GPU云服務器云服務器有道云筆記軟件體驗用戶體驗用戶體驗部用戶體驗的

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

轉載請注明本文地址：http://systransis.cn/yun/112727.html

css揭秘筆記——視覺效果

摘要：實現(xiàn)染色效果的混合模式是，它會保留上層元素的高亮信息，并從它的下層吸取色相和飽和度信息。當我們只有一個背景圖像及一個透明背景色時，就不會有任何混合效果。投影知識點 box-shadow: [inset]? 注意：在元素正下方的投影被裁切掉了，是沒有的；而text-shadow不同，文字下方的投影不會被裁切。 box-shadow的第三個參數(shù)是模糊半徑，假如設置4px...

skinner 2019-08-29 13:48 評論0 收藏0
[CSS]《CSS揭秘》第六章——用戶體驗

摘要：定義和用法標簽為元素定義標注標記。元素不會向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標用戶改進了可用性。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。選用合適的鼠標光標 #testdiv{ cursor:not-allowed; /* cursor:none;//例如視頻界面隱藏鼠標 */ } 擴大可點擊區(qū)域 .testdiv{...

simon_chen 2019-08-30 15:54 評論0 收藏0
《css 揭秘》讀書筆記

摘要：因為鮮為人知的第四個長度參數(shù)雙層投影毛玻璃效果見毛玻璃自定義復選框不多介紹，也有相關案例復選框滾動提示現(xiàn)在越來越多的移動端都是這樣處理，滾動提示其他揭秘對應的地址圖靈圖書在封底都提供優(yōu)惠碼低價購買電子書她目標如何用 css 解決難題收獲盡量減少代碼重復 1 用相對值 font-size: 20px; line-height: 30px; // 應該改成 font-size:...

OnlyMyRailgun 2019-08-29 13:20 評論0 收藏0
css編碼技巧【css揭秘讀書筆記】

摘要：最近在看揭秘，于是寫了文章來作筆記，除此以外還會補充一些自己遇到的筆試題。舉例說明以上的代碼有什么問題呢如果需要改變字號，那么同時需要調(diào)整行高。那么經(jīng)過修改后的代碼如下關于使用還是還是百分比，需要根據(jù)具體情況來決定。最近在看《css揭秘》，于是寫了文章來作筆記，除此以外還會補充一些自己遇到的筆試題。希望大家都有所收獲。 css編碼技巧盡量減少代碼重復在實踐中，代碼可維護性的最大要...

Miyang 2019-08-30 12:59 評論0 收藏0
css揭秘筆記——字體排版

摘要：現(xiàn)實中的文字效果圖版印刷效果空心字效果效果可以說有點差了，所以不適合描邊寬的樣式。插入換行 Name: zhanglu Email: [email protected] [email protected] Location: Earth 如何讓上面這一段HTML變成這個樣子： showI...

XboxYan 2019-08-29 13:48 評論0 收藏0