此篇博客是学习《CSS 揭秘》一书的学习笔记。
1. 扩大可点击区域
对于那些较小、难以瞄准的控件来说，如果不能放大其视觉尺寸，将其可点击区域扩大也可以提升用户体验。
透明边框
扩张热区最简单的办法就是为它设置一圈透明边框，如下方右边的按钮有 10px 宽的透明边框。
+
+
HTML
1
2
<div class="btn-6-1" title="扩大可点击区域之前">+</div>
<div class="btn-6-1 hit-area-border" title="扩大可点击区域之后">+</div>
CSS
1
2
3
4
5
.btn-6-1.hit-area-border {
box-sizing: content-box;
border: 10px solid transparent;
background-clip: padding-box;
}
注: background-clip: padding-box; 使背景延伸至内边距（padding）外沿，而不会绘制到边框处。
伪元素方案
伪元素同样可以代表其宿主元素来响应鼠标交互。
+
+
CSS
1
2
3
4
5
6
7
8
9
10
11
.btn-6-1.hit-area {
position: relative;
}
.btn-6-1.hit-area::after {
content: '';
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
}
注: 伪元素方案比透明边框更加灵活，因为后者会影响布局，且会影响一些样式，如 box-shadow 等。
2. 自定义复选框
复选框和单选框在不同浏览器中的默认样式不一样，且 CSS 对他们样式的控制力很有限。
但是我们可以基于选框的勾选状态并借助组合选择器来给其他元素设置样式。
HTML
1
2
3
4
<input type="checkbox" id="ck-box-6-2_1" class="checkbox">
<label for="ck-box-6-2_1">选项1</label>
<input type="checkbox" id="ck-box-6-2_2" class="checkbox">
<label for="ck-box-6-2_2">选项2</label>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
input.checkbox {
/* 隐藏 input 元素 */
position: absolute;
clip: rect(0, 0, 0, 0);
}
input.checkbox + label {
position: relative;
cursor: pointer;
padding-left: 1.4em;
margin-right: 1em;
}
input.checkbox + label::before {
position: absolute;
left: 0;
top: 0;
font-family:'FontAwesome';
content: '\f096'; /* fa-square-o */
font-size: 1.2em;
line-height: 100%; /* 重要，行高为文字的高度 */
}
input.checkbox:checked + label::before {
content: '\f14a'; /* fa-check-square */
color: #69c0ff;
}
注：
- 使用了
position: absolute;和clip: rect(0, 0, 0, 0);隐藏<input>元素，因为使用display: none;会把它从键盘 tab 键切换焦点的队列中完全删除。 - 使用了图标字体 Font Awesome ，
content: '\f096';对应fa-square-o图标，content: '\f14a';对应fa-check-square图标。 - 伪类选择器
:checked和属性选择器[checked]的区别是，后者不会根据用户的交互行为进行更新，因为用户的交互并不会影响到 HTML 标签上的属性。
3. 通过阴影弱化背景
为弱化背景，我们通常会增加一个额外的元素(.overlay)用于遮挡背景。
HTML
1
2
3
4
5
<div id="modal-6-3_1" class="overlay">
<div class="lightbox">
<!-- 弹窗内容 -->
</div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.overlay {
display: none;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 999;
}
.overlay .lightbox {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
width: 300px;
height: 200px;
background: #eee;
}
4. 通过模糊弱化背景
前面我们通过阴影弱化了背景，此外还可以通过模糊来弱化背景。
模糊背景更真实，它营造出了”景深效果“：当我们的视线聚焦在距离较近的物体上时，远处的背景是虚化的。
HTML
1
2
3
4
5
6
<main>
<!-- 文章内容 -->
</main>
<dialog id="modal" class="overlay">
<!-- 弹窗内容 -->
</dialog>
当弹窗打开时，给 <main> 元素添加 blur 类，以便对它应用模糊滤镜。
CSS
1
2
3
.blur {
filter: blur(1px);
}
5. 滚动提示
Google Reader 的用户体验设计师找到了一种非常优雅的方式来提示用户元素的内容可以滚动: 当侧边栏的容器还有更多内容时，一层淡淡的阴影会出现在容器的顶部和/或底部。
第一步
我们先使用 radial-gradient() 生成一条阴影。当页面滚动时，阴影相对于元素本身固定，不会随着内容一起滚动。
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x（实验性API）
- background-position-y（实验性API）
- background-repeat
- background-size
- background-attachment
CSS
1
2
3
4
5
.scrolling-hints.step1 {
background: radial-gradient(at top, rgba(0, 0, 0, .2), transparent 70%);
background-size: 100% 15px;
background-repeat: no-repeat;
}
第二步
添加第二层与原始内容背景相同的背景(#f8f8fd)作为遮罩层，并通过设置 background-attachment: local 使阴影跟随内容滚动。
当页面滚动到最顶层时，此遮罩层会盖住第一层阴影。
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x（实验性API）
- background-position-y（实验性API）
- background-repeat
- background-size
- background-attachment
CSS
1
2
3
4
5
6
7
.scrolling-hints.step2 {
background: linear-gradient(#f8f8fd, #f8f8fd),
radial-gradient(at top, rgba(0, 0, 0, .2), transparent 70%);
background-size: 100% 15px;
background-repeat: no-repeat;
background-attachment: local, scroll; /*scroll为默认值*/
}
第三步
第二步中有个缺点：当向下滚动一点点距离（小于15px）时，会出现一条明显的横线，那是遮罩层的边界。
因此我们可以扩大遮罩层的尺寸，并把它改为从 #f8f8fd 到透明白色 rgba(255, 255, 255,0) （不要使用transparent）的渐变背景。
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x（实验性API）
- background-position-y（实验性API）
- background-repeat
- background-size
- background-attachment
CSS
1
2
3
4
5
6
7
.scrolling-hints.step3 {
background: linear-gradient(#f8f8fd 30%, rgba(255, 255, 255,0)),
radial-gradient(at top, rgba(0, 0, 0, .2), transparent 70%);
background-size: 100% 50px, 100% 15px;
background-repeat: no-repeat;
background-attachment: local, scroll;
}
第四步
根据相同的原理实现底部的阴影和遮罩层。
CSS
1
2
3
4
5
6
7
8
9
10
11
.scrolling-hints.step4 {
background: linear-gradient(#f8f8fd 30%, rgba(255, 255, 255,0))
top / 100% 50px local,
radial-gradient(at top, rgba(0, 0, 0, .2), transparent 70%)
top / 100% 15px scroll,
linear-gradient(to top, #f8f8fd 30%, rgba(255, 255, 255,0))
bottom / 100% 50px local,
radial-gradient(at bottom, rgba(0, 0, 0, .2), transparent 70%)
bottom / 100% 15px scroll;
background-repeat: no-repeat;
}
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x（实验性API）
- background-position-y（实验性API）
- background-repeat
- background-size
- background-attachment
注: background-attachment 的取值如下：
scroll: 此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动；local: 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。；fixed: 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。