最近闲暇时间在看鑫爷的《CSS世界》,内容真的是非常精彩,很多细节分析的非常透彻,值得推荐。在日常开发中实现某种效果有很多方式,但是下面的css code
我以前都很少用到,原来css还可以这么玩 。。
实现hover改变成另一张图片效果
1 | /**css**/ |
局限性:content 属性 改变 的 仅仅是 视觉 呈现, 当 我们 以 右键 或 其他 形式 保存 这张 图片 的 时候, 所 保存 的 还是 原来 src 对应 的 图片。
显示网站logo
1 | < h1>logo</ h1> |
优点:
1,不会影响网站SEO。
2,使用.svg矢量图为了适应移动 端 retina 屏幕(如果用.svg会模
糊)。
注:千万不要自以为是地把重要的文本信息使用content 属性生成,因为这对可访问性和SEO都很不友好,content 属性只能用来生成 一些 无关紧要的内容, 如装饰性图形或者序号之类; 同样,也不要担心 原本重要的文字信息会被content替换,替换的仅仅是视觉层。
设置内容无法选中、无法复制
1 | user-select: none |
“三道 杠” 小 图标 示意
1 | .icon-menu { |
双层 圆点 图形 示意
1 | .icon-dot { |
去掉最右边的margin-right:20
1 | /**方案一:使用css3 nth-of-type属性(不考虑兼容IE8**/ |
1 | /**方案二:通过给父容器添加margin属性, 增加容器的可用宽度来实现**/ |
margin:auto的妙用
水平垂直居中
1 | <!DOCTYPE html> |
左/右对齐效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14...
.father {
width: 300px;
height: 200px;
border: red solid 1px;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
margin-right: 50px; /**左对齐margin-right、margin-left值交换**/
margin-left: auto; /**key code here**/
}
...
水平居中
1 | ... |
###垂直居中
1 | ... |
实现最高渲染性能的去除下边框css
1 | div { |
优雅的增加icon按钮点击区域
点击 区域 大小 从 16 × 16 一下子 提升 到 38 × 38,
1 | .icon- clear { |
最高性能等边三角图形绘制
1 | div { |
最高性能等腰三角图形绘制
1 | div { |
又或者是这种三角形(对话框气泡下的三角形)
1 | div { |
最高性能梯形图形绘制
1 | div { |
逼真 的 3D 效果
1 | div { |
被遗忘的ex
单位
实现箭头居中文字垂直方向(不受字体、字号影响)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.icon-arrow {
display: inline-block;
width: 20px;
height: 1ex;
background: url(arrow.svg) no-repeat center/20px 20px;
}
</style>
</head>
<body>
<div style="font-size: 18px">
箭头居中对齐
<i class="icon-arrow"></i>
</div>
</body>
</html>
永远居中的dialog
(可兼容到IE7)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.container {
position: fixed;
top:0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
text-align: center;
font-size: 0;
white-space: nowrap;
overflow: auto;
}
.container:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.content {
width: 240px;
height: 120px;
padding: 20px;
}
.dialog {
display: inline-block;
vertical-align: middle;
border-radius: 6px;
background-color: #fff;
font-size: 14px;
white-space: normal;
}
</style>
</head>
<body>
<div class="container">
<div class="dialog">
<div class="content">这dialog永远居中</div>
</div>
</div>
</body>
</html>
去除页面默认滚动条(PC端有效)
1 | /**good code**/ |
本次写作到此,欢迎❤️⭐️👏指出错误或者发布自己的见解探讨,共勉。🤝