Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS Module: backgrounds and borders #24123

Merged
merged 11 commits into from
Feb 8, 2023
Merged

CSS Module: backgrounds and borders #24123

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
514cf74
start of background and borders, again
estelle Feb 1, 2023
1000193
more stuff
estelle Feb 2, 2023
74ca7aa
cc
estelle Feb 3, 2023
f266481
Backgrounds and borders
estelle Feb 3, 2023
af498dd
Merge branch 'main' into borders3
estelle Feb 3, 2023
8831505
Update files/en-us/web/css/css_backgrounds_and_borders/index.md
estelle Feb 6, 2023
0b1af9f
Update files/en-us/web/css/css_backgrounds_and_borders/index.md
estelle Feb 6, 2023
2b9fb93
Apply suggestions from code review
estelle Feb 6, 2023
155eb39
Apply suggestions from code review
estelle Feb 6, 2023
1bf5401
Removes "CSS"
dipikabh Feb 8, 2023
b341d0d
Merge branch 'main' into borders3
dipikabh Feb 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Apply suggestions from code review 
Co-authored-by: Dipika Bhattacharya <[email protected]>
  • Loading branch information
@estelle @dipikabh
estelle and dipikabh committed Feb 6, 2023
commit 2b9fb93440f7c187b0bdcc17238089fdb501154a
8 changes: 4 additions & 4 deletions files/en-us/web/css/css_backgrounds_and_borders/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ div:first-of-type {

{{ 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 employed to make the background images stay within the content box, while the background color gets clipped to the padding box; prevention the background from appearing thru transparent sections for the {{cssxref("border-image")}} and {{cssxref("border-style", "dotted")}} {{cssxref("border")}}. The rounded corners on the second sample were created using the {{cssxref("border-radius")}}property. A single {{cssxref("box-shadow")}} declaration set all the shadows, both inset and outset. To see the code for this background, borders, and box-shadow samples, [view the source on Github](https://github.com/mdn/content/blob/main/files/en-us/web/css/compositing_and_blending/index.md?plain=1).
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).

## Reference

Expand Down Expand Up @@ -127,7 +127,7 @@ The background images are defined with {{cssxref("background-image")}}. The imag
## Guides

- [Learn CSS: background and borders](/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
- : Learn how to implement decorative images using CSS background images.
- : Explains how to implement decorative images using CSS background images.
- [Using multiple backgrounds](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
- : Explains how to set one or more backgrounds on an element.
- [Resizing background images](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images)
Expand All @@ -139,7 +139,7 @@ The background images are defined with {{cssxref("background-image")}}. The imag

## Related concepts

- {{cssxref("border-block-end-color")}} CSS property
- {{cssxref("border-block-end-color")}} property
- {{cssxref("border-block-start-color")}} CSS property
- {{cssxref("border-inline-end-color")}} CSS property
- {{cssxref("border-inline-start-color")}} CSS property
Expand Down Expand Up @@ -179,4 +179,4 @@ The background images are defined with {{cssxref("background-image")}}. The imag
- [Border-radius generator](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator)
- [Box-shadow generator](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator)
- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color), including for borders.
- The [`drop-shadow()`](/en-US/docs/Web/CSS/filter-function/drop-shadow) filter function, used by the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties, applies a drop shadow effect to the input image.
- The [`drop-shadow()`](/en-US/docs/Web/CSS/filter-function/drop-shadow) filter function that applies a drop shadow effect to the input image. The function is used by the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties.