您的位置：首页 > Web前端 > CSS

CSS Secret——User Experience

2016-07-05 16:53 323 查看

选择适当的鼠标指针

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航