Skip to content

Commit cb8a676

Browse files
zizifnzizifn
committed
add it
1 parent 641977f commit cb8a676

15 files changed

+409
-1
lines changed

‎css/07-typographandimage.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,9 @@ image alt-->https://webaim.org/techniques/alttext/
113113

114114
> 一般 右上角的 logo， alt 应该写 “back to home” 而不是描述 logo 图片。
115115
116-
Image 有自带的宽度和高度，所有我们一般需要给一个 width
116+
Image 有自带的宽度和高度，所有我们一般需要给一个 width. 然后 height 就会根据图片的自带比例进行计算。
117+
118+
如果你像指定图片的宽高比，可以用 `aspect-ratio`。这样如果你定义 width：100px，height 就会按照`aspect-ratio`计算。
117119

118120
需要使用让浏览器自动决定加载哪些图片。
119121

‎css/08-grid.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,22 @@ flexible 的单位是 fr unit (as well as auto). Pixels, rems, and percentages a
1414
## minmax(0, 1fr)
1515

1616
https://css-tricks.com/preventing-a-grid-blowout/
17+
18+
## World famous CSS Grid Layout
19+
20+
```css
21+
.grid {
22+
display: grid;
23+
grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
24+
gap: 10px;
25+
}
26+
```
27+
28+
auto-fill vs auto-fit
29+
30+
- `auto-fill` 会创建尽可能多的列，但是会产生空列，如果太宽，但是元素太少。
31+
- `auto-fit` 会创建尽可能多的列，但是不会产生空列，元素太少时会自动变大元素，占有空列。
32+
33+
```css
34+
https: //css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/;;
35+
```

‎css/09-transition-3d-exercise.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<style>
8+
.wrapper {
9+
transform-style: preserve-3d;
10+
}
11+
.card-link {
12+
transform-style: inherit;
13+
}
14+
15+
/*
16+
Everything else is the same.
17+
*/
18+
.wrapper {
19+
display: grid;
20+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
21+
gap: 8px;
22+
perspective: 500px;
23+
}
24+
.card {
25+
display: flex;
26+
flex-direction: column;
27+
justify-content: center;
28+
align-items: center;
29+
min-height: 200px;
30+
background: white;
31+
border-radius: 8px;
32+
border: 2px solid hsl(240deg 100% 75%);
33+
will-change: transform;
34+
transform: rotateX(0deg);
35+
transition: transform 750ms;
36+
transform-origin: top center;
37+
}
38+
.card img {
39+
width: 64px;
40+
height: 64px;
41+
}
42+
.card-link:hover .card,
43+
.card-link:focus .card {
44+
transform: rotateX(-35deg);
45+
transition: transform 250ms;
46+
}
47+
.card-link:focus {
48+
outline: none;
49+
}
50+
.card-link:focus .card {
51+
outline: 3px solid hsl(240deg 100% 50%);
52+
outline-offset: 2px;
53+
}
54+
</style>
55+
</head>
56+
<body>
57+
<div class="wrapper">
58+
<a href="/" class="card-link">
59+
<article class="card">
60+
<img alt="Download Chrome" src="./img/chrome.svg" />
61+
</article>
62+
</a>
63+
<a href="/" class="card-link">
64+
<article class="card">
65+
<img alt="Download Firefox" src="./img/firefox.svg" />
66+
</article>
67+
</a>
68+
<a href="/" class="card-link">
69+
<article class="card">
70+
<img alt="Download Safari" src="./img/safari.png" />
71+
</article>
72+
</a>
73+
<a href="/" class="card-link">
74+
<article class="card">
75+
<img alt="Download Edge" src="./img/edge.svg" />
76+
</article>
77+
</a>
78+
<a href="/" class="card-link">
79+
<article class="card">
80+
<img alt="Download Opera" src="./img/oppo.svg" />
81+
</article>
82+
</a>
83+
</div>
84+
</body>
85+
</html>

