css揭秘笔记——用户体验
選用合適的鼠標光標
css3提供了一大批內建光標(cursor)
其中某些光標很突出，因為只需要花費極少的代碼，就可以迅速地提升大量網頁應用的可用性。
比如禁用（not-allowed），比如，公共觸摸屏中隱藏光標，可以直接使用cursor:none搞定，而不需要額外的透明圖片。
擴大可點擊區域
將點擊區域（熱區）向外擴張可以提升可用性。
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; }
添加選中的樣式：
#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; }
開關式按鈕
各種需要保持狀態的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: www.97yingyuan.org 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元素。
方案一：
增加一個額外的HTML元素用于遮擋背景：
這個方法穩定可靠，但需要增加一個額外的元素。
方案二：
使用偽元素。
這個方法移植性不好，<body>的偽元素可能被其他需要占用了。
或者，可以把遮罩交給要凸顯的元素的偽元素來實現，偽元素設置z-index:-1;。
但是，這樣不能保證遮罩出現在這個元素后面，還是這個元素的父元素或祖先元素后面。
另外，偽元素無法綁定獨立的JavaScript事件處理函數。
方案三：
使用box-shadow模擬遮罩。
這里的擴張半徑用了vmax這個單位。首先，一個固定值無法滿足不同屏幕大小的情況。然后只能用視口單位來解決。1vmax相當于1vw和1vh兩者中的較大值。100vw等于整個視口的寬度，100vh相當于視口的高度。
這個方案有兩個嚴重的問題：
-
遮罩層的尺寸和視口有關，當我們滾動頁面時，遮罩層就露出來了，除非給它加上position:absolute;。所以要么頁面不需要滾動，97影院要么加固定定位。
-
box-shadow不能捕獲指針事件，而且也不能阻止鼠標和其他組件交互，只能在視覺上引導注意力。
方案四：
使用<dialog>元素及其::backdrop偽元素
但是目前這個元素支持度不高。。
通過模糊來弱化背景
為了達到“景深效果”，也就是當我們的實現聚焦在較近的物體上時，遠處的背景就是虛的，我們可以用之前的毛玻璃效果，但是要模糊掉除了凸顯元素之外的其他所有元素，不能將虛化濾鏡放在<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);/*回退方案*/ }
滾動提示
要實現滾動元素時，容器上下有淡淡的陰影提示，如：
background-attachment的一個新屬性local，會隨內容滾動，當滑到最頂端時，上面的遮罩層遮住陰影層，滑到最底端時，下面的遮罩層遮住陰影層；在中間時，兩個陰影層不會被遮住。
轉載于:https://www.cnblogs.com/xinshijue6080/p/7868546.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的css揭秘笔记——用户体验的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： webpack搭建自己的项目
- 下一篇： 重写与重载的区别 以及 重写中super