Skip to content

Commit 04c614f

Browse files
estellewbamberg
estelle
and
wbamberg
authored
Minor: link to css-examples and github (mdn#24305)
* animation sample * animation link * compositing link * compositing sample * background sample * background code link * height * new paragraph * paragraph * md lint * md lint --------- Co-authored-by: wbamberg <[email protected]>
1 parent 446ffcc commit 04c614f

File tree

3 files changed

+11
-355
lines changed

3 files changed

+11
-355
lines changed

‎files/en-us/web/css/compositing_and_blending/index.md

Lines changed: 3 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -23,66 +23,9 @@ The properties in this CSS module can be used to define the blending mode that s
2323

2424
In this example, each box has a border, two striped background images, and a solid color background. The common background for all the boxes contains a pattern of circles. The three boxes in the second row are set to blend with the background of the container.
2525

26-
```html hidden
27-
<section>
28-
<div><span>Normal, with no blending</span></div>
29-
<div><span>Multiplies colors</span></div>
30-
<div><span>Multiplies based on background color</span></div>
31-
<div>Normal, with no blending</div>
32-
<div>Multiplies colors</div>
33-
<div>Multiplies based on background color</div>
34-
</section>
35-
```
36-
37-
```css hidden
38-
/* creates a div with two offset striped background images and a background color. */
39-
div {
40-
width: 200px;
41-
height: 200px;
42-
background-image:
43-
repeating-linear-gradient(45deg, red 0 15px, pink 15px 30px),
44-
repeating-linear-gradient(-45deg, blue 0 15px, lightblue 15px 30px);
45-
background-size: 150px 150px;
46-
background-repeat: no-repeat;
47-
background-position: top left, bottom right;
48-
background-color: palegoldenrod;
49-
text-align: center;
50-
padding-top: 150px;
51-
font-family: sans-serif;
52-
box-sizing: border-box;
53-
border: 5px solid black;
54-
}
55-
div:nth-of-type(3n+1){
56-
background-blend-mode: normal;
57-
}
58-
div:nth-of-type(3n+2){
59-
background-blend-mode: multiply;
60-
}
61-
div:nth-of-type(3n+3){
62-
background-blend-mode: overlay;
63-
}
64-
div:nth-of-type(n + 4) {
65-
mix-blend-mode: difference;
66-
}
67-
/* put a pink background with transparent round holes that covers the entire element, and lay the examples in two rows with three columns each */
68-
section {
69-
padding: 0.75em;
70-
background: radial-gradient(circle, transparent 0 20px, rgb(255, 200, 200) 20px);
71-
background-size: 60px 60px;
72-
background-position: center;
73-
display: inline-grid;
74-
grid-template-columns: 1fr 1fr 1fr;
75-
gap: 1em;
76-
}
77-
/* make some of the text more legible */
78-
span {
79-
background-color: #ffffff99;
80-
}
81-
```
82-
83-
{{ EmbedLiveSample('Compositing_and_blending_in_action', "630", "300") }}
84-
85-
Notice how the background, border, and the content are all impacted as a result of the blending. To see the code for this sample, [view the source on Github](https://github.com/mdn/content/blob/main/files/en-us/web/css/compositing_and_blending/index.md?plain=1).
26+
{{EmbedGHLiveSample("css-examples/modules/compositing.html", '100%', 460)}}
27+
28+
Notice how the background, border, and the content are all impacted as a result of the blending. To see the code for this sample, [view the source on Github](https://github.com/mdn/css-examples/blob/main/modules/compositing.html).
8629

8730
## Reference
8831

‎files/en-us/web/css/css_animations/index.md

Lines changed: 3 additions & 251 deletions
Original file line numberDiff line numberDiff line change
@@ -21,259 +21,11 @@ The animations CSS module lets you animate the values of CSS properties, such as
2121

2222
To view the animation in the box below, click the checkbox 'Play the animation' or hover the cursor over the box. When the animating is active, the cloud at the top changes shape, snowflakes fall, and the snow level at the bottom rises. To pause the animation, uncheck the checkbox or move your cursor away from the box.
2323

24-
```html hidden
25-
<input type="checkbox" id="animate" aria-label="Toggle the play state of the animation"><!-- See aria-label: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label -->
26-
<label for="animate">the animation</label>
27-
<div class="root">
28-
<i></i>
29-
<i></i>
30-
<i></i>
31-
<i></i>
32-
<i></i>
33-
<i></i>
34-
<i></i>
35-
<i></i>
36-
<i></i>
37-
<i></i>
38-
<i></i>
39-
<i></i>
40-
<i></i>
41-
<i></i>
42-
<i></i>
43-
<i></i>
44-
<i></i>
45-
<i></i>
46-
<i></i>
47-
<i></i>
48-
<i></i>
49-
<i></i>
50-
<i></i>
51-
<i></i>
52-
<i></i>
53-
<i></i>
54-
<i></i>
55-
<i></i>
56-
<i></i>
57-
<i></i>
58-
<i></i>
59-
<i></i>
60-
<i></i>
61-
<i></i>
62-
<i></i>
63-
<i></i>
64-
<i></i>
65-
<i></i>
66-
<i></i>
67-
<i></i>
68-
<i></i>
69-
<i></i>
70-
<i></i>
71-
<i></i>
72-
<i></i>
73-
<i></i>
74-
<i></i>
75-
<i></i>
76-
<i></i>
77-
<i></i>
78-
<i></i>
79-
<i></i>
80-
<i></i>
81-
<div class="cloud"></div>
82-
<div class="ground"><div>
83-
</div>
84-
```
24+
{{EmbedGHLiveSample("css-examples/modules/animation.html", '100%', 650)}}
8525

86-
```css hidden
87-
i {
88-
display: inline-block;
89-
height: 16px;
90-
width: 16px;
91-
border-radius: 50%;
92-
animation: falling 3s linear 0s infinite backwards;
93-
/* Snowflakes are made with CSS linear gradients (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) */
94-
background-image:
95-
linear-gradient(180deg, transparent 40%, white 40%, white 60%, transparent 60%),
96-
linear-gradient(90deg, transparent 40%, white 40%, white 60%, transparent 60%),
97-
linear-gradient(45deg, transparent 43%, white 43%, white 57%, transparent 57%),
98-
linear-gradient(135deg, transparent 43%, white 43%, white 57%, transparent 57%);
99-
}
100-
i:nth-of-type(4n) { /* using tree structural pseudoclasses to create randomness - https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type */
101-
height: 30px;
102-
width: 30px;
103-
transform-origin: right -30px;
104-
}
105-
i:nth-of-type(4n+1) {
106-
height: 24px;
107-
width: 24px;
108-
transform-origin: left 30px;
109-
}
110-
i:nth-of-type(4n+2) {
111-
height: 10px;
112-
width: 10px;
113-
transform-origin: -30px 0;
114-
}
115-
i:nth-of-type(4n+3) {
116-
height: 40px;
117-
width: 40px;
118-
transform-origin: -50px 0;
119-
}
120-
i:nth-of-type(4n) {
121-
animation-duration: 5.3s;
122-
animation-iteration-count: 12;
123-
transform-origin: -10px -20px;
124-
}
125-
i:nth-of-type(4n+1) {
126-
animation-duration: 3.1s;
127-
animation-iteration-count: 20;
128-
transform-origin: 10px -20px;
129-
}
130-
i:nth-of-type(4n+2) {
131-
animation-duration: 1.7s;
132-
animation-iteration-count: 35;
133-
transform-origin: right -20px;
134-
}
135-
i:nth-of-type(3n) {
136-
animation-delay: 2.3s;
137-
}
138-
i:nth-of-type(3n+1) {
139-
animation-delay: 1.5s;
140-
}
141-
i:nth-of-type(3n+2) {
142-
animation-delay: 3.4s;
143-
}
144-
i:nth-of-type(5n) {
145-
animation-timing-function: ease-in-out;
146-
}
147-
i:nth-of-type(5n+1) {
148-
animation-timing-function: ease-out;
149-
}
150-
i:nth-of-type(5n+2) {
151-
animation-timing-function: ease;
152-
}
153-
i:nth-of-type(5n+3) {
154-
animation-timing-function: ease-in;
155-
}
156-
i:nth-of-type(5n+4) {
157-
animation-timing-function: linear;
158-
}
159-
i:nth-of-type(11n) {
160-
animation-timing-function: cubic-bezier(0.2, 0.3, 0.8, 0.9);
161-
}
162-
i:nth-of-type(7n) {
163-
opacity: 0.5;
164-
}
165-
i:nth-of-type(7n+2) {
166-
opacity: 0.3;
167-
}
168-
i:nth-of-type(7n+4) {
169-
opacity: 0.7;
170-
}
171-
i:nth-of-type(7n+6) {
172-
opacity: 0.6;
173-
animation-timing-function: ease-in;
174-
transform-origin: left 10px;
175-
}
176-
i:nth-of-type(7n+1) {
177-
opacity: 0.8;
178-
}
26+
This sample animation uses {{cssxref("animation-iteration-count")}} to make the flakes fall repeatedly, {{cssxref("animation-direction")}} to make the cloud move back and forth, {{cssxref("animation-fill-mode")}} to raise the snow level in response to the cloud movement, and {{cssxref("animation-play-state")}} to pause the animation.
17927

180-
.root {
181-
height: 600px;
182-
background-color: skyblue;
183-
border: 1px solid darkgrey;
184-
position: relative;
185-
overflow: hidden;
186-
}
187-
.ground, .cloud {
188-
position: absolute;
189-
top: 0;
190-
right: 0;
191-
left: 0;
192-
background-repeat: no-repeat;
193-
}
194-
.cloud {
195-
width: 100%;
196-
height: 150px;
197-
background: #ffffff;
198-
border-radius: 0 0 90px 33% / 0 0 45px 50px;
199-
box-shadow:
200-
5px 15px 15px white,
201-
-5px 15px 15px white,
202-
0 20px 20px rgba(125 125 125 / 0.5);
203-
animation:
204-
clouds ease 5s alternate infinite 0.2s,
205-
wind ease-out 4s alternate infinite;
206-
}
207-
.ground {
208-
bottom: 0;
209-
background-image: linear-gradient(to top, #fff 97%, 99%, #bbb 100%);
210-
background-position: center 580px;
211-
animation: snowpile linear 300s forwards;
212-
border: 1px solid grey;
213-
/* put the ground into a 3D rendering context (because the snow flakes are in a 3d rendering context) */
214-
transform: translate3d(0, 0, 0);
215-
}
216-
217-
@keyframes snowpile {
218-
from {
219-
background-position: center 580px;
220-
}
221-
to {
222-
background-position: center 280px;
223-
}
224-
}
225-
226-
@keyframes clouds {
227-
from {
228-
border-radius: 0 0 90px 33% / 0 0 45px 50px;
229-
}
230-
to {
231-
border-radius: 0 0 40px 50% / 0 0 55px 80px;
232-
}
233-
}
234-
235-
@keyframes wind {
236-
from {
237-
height: 150px;
238-
}
239-
to {
240-
height: 100px;
241-
}
242-
}
243-
244-
@keyframes falling {
245-
from {
246-
transform: translate(0, -50px) rotate(0deg) scale(0.9, 0.9);
247-
}
248-
to {
249-
transform: translate(30px, 600px) rotate(360deg) scale(1.1, 1.1);
250-
}
251-
}
252-
253-
/* by default, the animations are paused. */
254-
i,
255-
div[class] {
256-
animation-play-state: paused;
257-
}
258-
/* When the div is hovered, the animation plays. Also,
259-
when the input is checked, the animation coming after the checked checkbox plays */
260-
div:hover *,
261-
input:checked ~ div * {
262-
animation-play-state: running;
263-
}
264-
265-
/* Change the content of the label that comes right after the input. Included aria-label on the label to improve accessibility. */
266-
input + label::before {
267-
content: "Play "
268-
}
269-
input:checked + label::before {
270-
content: "Pause "
271-
}
272-
```
273-
274-
{{ EmbedLiveSample('Animations_in_action', "630", "630") }}
275-
276-
This sample animation uses {{cssxref("animation-iteration-count")}} to make the flakes fall repeatedly, {{cssxref("animation-direction")}} to make the cloud move back and forth, {{cssxref("animation-fill-mode")}} to raise the snow level in response to the cloud movement, and {{cssxref("animation-play-state")}} to pause the animation. To see the code for this animation, [view the source on Github](https://github.com/mdn/content/blob/main/files/en-us/web/css/css_animations/index.md?plain=1).
28+
To see the code for this animation, [view the source on Github](https://github.com/mdn/css-examples/blob/main/modules/animation.html).
27729

27830
## Reference
27931

‎files/en-us/web/css/css_backgrounds_and_borders/index.md

Lines changed: 5 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -25,50 +25,11 @@ The properties in this module also let you define whether cells inside a {{HTMLE
2525

2626
This sample of borders, backgrounds, and box shadows consists of centered background images made of linear and radial gradients. A series of box shadows make the border appear to "pop". The element on the left has a border image set. The element on the right has a rounded dotted border.
2727

28-
<!-- intro example -->
29-
30-
```html hidden
31-
<article>
32-
<div></div>
33-
<div></div>
34-
</article>
35-
```
36-
37-
```css hidden
38-
article {display: flex; gap: 10px;}
39-
div {
40-
color: #58ADE3;
41-
height: 320px;
42-
width: 240px;
43-
padding: 20px;
44-
margin: 10px;
45-
border: dotted 15px; /* defaults to `currentcolor` */
46-
border-radius: 100px 0;
47-
background-image:
48-
radial-gradient(circle, transparent 60%, currentcolor 60% 70%,transparent 70% ),
49-
linear-gradient(45deg, currentcolor, white),
50-
linear-gradient(transparent, transparent);
51-
/* the third transparent background image was added to provide space for the background color to show through */
52-
background-color: currentcolor;
53-
background-position: center;
54-
background-size: 60px 60px, 120px 120px;
55-
background-clip: content-box, content-box, padding-box;
56-
box-shadow:
57-
inset 5px 5px 5px rgba(0,0,0,0.4),
58-
inset -5px -5px 5px rgba(0,0,0,0.4),
59-
5px 5px 5px rgba(0,0,0,0.4),
60-
-5px -5px 5px rgba(0,0,0,0.4);
61-
}
62-
div:first-of-type {
63-
border-radius: 0;
64-
border-image-source: repeating-conic-gradient(from 3deg at 25% 25%, currentColor 0 3deg, transparent 3deg 6deg);
65-
border-image-slice: 30;
66-
}
67-
```
68-
69-
{{ EmbedLiveSample('Backgrounds_borders_and_box_shadows_in_action', "450", "450") }}
70-
71-
The background images are defined with {{cssxref("background-image")}}. The images are centered with {{cssxref("background-position")}}. Different values of the {{cssxref("background-clip")}} property for the multiple background images are used to make the background images stay within the content box. The background color gets clipped to the padding box preventing the background from appearing through the transparent sections for the {{cssxref("border-image")}} and the {{cssxref("border-style", "dotted")}} {{cssxref("border")}}. The rounded corners in the element on the right are created using the {{cssxref("border-radius")}} property. A single {{cssxref("box-shadow")}} declaration is used to set all the shadows, both inset and outset. To see the code for this sample, [view the source on Github](https://github.com/mdn/content/blob/main/files/en-us/web/css/compositing_and_blending/index.md?plain=1).
28+
{{EmbedGHLiveSample("css-examples/modules/backgrounds.html", '100%', 430)}}
29+
30+
The background images are defined with {{cssxref("background-image")}}. The images are centered with {{cssxref("background-position")}}. Different values of the {{cssxref("background-clip")}} property for the multiple background images are used to make the background images stay within the content box. The background color gets clipped to the padding box preventing the background from appearing through the transparent sections for the {{cssxref("border-image")}} and the {{cssxref("border-style", "dotted")}} {{cssxref("border")}}. The rounded corners in the element on the right are created using the {{cssxref("border-radius")}} property. A single {{cssxref("box-shadow")}} declaration is used to set all the shadows, both inset and outset.
31+
32+
To see the code for this sample, [view the source on Github](https://github.com/mdn/css-examples/blob/main/modules/backgrounds.html).
7233

7334
## Reference
7435

0 commit comments

Comments
 (0)