选择适当的鼠标指针

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


    
    Awesome!

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

}

弹出框加模糊背景

在弹出框弹出的同时，将其余的背景元素模糊掉。


    
        
        各种其他元素
    
    啊哈哈哈哈哈哈

点击按钮时，将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小图标太小，用伪元素加了个显眼的。


    
        
    
    

.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

大体的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 + '%';
};

CSS Secret——User Experience