From 5755d6dfbac15abc29ddcd924cee110c4139b073 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Thu, 14 Nov 2024 11:41:38 +0100 Subject: [PATCH] chore(css): Move CSS examples - Modules, filter functions, flow layout, 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 * Update files/en-us/web/css/inline_formatting_context/index.md Co-authored-by: Ruth John * 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 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/css_animations/index.md | 216 +++++++++++++++++- .../css/css_backgrounds_and_borders/index.md | 56 ++++- .../web/css/css_basic_user_interface/index.md | 60 ++++- .../en-us/web/css/css_box_alignment/index.md | 124 +++++++++- .../css/css_compositing_and_blending/index.md | 70 +++++- .../index.md | 14 +- files/en-us/web/css/css_flow_layout/index.md | 33 ++- .../index.md | 113 ++++++++- .../web/css/css_generated_content/index.md | 88 ++++++- .../auto-placement_in_grid_layout/index.md | 131 +++++++++-- files/en-us/web/css/filter-function/index.md | 162 ++++++++++++- .../css/inline_formatting_context/index.md | 187 ++++++++++++++- 12 files changed, 1202 insertions(+), 52 deletions(-) diff --git a/files/en-us/web/css/css_animations/index.md b/files/en-us/web/css/css_animations/index.md index 4b12e091fcb3d3b..0b7d55451fd256b 100644 --- a/files/en-us/web/css/css_animations/index.md +++ b/files/en-us/web/css/css_animations/index.md @@ -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 + + + +
+ +
+
+
+``` + +```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 diff --git a/files/en-us/web/css/css_backgrounds_and_borders/index.md b/files/en-us/web/css/css_backgrounds_and_borders/index.md index f44afe780728f48..6fe31f05e396104 100644 --- a/files/en-us/web/css/css_backgrounds_and_borders/index.md +++ b/files/en-us/web/css/css_backgrounds_and_borders/index.md @@ -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 +
+
+
+
+``` + +```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 diff --git a/files/en-us/web/css/css_basic_user_interface/index.md b/files/en-us/web/css/css_basic_user_interface/index.md index c1ed32e6448ba8a..8eda27a1d2c9722 100644 --- a/files/en-us/web/css/css_basic_user_interface/index.md +++ b/files/en-us/web/css/css_basic_user_interface/index.md @@ -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 +
Edit this text
+
+ Play with these fake form controls + + + + + +
+
+ Be careful not to ruin usability: try resizing these. + + + +
+``` + +```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 `