Skip to content

Commit

Permalink
Minor: link to css-examples and github (mdn#24305)
Browse files Browse the repository at this point in the history 
* 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]>
  • Loading branch information
@estelle @wbamberg
estelle and wbamberg committed Feb 10, 2023
1 parent 446ffcc commit 04c614f
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 355 deletions.
63 changes: 3 additions & 60 deletions files/en-us/web/css/compositing_and_blending/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,66 +23,9 @@ The properties in this CSS module can be used to define the blending mode that s

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.

```html hidden
<section>
<div><span>Normal, with no blending</span></div>
<div><span>Multiplies colors</span></div>
<div><span>Multiplies based on background color</span></div>
<div>Normal, with no blending</div>
<div>Multiplies colors</div>
<div>Multiplies based on background color</div>
</section>
```

```css hidden
/* creates a div with two offset striped background images and a background color. */
div {
width: 200px;
height: 200px;
background-image:
repeating-linear-gradient(45deg, red 0 15px, pink 15px 30px),
repeating-linear-gradient(-45deg, blue 0 15px, lightblue 15px 30px);
background-size: 150px 150px;
background-repeat: no-repeat;
background-position: top left, bottom right;
background-color: palegoldenrod;
text-align: center;
padding-top: 150px;
font-family: sans-serif;
box-sizing: border-box;
border: 5px solid black;
}
div:nth-of-type(3n+1){
background-blend-mode: normal;
}
div:nth-of-type(3n+2){
background-blend-mode: multiply;
}
div:nth-of-type(3n+3){
background-blend-mode: overlay;
}
div:nth-of-type(n + 4) {
mix-blend-mode: difference;
}
/* put a pink background with transparent round holes that covers the entire element, and lay the examples in two rows with three columns each */
section {
padding: 0.75em;
background: radial-gradient(circle, transparent 0 20px, rgb(255, 200, 200) 20px);
background-size: 60px 60px;
background-position: center;
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
/* make some of the text more legible */
span {
background-color: #ffffff99;
}
```

{{ EmbedLiveSample('Compositing_and_blending_in_action', "630", "300") }}

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).
{{EmbedGHLiveSample("css-examples/modules/compositing.html", '100%', 460)}}

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).

## Reference

Expand Down
254 changes: 3 additions & 251 deletions files/en-us/web/css/css_animations/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,259 +21,11 @@ The animations CSS module lets you animate the values of CSS properties, such as

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.

```html hidden
<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 -->
<label for="animate">the animation</label>
<div class="root">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<div class="cloud"></div>
<div class="ground"><div>
</div>
```
{{EmbedGHLiveSample("css-examples/modules/animation.html", '100%', 650)}}