‎css/09-transition-3d-flippable-card-exercise.html

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<style>
8+
.wrapper {
9+
width: 100%;
10+
display: grid;
11+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
12+
max-width: 650px;
13+
gap: 16px;
14+
padding: 16px 0;
15+
margin: 0 auto;
16+
perspective: 1000px;
17+
}
18+
.item {
19+
text-decoration: none;
20+
list-style: none;
21+
a {
22+
display: block;
23+
/* height: 100%; */
24+
&:hover .front {
25+
transform: rotateY(180deg);
26+
}
27+
&:hover .back {
28+
transform: rotateY(0deg);
29+
}
30+
figure {
31+
position: relative;
32+
margin: 0;
33+
padding: 0;
34+
.front,
35+
.back {
36+
backface-visibility: hidden;
37+
will-change: transform;
38+
}
39+
.front {
40+
border: solid;
41+
}
42+
.back {
43+
position: absolute;
44+
top: 0;
45+
left: 0;
46+
bottom: 0;
47+
right: 0;
48+
margin: auto;
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
transform: rotateY(180deg);
53+
}
54+
img {
55+
width: 100%;
56+
aspect-ratio: 1 / 1;
57+
object-fit: cover;
58+
}
59+
60+
@media (prefers-reduced-motion: no-preference) {
61+
&:hover .front {
62+
transition: transform 500ms;
63+
}
64+
&:hover .back {
65+
transition: transform 500ms;
66+
}
67+
.front,
68+
.back {
69+
transition: transform 300ms 200ms;
70+
}
71+
}
72+
}
73+
}
74+
}
75+
.img1 {
76+
}
77+
html,
78+
body {
79+
width: 100%;
80+
height: 100%;
81+
}
82+
* {
83+
box-sizing: border-box;
84+
}
85+
</style>
86+
</head>
87+
<body>
88+
<ul class="wrapper">
89+
<li class="item">
90+
<a href="/">
91+
<figure>
92+
<div class="front">
93+
<img
94+
alt="A white building, disappearing into fog. Architecture"
95+
src="./img/build4.jpg"
96+
/>
97+
</div>
98+
<figcaption class="back">
99+
Photo by
100+
<span class="photographer"> Nick Wessaert </span>
101+
</figcaption>
102+
</figure>
103+
</a>
104+
</li>
105+
<li class="item">
106+
<a href="/">
107+
<figure>
108+
<div class="front">
109+
<img
110+
alt="A complex mix of support pillars. Architecture"
111+
src="./img/build5.jpg"
112+
/>
113+
</div>
114+
<figcaption class="back">
115+
Photo by
116+
<span class="photographer"> Alvaro Pinot </span>
117+
</figcaption>
118+
</figure>
119+
</a>
120+
</li>
121+
<li class="item">
122+
<a href="/">
123+
<figure>
124+
<div class="front">
125+
<img
126+
alt="A white building with staggered balconies. Architecture"
127+
src="./img/build6.jpg"
128+
/>
129+
</div>
130+
<figcaption class="back">
131+
Photo by
132+
<span class="photographer"> Grant Lemons </span>
133+
</figcaption>
134+
</figure>
135+
</a>
136+
</li>
137+
<li class="item">
138+
<a href="/">
139+
<figure>
140+
<div class="front">
141+
<img
142+
alt="A unique building with inset curves. Architecture"
143+
src="./img/build7.jpg"
144+
/>
145+
</div>
146+
<figcaption class="back">
147+
Photo by
148+
<span class="photographer"> Julien Moreau </span>
149+
</figcaption>
150+
</figure>
151+
</a>
152+
</li>
153+
<li class="item">
154+
<a href="/">
155+
<figure>
156+
<div class="front">
157+
<img
158+
alt="A white building with wavy balconies. Architecture"
159+
src="./img/build8.jpg"
160+
/>
161+
</div>
162+
<figcaption class="back">
163+
Photo by
164+
<span class="photographer"> Christian Perner </span>
165+
</figcaption>
166+
</figure>
167+
</a>
168+
</li>
169+
<li class="item">
170+
<a href="/">
171+
<figure>
172+
<div class="front">
173+
<img
174+
alt="A modular building against a blue sky. Architecture"
175+
src="./img/build9.jpg"
176+
/>
177+
</div>
178+
<figcaption class="back">
179+
Photo by
180+
<span class="photographer"> Joel Filipe </span>
181+
</figcaption>
182+
</figure>
183+
</a>
184+
</li>
185+
<li class="item">
186+
<a href="/">
187+
<figure>
188+
<div class="front">
189+
<img
190+
alt="A wide-open outdoor concrete area. Architecture"
191+
src="./img/build10.jpg"
192+
/>
193+
</div>
194+
<figcaption class="back">
195+
Photo by
196+
<span class="photographer"> Hugo Sousa </span>
197+
</figcaption>
198+
</figure>
199+
</a>
200+
</li>
201+
<li class="item">
202+
<a href="/">
203+
<figure>
204+
<div class="front">
205+
<img
206+
alt="A concrete building with white protrusions. Architecture"
207+
src="./img/build11.jpg"
208+
/>
209+
</div>
210+
<figcaption class="back">
211+
Photo by
212+
<span class="photographer"> Joel Filipe </span>
213+
</figcaption>
214+
</figure>
215+
</a>
216+
</li>
217+
<li class="item">
218+
<a href="/">
219+
<figure>
220+
<div class="front">
221+
<img
222+
alt="An igloo-style building. Architecture"
223+
src="./img/build12.jpg"
224+
/>
225+
</div>
226+
<figcaption class="back">
227+
Photo by
228+
<span class="photographer"> Mitchell Luo </span>
229+
</figcaption>
230+
</figure>
231+
</a>
232+
</li>
233+
</ul>
234+
</body>
235+
</html>

‎css/09-transition-3d-flippable-card.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<style>
8+
.card-wrapper {
9+
perspective: 500px;
10+
}
11+
.card {
12+
display: block;
13+
height: 200px;
14+
width: 200px;
15+
display: grid;
16+
place-content: center;
17+
background-color: antiquewhite;
18+
text-decoration: none;
19+
}
20+
.front {
21+
transition: transform 400ms;
22+
will-change: transform;
23+
}
24+
.card:hover .front,
25+
.card:focus .front {
26+
transform: rotateY(180deg);
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div class="card-wrapper">
32+
<a href="/" class="card">
33+
<div class="front">
34+
<p>Hello World</p>
35+
</div>
36+
</a>
37+
</div>
38+
</body>
39+
</html>

0 commit comments

Comments
 (0)