Skip to content

Commit 3933a96

Browse files
author
liujintong
committed
ch11
1 parent 61461f7 commit 3933a96

File tree

6 files changed

+236
-0
lines changed

6 files changed

+236
-0
lines changed

‎ch11/11-1 渐变.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<style>
9+
/* 11-1 基础线性渐变 */
10+
.fade {
11+
height: 200px;
12+
width: 400px;
13+
background-image: linear-gradient(to right, white, blue);
14+
}
15+
16+
/* 11-1 基础线性渐变 */
17+
18+
/* 11-3 使用度的渐变 */
19+
.fade {
20+
height: 200px;
21+
width: 400px;
22+
background-image: linear-gradient(90deg, white, blue);
23+
}
24+
25+
/* 11-3 使用度的渐变 */
26+
27+
/* 11-4 包含多个颜色的线性渐变 */
28+
.fade {
29+
height: 200px;
30+
width: 400px;
31+
background-image: linear-gradient(90deg, red, white, blue);
32+
}
33+
34+
/* 11-4 包含多个颜色的线性渐变 */
35+
36+
/* 11-5 同一个位置放置两个颜色节点，由此来创建条纹 */
37+
.fade {
38+
height: 200px;
39+
width: 400px;
40+
background-image: linear-gradient(90deg, red 40%, white 40%, white 60%, blue 60%);
41+
}
42+
43+
/* 11-5 同一个位置放置两个颜色节点，由此来创建条纹 */
44+
45+
/* 11-6 创建斜纹进度条 */
46+
.fade {
47+
height: 1em;
48+
width: 400px;
49+
background-image: repeating-linear-gradient(-45deg,
50+
#57b, #57b 10px, #148 10px, #148 20px);
51+
border-radius: 0.3em;
52+
}
53+
54+
/* 11-6 创建斜纹进度条 */
55+
56+
/* 11-7 基础径向渐变 */
57+
.fade {
58+
height: 200px;
59+
width: 400px;
60+
background-image: radial-gradient(white, blue);
61+
background-image: radial-gradient(circle, white, midnightblue);
62+
background-image: radial-gradient(3em at 25% 25%, white, midnightblue);
63+
background-image: repeating-radial-gradient(circle, midnightblue 0, midnightblue 1em, white 1em, white 2em);
64+
}
65+
/* 11-7 基础径向渐变 */
66+
</style>
67+
</head>
68+
69+
<body>
70+
<!-- 11-2 带背景渐变的元素 -->
71+
<div class="fade"></div>
72+
<!-- 11-2 带背景渐变的元素 -->
73+
</body>
74+
75+
</html>

‎ch11/11-2 阴影.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<style>
9+
.container {
10+
margin: 2em auto;
11+
text-align: center;
12+
}
13+
14+
/* 11-9 使用了渐变和阴影的按钮样式 */
15+
/* .button {
16+
padding: 1em;
17+
border: 0;
18+
font-size: 0.8rem;
19+
color: white;
20+
border-radius: 0.5em;
21+
background-image: linear-gradient(to bottom, #57b, #148);
22+
box-shadow: 0.1em 0.1em 0.5em #124;
23+
}
24+
25+
.button:active {
26+
box-shadow: inset 0 0 0.5em #124,
27+
inset 0 0.5em 1em rgba(0, 0, 0, 0.4);
28+
} */
29+
30+
/* 11-9 使用了渐变和阴影的按钮样式 */
31+
32+
/* 11-10 鼠标悬停和激活状态的扁平化按钮 */
33+
/* .button {
34+
padding: 1em;
35+
border: 0;
36+
color: white;
37+
background-color: #57b;
38+
font-size: 1rem;
39+
box-shadow: 0 0.2em 0.2em rgba(0, 0, 0, 0.15);
40+
}
41+
42+
.button:hover {
43+
background-color: #456ab6;
44+
}
45+
46+
.button:active {
47+
background-color: #148;
48+
} */
49+
50+
/* 11-10 鼠标悬停和激活状态的扁平化按钮 */
51+
52+
/* 11-11 当下流行的按钮样式 */
53+
.button {
54+
padding: 0.8em;
55+
border: 0;
56+
font-size: 1rem;
57+
color: white;
58+
border-radius: 0.5em;
59+
background-color: #57b;
60+
box-shadow: 0 0.4em #148;
61+
text-shadow: 1px 1px #148;
62+
}
63+
64+
.button:active {
65+
background-color: #456ab5;
66+
transform: translateY(0.1em);
67+
box-shadow: 0 0.3em #148;
68+
}
69+
70+
/* 11-11 当下流行的按钮样式 */
71+
</style>
72+
</head>
73+
74+
<body>
75+
<div class="container">
76+
<!-- 代码清单 11-8 按钮的标记 -->
77+
<button class="button">Sign up now</button>
78+
<!-- 代码清单 11-8 按钮的标记 -->
79+
</div>
80+
</body>
81+
82+
</html>

‎ch11/11-3 混合模式.html

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<style>
9+
/* 11-13 混合两张图片背景 */
10+
/* .blend {
11+
min-height: 400px;
12+
background-image: url(images/bear.jpg), url(images/bear.jpg);
13+
background-size: cover;
14+
background-repeat: no-repeat;
15+
background-position: -30vh, 30vw;
16+
background-blend-mode: multiply;
17+
} */
18+
19+
/* 11-13 混合两张图片背景 */
20+
21+
/* 11-14 将背景颜色的色相混合到背景图片上 */
22+
/* .blend {
23+
min-height: 400px;
24+
background-image: url("images/bear.jpg");
25+
background-color: #148;
26+
background-size: cover;
27+
background-repeat: no-repeat;
28+
background-position: center;
29+
background-blend-mode: luminosity;
30+
} */
31+
32+
/* 11-14 将背景颜色的色相混合到背景图片上 */
33+
/* 11-15 使用 soft-light 混合模式为图片添加纹理 */
34+
/* .blend {
35+
min-height: 400px;
36+
background-image: url("images/scratches.png"), url("images/bear.jpg");
37+
background-size: 200px, cover;
38+
background-repeat: repeat, no-repeat;
39+
background-position: center center;
40+
background-blend-mode: soft-light;
41+
} */
42+
43+
/* 11-15 使用 soft-light 混合模式为图片添加纹理 */
44+
/* 11-17 使用融合混合模式来混合多个元素 */
45+
.blend {
46+
background-image: url(images/bear.jpg);
47+
background-size: cover;
48+
background-position: center;
49+
padding: 5em 0 10em;
50+
}
51+
52+
.blend>h1 {
53+
margin: 0;
54+
font-family: Helvetica, Arial, sans-serif;
55+
font-size: 6rem;
56+
text-align: center;
57+
mix-blend-mode: hard-light;
58+
background-color: #c33;
59+
color: #808080;
60+
border: 0.1em solid #ccc;
61+
border-width: 0.1em 0;
62+
}
63+
64+
/* 11-17 使用融合混合模式来混合多个元素 */
65+
</style>
66+
</head>
67+
68+
<body>
69+
<!-- 11-12 混合背景的 div -->
70+
<!-- <div class="blend"></div> -->
71+
<!-- 11-12 混合背景的 div -->
72+
<!-- 11-16 添加标题到容器中 -->
73+
<div class="blend">
74+
<h1>Ursa Major</h1>
75+
</div>
76+
<!-- 11-16 添加标题到容器中 -->
77+
</body>
78+
79+
</html>

‎ch11/images/bear.jpg

782 KB
Loading

‎ch11/images/elephants.jpg

1.4 MB
Loading

‎ch11/images/scratches.png

603 KB
Loading

0 commit comments

Comments
 (0)