Skip to content

Commit

Permalink
chore(css): Move CSS examples - Modules, filter functions, flow layou…
Browse files Browse the repository at this point in the history 
…t, grid layout (#36752)

* chore(css): Move CSS examples - CSS animations

* chore(css): Move CSS examples - CSS backgrounds and borders

* chore(css): Move CSS examples - CSS basic user interface

* chore(css): Move CSS examples - CSS box alignment

* chore(css): Move CSS examples - CSS compositing and blending

* chore(css): Move CSS examples - CSS flow layout

* chore(css): Move CSS examples - Introduction to formatting contexts

* chore(css): Move CSS examples - CSS generated content

* chore(css): Move CSS examples - Auto-placement in grid layout

* chore(css): Move CSS examples - filter-function

* chore(css): Move CSS examples - Inline formatting context

* chore(css): Move CSS examples - update from main

* Update files/en-us/web/css/css_generated_content/index.md

Co-authored-by: Ruth John <[email protected]>

* Update files/en-us/web/css/inline_formatting_context/index.md

Co-authored-by: Ruth John <[email protected]>

* Update files/en-us/web/css/inline_formatting_context/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: Ruth John <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
  • Loading branch information
@bsmth @Rumyra @github-actions
3 people authored Nov 14, 2024
1 parent acb4e05 commit 5755d6d
Show file tree
Hide file tree
Showing 12 changed files with 1,202 additions and 52 deletions.
216 changes: 214 additions & 2 deletions files/en-us/web/css/css_animations/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,223 @@ The **CSS animations** module lets you animate the values of CSS properties, suc

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.

{{EmbedGHLiveSample("css-examples/modules/animation.html", '100%', 650)}}
```html hidden live-sample___animation
<!-- See aria-label: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label -->
<input
type="checkbox"
id="animate"
aria-label="Toggle the play state of the animation" />
<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>
```

```css hidden live-sample___animation
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% 60%,
transparent 60%
),
linear-gradient(90deg, transparent 40%, white 40% 60%, transparent 60%),
linear-gradient(45deg, transparent 43%, white 43% 57%, transparent 57%),
linear-gradient(135deg, transparent 43%, white 43% 57%, transparent 57%);
}
i:nth-of-type(4n) {
/* Using tree structural pseudo-classes 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;
}

.root {
height: 580px;
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 rgb(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: snowfall 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 snowfall {
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("animation", "", "610px")}}

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/css-examples/blob/main/modules/animation.html).
Click "Play" in the example above to see or edit the code for the animation in the MDN Playground.

## Reference

Expand Down
56 changes: 54 additions & 2 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 @@ -19,11 +19,63 @@ 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.

{{EmbedGHLiveSample("css-examples/modules/backgrounds.html", '100%', 430)}}
```html hidden live-sample___backgrounds
<article>
<div></div>
<div></div>
</article>
```

```css hidden live-sample___backgrounds
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 rgb(0 0 0 / 0.4),
inset -5px -5px 5px rgb(0 0 0 / 0.4),
5px 5px 5px rgb(0 0 0 / 0.4),
-5px -5px 5px rgb(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", "", "450px")}}

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).
Click "Play" in the example above to see or edit the code for the animation in the MDN Playground.

## Reference

Expand Down
60 changes: 58 additions & 2 deletions files/en-us/web/css/css_basic_user_interface/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,69 @@ Basic user interface properties can be used to improve user experience and acces

To view how basic user interface properties can alter the appearance of UI features, interact with the elements in this sample. Note that some features in this sample improve usability while others harm user experience.

{{EmbedGHLiveSample("css-examples/modules/basicUI.html", '100%', 320)}}
```html hidden live-sample___basicUI
<div><span contenteditable>Edit this text </span></div>
<fieldset>
<legend>Play with these fake form controls</legend>
<input type="checkbox" id="check" />
<input type="radio" name="a" />
<input type="radio" name="a" />
<input type="range" />
<progress></progress>
</fieldset>
<fieldset>
<legend>Be careful not to ruin usability: try resizing these.</legend>
<textarea>
cursor: wait;
</textarea>
<textarea>
resize: none;
</textarea>
<textarea>
pointer-events: none;
</textarea>
</fieldset>
```

```css hidden live-sample___basicUI
body {
font-family: sans-serif;
font-size: 1.25rem;
}
[contenteditable] {
cursor: copy;
caret-color: magenta;
border: 1px solid #ccc;
}
:focus {
outline: dashed magenta 3px;
outline-offset: 10px;
}
* {
accent-color: magenta;
}
div,
fieldset {
margin: 20px;
}
textarea:nth-of-type(1) {
cursor: wait;
}
textarea:nth-of-type(2) {
resize: none;
}
textarea:nth-of-type(3) {
pointer-events: none;
}
```

{{EmbedLiveSample("basicUI", "", "300px")}}

The CSS {{CSSxRef("outline")}} and {{CSSxRef("outline-offset")}} properties were used to provide feedback to users which element currently has focus. An {{CSSxRef("accent-color")}} provides a theme color to all the form controls. The caret that appears when the text is edit has the same color thanks to the {{CSSxRef("caret-color")}} property. These can all be considered UI improvements.

Some features harm usability. The {{CSSxRef("cursor")}} property was used to change cursors from the browser default which is confusing. The {{CSSxRef("resize")}} property prevents the second {{HTMLElement("textarea")}} from being resizable while the {{CSSxRef("pointer-events")}} property prevents the third `<textarea>` from receiving click events. It is still focusable using the keyboard.

To see the code for this basic user interface sample, [view the source on GitHub](https://github.com/mdn/css-examples/blob/main/modules/basicUI.html).
Click "Play" in the example above to see or edit the code for the animation in the MDN Playground.

## Reference

Expand Down
Loading

0 comments on commit 5755d6d

Please sign in to comment.