```css hidden
i {
display: inline-block;
height: 16px;
width: 16px;
border-radius: 50%;
animation: falling 3s linear 0s infinite backwards;
/* Snowflakes are made with CSS linear gradients (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) */
background-image:
linear-gradient(180deg, transparent 40%, white 40%, white 60%, transparent 60%),
linear-gradient(90deg, transparent 40%, white 40%, white 60%, transparent 60%),
linear-gradient(45deg, transparent 43%, white 43%, white 57%, transparent 57%),
linear-gradient(135deg, transparent 43%, white 43%, white 57%, transparent 57%);
}
i:nth-of-type(4n) { /* using tree structural pseudoclasses to create randomness - https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type */
height: 30px;
width: 30px;
transform-origin: right -30px;
}
i:nth-of-type(4n+1) {
height: 24px;
width: 24px;
transform-origin: left 30px;
}
i:nth-of-type(4n+2) {
height: 10px;
width: 10px;
transform-origin: -30px 0;
}
i:nth-of-type(4n+3) {
height: 40px;
width: 40px;
transform-origin: -50px 0;
}
i:nth-of-type(4n) {
animation-duration: 5.3s;
animation-iteration-count: 12;
transform-origin: -10px -20px;
}
i:nth-of-type(4n+1) {
animation-duration: 3.1s;
animation-iteration-count: 20;
transform-origin: 10px -20px;
}
i:nth-of-type(4n+2) {
animation-duration: 1.7s;
animation-iteration-count: 35;
transform-origin: right -20px;
}
i:nth-of-type(3n) {
animation-delay: 2.3s;
}
i:nth-of-type(3n+1) {
animation-delay: 1.5s;
}
i:nth-of-type(3n+2) {
animation-delay: 3.4s;
}
i:nth-of-type(5n) {
animation-timing-function: ease-in-out;
}
i:nth-of-type(5n+1) {
animation-timing-function: ease-out;
}
i:nth-of-type(5n+2) {
animation-timing-function: ease;
}
i:nth-of-type(5n+3) {
animation-timing-function: ease-in;
}
i:nth-of-type(5n+4) {
animation-timing-function: linear;
}
i:nth-of-type(11n) {
animation-timing-function: cubic-bezier(0.2, 0.3, 0.8, 0.9);
}
i:nth-of-type(7n) {
opacity: 0.5;
}
i:nth-of-type(7n+2) {
opacity: 0.3;
}
i:nth-of-type(7n+4) {
opacity: 0.7;
}
i:nth-of-type(7n+6) {
opacity: 0.6;
animation-timing-function: ease-in;
transform-origin: left 10px;
}
i:nth-of-type(7n+1) {
opacity: 0.8;
}
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.

.root {
height: 600px;
background-color: skyblue;
border: 1px solid darkgrey;
position: relative;
overflow: hidden;
}
.ground, .cloud {
position: absolute;
top: 0;
right: 0;
left: 0;
background-repeat: no-repeat;
}
.cloud {
width: 100%;
height: 150px;
background: #ffffff;
border-radius: 0 0 90px 33% / 0 0 45px 50px;
box-shadow:
5px 15px 15px white,
-5px 15px 15px white,
0 20px 20px rgba(125 125 125 / 0.5);
animation:
clouds ease 5s alternate infinite 0.2s,
wind ease-out 4s alternate infinite;
}
.ground {
bottom: 0;
background-image: linear-gradient(to top, #fff 97%, 99%, #bbb 100%);
background-position: center 580px;
animation: snowpile linear 300s forwards;
border: 1px solid grey;
/* put the ground into a 3D rendering context (because the snow flakes are in a 3d rendering context) */
transform: translate3d(0, 0, 0);
}

@keyframes snowpile {
from {
background-position: center 580px;
}
to {
background-position: center 280px;
}
}

@keyframes clouds {
from {
border-radius: 0 0 90px 33% / 0 0 45px 50px;
}
to {
border-radius: 0 0 40px 50% / 0 0 55px 80px;
}
}

@keyframes wind {
from {
height: 150px;
}
to {
height: 100px;
}
}

@keyframes falling {
from {
transform: translate(0, -50px) rotate(0deg) scale(0.9, 0.9);
}
to {
transform: translate(30px, 600px) rotate(360deg) scale(1.1, 1.1);
}
}

/* by default, the animations are paused. */
i,
div[class] {
animation-play-state: paused;
}
/* When the div is hovered, the animation plays. Also,
when the input is checked, the animation coming after the checked checkbox plays */
div:hover *,
input:checked ~ div * {
animation-play-state: running;
}

/* Change the content of the label that comes right after the input. Included aria-label on the label to improve accessibility. */
input + label::before {
content: "Play "
}
input:checked + label::before {
content: "Pause "
}
```

{{ EmbedLiveSample('Animations_in_action', "630", "630") }}

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).
To see the code for this animation, [view the source on Github](https://github.com/mdn/css-examples/blob/main/modules/animation.html).

## Reference

Expand Down
49 changes: 5 additions & 44 deletions files/en-us/web/css/css_backgrounds_and_borders/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,50 +25,11 @@ The properties in this module also let you define whether cells inside a {{HTMLE

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.

<!-- intro example -->

```html hidden
<article>
<div></div>
<div></div>
</article>
```

```css hidden
article {display: flex; gap: 10px;}
div {
color: #58ADE3;
height: 320px;
width: 240px;
padding: 20px;
margin: 10px;
border: dotted 15px; /* defaults to `currentcolor` */
border-radius: 100px 0;
background-image:
radial-gradient(circle, transparent 60%, currentcolor 60% 70%,transparent 70% ),
linear-gradient(45deg, currentcolor, white),
linear-gradient(transparent, transparent);
/* the third transparent background image was added to provide space for the background color to show through */
background-color: currentcolor;
background-position: center;
background-size: 60px 60px, 120px 120px;
background-clip: content-box, content-box, padding-box;
box-shadow:
inset 5px 5px 5px rgba(0,0,0,0.4),
inset -5px -5px 5px rgba(0,0,0,0.4),
5px 5px 5px rgba(0,0,0,0.4),
-5px -5px 5px rgba(0,0,0,0.4);
}
div:first-of-type {
border-radius: 0;
border-image-source: repeating-conic-gradient(from 3deg at 25% 25%, currentColor 0 3deg, transparent 3deg 6deg);
border-image-slice: 30;
}
```

{{ EmbedLiveSample('Backgrounds_borders_and_box_shadows_in_action', "450", "450") }}

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).
{{EmbedGHLiveSample("css-examples/modules/backgrounds.html", '100%', 430)}}

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/css-examples/blob/main/modules/backgrounds.html).

## Reference

Expand Down

0 comments on commit 04c614f

Please sign in to comment.