Skip to content

Commit bd1e395

Browse files
teoli2003teoli2003
authored
Merge pull request mdn#113 from estelle/modules
CSS Modules code samples
2 parents 9b0729e + 7c03409 commit bd1e395

File tree

6 files changed

+596
-0
lines changed

6 files changed

+596
-0
lines changed

‎modules/animation.html‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>CSS animation sample: snow storm</title>
7+
<style>
8+
i {
9+
display: inline-block;
10+
height: 16px;
11+
width: 16px;
12+
border-radius: 50%;
13+
animation: falling 3s linear 0s infinite backwards;
14+
/* Snowflakes are made with CSS linear gradients (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) */
15+
background-image: linear-gradient(
16+
180deg,
17+
transparent 40%,
18+
white 40% 60%,
19+
transparent 60%
20+
),
21+
linear-gradient(
22+
90deg,
23+
transparent 40%,
24+
white 40% 60%,
25+
transparent 60%
26+
),
27+
linear-gradient(
28+
45deg,
29+
transparent 43%,
30+
white 43% 57%,
31+
transparent 57%
32+
),
33+
linear-gradient(
34+
135deg,
35+
transparent 43%,
36+
white 43% 57%,
37+
transparent 57%
38+
);
39+
}
40+
i:nth-of-type(4n) {
41+
/* using tree structural pseudoclasses to create randomness - https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type */
42+
height: 30px;
43+
width: 30px;
44+
transform-origin: right -30px;
45+
}
46+
i:nth-of-type(4n + 1) {
47+
height: 24px;
48+
width: 24px;
49+
transform-origin: left 30px;
50+
}
51+
i:nth-of-type(4n + 2) {
52+
height: 10px;
53+
width: 10px;
54+
transform-origin: -30px 0;
55+
}
56+
i:nth-of-type(4n + 3) {
57+
height: 40px;
58+
width: 40px;
59+
transform-origin: -50px 0;
60+
}
61+
i:nth-of-type(4n) {
62+
animation-duration: 5.3s;
63+
animation-iteration-count: 12;
64+
transform-origin: -10px -20px;
65+
}
66+
i:nth-of-type(4n + 1) {
67+
animation-duration: 3.1s;
68+
animation-iteration-count: 20;
69+
transform-origin: 10px -20px;
70+
}
71+
i:nth-of-type(4n + 2) {
72+
animation-duration: 1.7s;
73+
animation-iteration-count: 35;
74+
transform-origin: right -20px;
75+
}
76+
i:nth-of-type(3n) {
77+
animation-delay: 2.3s;
78+
}
79+
i:nth-of-type(3n + 1) {
80+
animation-delay: 1.5s;
81+
}
82+
i:nth-of-type(3n + 2) {
83+
animation-delay: 3.4s;
84+
}
85+
i:nth-of-type(5n) {
86+
animation-timing-function: ease-in-out;
87+
}
88+
i:nth-of-type(5n + 1) {
89+
animation-timing-function: ease-out;
90+
}
91+
i:nth-of-type(5n + 2) {
92+
animation-timing-function: ease;
93+
}
94+
i:nth-of-type(5n + 3) {
95+
animation-timing-function: ease-in;
96+
}
97+
i:nth-of-type(5n + 4) {
98+
animation-timing-function: linear;
99+
}
100+
i:nth-of-type(11n) {
101+
animation-timing-function: cubic-bezier(0.2, 0.3, 0.8, 0.9);
102+
}
103+
i:nth-of-type(7n) {
104+
opacity: 0.5;
105+
}
106+
i:nth-of-type(7n + 2) {
107+
opacity: 0.3;
108+
}
109+
i:nth-of-type(7n + 4) {
110+
opacity: 0.7;
111+
}
112+
i:nth-of-type(7n + 6) {
113+
opacity: 0.6;
114+
animation-timing-function: ease-in;
115+
transform-origin: left 10px;
116+
}
117+
i:nth-of-type(7n + 1) {
118+
opacity: 0.8;
119+
}
120+
121+
.root {
122+
height: 600px;
123+
background-color: skyblue;
124+
border: 1px solid darkgrey;
125+
position: relative;
126+
overflow: hidden;
127+
}
128+
.ground,
129+
.cloud {
130+
position: absolute;
131+
top: 0;
132+
right: 0;
133+
left: 0;
134+
background-repeat: no-repeat;
135+
}
136+
.cloud {
137+
width: 100%;
138+
height: 150px;
139+
background: #ffffff;
140+
border-radius: 0 0 90px 33% / 0 0 45px 50px;
141+
box-shadow:
142+
5px 15px 15px white,
143+
-5px 15px 15px white,
144+
0 20px 20px rgba(125 125 125 / 0.5);
145+
animation: clouds ease 5s alternate infinite 0.2s,
146+
wind ease-out 4s alternate infinite;
147+
}
148+
.ground {
149+
bottom: 0;
150+
background-image: linear-gradient(to top, #fff 97%, 99%, #bbb 100%);
151+
background-position: center 580px;
152+
animation: snowpile linear 300s forwards;
153+
border: 1px solid grey;
154+
/* put the ground into a 3D rendering context (because the snow flakes are in a 3d rendering context) */
155+
transform: translate3d(0, 0, 0);
156+
}
157+
158+
@keyframes snowpile {
159+
from {
160+
background-position: center 580px;
161+
}
162+
to {
163+
background-position: center 280px;
164+
}
165+
}
166+
167+
@keyframes clouds {
168+
from {
169+
border-radius: 0 0 90px 33% / 0 0 45px 50px;
170+
}
171+
to {
172+
border-radius: 0 0 40px 50% / 0 0 55px 80px;
173+
}
174+
}
175+
176+
@keyframes wind {
177+
from {
178+
height: 150px;
179+
}
180+
to {
181+
height: 100px;
182+
}
183+
}
184+
185+
@keyframes falling {
186+
from {
187+
transform: translate(0, -50px) rotate(0deg) scale(0.9, 0.9);
188+
}
189+
to {
190+
transform: translate(30px, 600px) rotate(360deg) scale(1.1, 1.1);
191+
}
192+
}
193+
194+
/* by default, the animations are paused. */
195+
i,
196+
div[class] {
197+
animation-play-state: paused;
198+
}
199+
/* When the div is hovered, the animation plays. Also,
200+
when the input is checked, the animation coming after the checked checkbox plays */
201+
div:hover *,
202+
input:checked ~ div * {
203+
animation-play-state: running;
204+
}
205+
206+
/* Change the content of the label that comes right after the input. Included aria-label on the label to improve accessibility. */
207+
input + label::before {
208+
content: "Play ";
209+
}
210+
input:checked + label::before {
211+
content: "Pause ";
212+
}
213+
</style>
214+
</head>
215+
<body>
216+
<input
217+
type="checkbox"
218+
id="animate"
219+
aria-label="Toggle the play state of the animation"
220+
/><!-- See aria-label: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label -->
221+
<label for="animate">the animation</label>
222+
<div class="root">
223+
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i
224+
><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i
225+
><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i
226+
><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i
227+
><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i
228+
><i></i><i></i><i></i>
229+
<div class="cloud"></div>
230+
<div class="ground"></div>
231+
</div>
232+
</body>
233+
</html>

‎modules/assets/george_floyd_memorial_sm.jpg‎

56.8 KB
Loading

‎modules/backgrounds.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>CSS backgrounds and borders sample</title>
7+
<style>
8+
article {
9+
display: flex;
10+
gap: 10px;
11+
}
12+
div {
13+
color: #58ade3;
14+
height: 320px;
15+
width: 240px;
16+
padding: 20px;
17+
margin: 10px;
18+
border: dotted 15px; /* defaults to `currentcolor` */
19+
border-radius: 100px 0;
20+
background-image: radial-gradient(
21+
circle,
22+
transparent 60%,
23+
currentcolor 60% 70%,
24+
transparent 70%
25+
),
26+
linear-gradient(45deg, currentcolor, white),
27+
linear-gradient(transparent, transparent);
28+
/* the third transparent background image was added to provide space for the background color to show through */
29+
background-color: currentcolor;
30+
background-position: center;
31+
background-size: 60px 60px, 120px 120px;
32+
background-clip: content-box, content-box, padding-box;
33+
box-shadow:
34+
inset 5px 5px 5px rgba(0, 0, 0, 0.4),
35+
inset -5px -5px 5px rgba(0, 0, 0, 0.4),
36+
5px 5px 5px rgba(0, 0, 0, 0.4),
37+
-5px -5px 5px rgba(0, 0, 0, 0.4);
38+
}
39+
div:first-of-type {
40+
border-radius: 0;
41+
border-image-source: repeating-conic-gradient(
42+
from 3deg at 25% 25%,
43+
currentColor 0 3deg,
44+
transparent 3deg 6deg
45+
);
46+
border-image-slice: 30;
47+
}
48+
</style>
49+
</head>
50+
<body>
51+
<article>
52+
<div></div>
53+
<div></div>
54+
</article>
55+
</body>
56+
</html>

‎modules/basicUI.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>CSS basic UI module sample</title>
7+
<style>
8+
body {
9+
font-family: sans-serif;
10+
font-size: 1.25rem;
11+
}
12+
[contenteditable] {
13+
cursor: copy;
14+
caret-color: magenta;
15+
border: 1px solid #ccc;
16+
}
17+
:focus {
18+
outline: dashed magenta 3px;
19+
outline-offset: 10px;
20+
}
21+
* {
22+
accent-color: magenta;
23+
}
24+
div,
25+
fieldset {
26+
margin: 20px;
27+
}
28+
textarea:nth-of-type(1) {
29+
cursor: wait;
30+
}
31+
textarea:nth-of-type(2) {
32+
resize: none;
33+
}
34+
textarea:nth-of-type(3) {
35+
pointer-events: none;
36+
}
37+
</style>
38+
</head>
39+
<body>
40+
<div><span contenteditable>Edit this text </span></div>
41+
<fieldset>
42+
<legend>Play with these fake form controls</legend>
43+
<input type="checkbox" id="check" />
44+
<input type="radio" name="a" />
45+
<input type="radio" name="a" />
46+
<input type="range" />
47+
<progress></progress>
48+
</fieldset>
49+
<fieldset>
50+
<legend>Be careful not to ruin usability: try resizing these.</legend>
51+
<textarea>
52+
cursor: wait;
53+
</textarea>
54+
<textarea>
55+
resize: none;
56+
</textarea>
57+
<textarea>
58+
pointer-events: none;
59+
</textarea>
60+
</fieldset>
61+
</body>
62+
</html>

0 commit comments

Comments
 (0)