選擇適當的鼠標指針

CSS3級別提供了更加豐富的鼠標樣式，包括隱藏指針的none。善用他們。none在不支持的瀏覽器中可以使用這樣的方式來fallback：

cursor: url('transparent.gif'); 
cursor: none;

擴大可點擊區域

這樣不僅對觸摸設備更加友好，而且根據Fitts’ Law，（用於估算用戶移動光標點擊鏈接或控件按鈕所需的時間）目的地明確的移動可以細分爲兩個部分：首先一個大幅度的移動將光標移向與目標大致相同的方向和區域；緊接着是一系列精細的小幅度微調來將光標精確定位在目標中心。更大的點擊區域會給用戶提供更大的方便。

添加透明邊框

border: 10px solid transparent; 
background-clip: padding-box;

如果這時你還想使用邊框樣式的話，可以用之前提到的box-shadow來模擬。

添加僞元素

有時不能添加邊框，那麼最保險的方法就是僞元素了：

#button::before {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}

定製的checkbox

各種用戶代理對checkbox的限制都非常大，我們想要一個自由樣式的checkbox很難，我們得想個辦法來繞過這些限制。
我們隱藏原來的checkbox，使用一個在label前的僞元素替代它。

傳統的checkbox

<div id="customCheckbox">
    <input type="checkbox" id="awesome" />
    <label for="awesome">Awesome!</label>
</div>
input[type="checkbox"] {
  position: absolute;
  clip: rect(0,0,0,0);
}

input[type="checkbox"] + label::before {
  content: '\a0'; /* non-break space */
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-right: .2em;
  border-radius: .2em;
  background: silver;
  text-indent: .15em;
  line-height: .65;
}

我們隱藏它的方法並不能使用display: none，因爲這樣就失去了checkbox在form中的作用。我們換而使用clip來隱藏它。
在切換選中狀態時，可以使用：

input[type="checkbox"]:checked + label::before {
  content: '\2713';
  background: yellowgreen;
}

被按下去的開關

思想是一樣的，就是另一種樣式咯。

#toggledButton{
  input[type="checkbox"] {
    position: absolute;
    clip: rect(0,0,0,0);
  }
  input[type="checkbox"] + label {
    display: inline-block;
    padding: .3em .5em;
    background: #ccc;
    background-image:
            linear-gradient(#ddd, #bbb);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3em;
    box-shadow: 0 1px white inset;
    text-align: center;
    text-shadow: 0 1px 1px white;
  }
  input[type="checkbox"]:checked + label, input[type="checkbox"]:active + label {
    box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
    border-color: rgba(0,0,0,.3);
    background: #bbb;
  }

}

彈出框加模糊背景

在彈出框彈出的同時，將其餘的背景元素模糊掉。

<body>
    <main>
        <button id="blur-pop">彈出框</button>
        各種其他元素
    </main>
    <div class="model">啊哈哈哈哈哈哈</div>
</body>

點擊按鈕時，將main裏的所有東西模糊掉，彈出彈出框。

main {
  transition: 1s all;
}
main.de-emphasized {
  -webkit-filter: blur(3px) contrast(.8) brightness(.2);
  filter: blur(3px) contrast(.8) brightness(.2);
}
.model{
  position: fixed;
  top:20%;
  bottom:20%;
  left:20%;
  right:20%;
  background-color: crimson;
  display:none;
}

可滾動提示

許多現代的瀏覽器對滾動條在未發生滾動的都是默認隱藏的，因爲它們並不好看，而且現在人們都傾向於使用手勢和滾輪來控制滾動，滾動條更多的起到的是一個指示的作用。
有時會出現這樣的問題，有一塊內容是可以滾動的，然而由於瀏覽器隱藏了滾動條，造成了用戶並不知道這裏是可以滾動的。

Google Reader的設計者給出了一個很好的設計方案，在整個內容的上下邊界中可滾動的方向上，加上一個陰影，就好像表示滾動的內容被蓋在了什麼內容的下面，這樣人們一看就知道要可以向哪個方向滾動。
我們在內容框的上下放上不隨內容滾動的兩個陰影：

#srollHint{
  overflow: auto;
  width: 10em;
  height: 8em;
  padding: .3em .5em;
  border: 1px solid silver;
  background: 
    radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0 / 100% 15px,
    radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom / 100% 15px,
    #fff;
  background-repeat: no-repeat;
  background-attachment: scroll, scroll;
}

再在上下放上隨內容滾動的白色漸變，當上下滾動到頭的時候，白色漸變就蓋住了兩個陰影。

#srollHint{
  overflow: auto;
  width: 10em;
  height: 8em;
  padding: .3em .5em;
  border: 1px solid silver;
  background: linear-gradient(white 15px, hsla(0,0%,100%,0)) 0 0 / 100% 50px,
    radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0 / 100% 15px,
    linear-gradient(to top, white 15px, hsla(0,0%,100%,0)) bottom / 100% 50px,
    radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom / 100% 15px,
    #fff;
  background-repeat: no-repeat;
  background-attachment: local, scroll, local, scroll;
}

圖片比較

有兩張圖片，想要向用戶展示兩張圖片的不同，有什麼好的展現方式呢？
最簡單的就是把兩張圖片並排放置，但這樣有些微小的差別是不容易被發現的。
一個比較好的實現方式是，兩張圖重合放置，通過左右拖動上面那張圖的右邊界可以顯示出下面這張圖，這樣用戶慢慢的拖動就可以在這個過程中注意到圖片的不同。

CSS實現

我們可以通過CSS的resize屬性來實現這個想法。
原始的resize小圖標太小，用僞元素加了個顯眼的。

<div class="image-slider">
    <div>
        <img src="img/adamcatlace.jpg" alt="Before" />
    </div>
    <img src="img/tiger.jpg" alt="After" />
</div>
.image-slider {
  position:relative;
  display: inline-block;
}
.image-slider > div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%; /* Initial width */
  overflow: hidden;
  resize: horizontal;
}
.image-slider > div::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  padding: 5px;
  background:
          linear-gradient(-45deg, white 50%, transparent 0);
  background-clip: content-box;
  cursor: ew-resize;
}

.image-slider img {
  display: block;
  width:400px;
}

input Range

另一種辦法使用一點點小的JS

<div class="image-slider-range">
    <div>
        <img src="img/adamcatlace.jpg" alt="Before" />
    </div>
    <img src="img/tiger.jpg" alt="After" />
    <input type="range" />
</div>

大體的HTML沒有什麼變化，就是多了個range類型的input，給這個類型的input綁上一個事件，在它被拖動的時候帶動上層的DIV的邊界移動，就達到了我們想要的效果。

.image-slider-range {
  position:relative;
  display: inline-block;
}
.image-slider-range > div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
}
.image-slider-range img {
  display: block;
  user-select: none;
  width:400px;
}
.image-slider-range input {
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  margin: 0;
}
$$(".image-slider-range input")[0].oninput = function() {
    $$(".image-slider-range>div")[0].style.width = this.value + '%';
};

exialym

發佈了128 篇原創文章 · 獲贊 6 · 訪問量 15萬+

私信關注

CSS Secret——User Experience

選擇適當的鼠標指針

擴大可點擊區域

添加透明邊框

添加僞元素

定製的checkbox

傳統的checkbox

被按下去的開關

彈出框加模糊背景

可滾動提示

圖片比較

CSS實現

input Range

CSS Secret——Visual Effect

CSS Secret——Backgrounds & Borders

CSS學習8（浮動和定位）

CSS Secret——Typography

Node——異步編程

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結