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

Add documentation for using multiple drop-shadows #37138

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+17 −0
Open

Add documentation for using multiple drop-shadows #37138

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6311b1a
Add documentation for using multiple drop-shadows
TheJaredWilcurt Dec 8, 2024
1e19b34
Apply suggestions from code review
TheJaredWilcurt Dec 8, 2024
b6966ed
Update files/en-us/web/css/filter-function/drop-shadow/index.md
TheJaredWilcurt Dec 8, 2024
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
17 changes: 17 additions & 0 deletions files/en-us/web/css/filter-function/drop-shadow/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ drop-shadow(5px 5px 15px red)
/* The order of color and length values can be changed */
/* drop-shadow( <color> <length> <length> <length> ) */
drop-shadow(#e23 0.5rem 0.5rem 1rem)

/* You can pass multiple drop-shadow's to a filter to stack them */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
/* You can pass multiple drop-shadow's to a filter to stack them */
/* Pass multiple drop-shadows to a filter to stack them */

drop-shadow(10px 10px red) drop-shadow(-5px -5px yellow)
```

The `drop-shadow()` function accepts a parameter of type `<shadow>` (defined in the {{cssxref("box-shadow")}} property), with the exception that the `inset` keyword and `spread` parameters are not allowed.
Expand All @@ -64,6 +67,12 @@ The `drop-shadow()` function accepts a parameter of type `<shadow>` (defined in
<div>drop-shadow(16px 16px red)</div>
<div>drop-shadow(red 1rem 1rem 10px)</div>
<div>drop-shadow(-16px -16px red)</div>
<div>
drop-shadow(1px 1px red)
drop-shadow(1px -1px red)
drop-shadow(-1px 1px red)
Comment on lines +71 to +73
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[mdn-linter] reported by reviewdog 🐶

Suggested change
drop-shadow(1px 1px red)
drop-shadow(1px -1px red)
drop-shadow(-1px 1px red)
drop-shadow(1px 1px red) drop-shadow(1px -1px red) drop-shadow(-1px 1px red)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These should either all be on the same line, or all be on separate lines.

  • All same lines conveys that it is all part of the same CSS property/value.
  • All on separate lines makes the repetition easier to visually parse.

All the suggestions the linter is making are bad.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @TheJaredWilcurt. Yup, the linter is really annoying sometimes. To stop it from committing linting crimes in cases like this, update the language specifier on the opening code fence to include -nolint, so for example

```css-nolint
/* CSS code here */
```

or

```js-nolint
// JS code here
```

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then re add, commit, and push, and it should turn the PR green.

drop-shadow(-1px -1px red)
</div>
```

```css
Expand Down Expand Up @@ -94,6 +103,14 @@ div:nth-child(3) {
div:nth-child(4) {
filter: drop-shadow(-16px -16px red);
}

div:nth-child(5) {
filter:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My only comment here is that I would make the four shadows a bit more different, in color and/or placement. At the moment, it is difficult to see that multiuple shadows are being applied, as they are all so close together.

drop-shadow(1px 1px red)
drop-shadow(1px -1px red)
drop-shadow(-1px 1px red)
drop-shadow(-1px -1px red);
TheJaredWilcurt marked this conversation as resolved.
Show resolved Hide resolved
Comment on lines +108 to +112
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[mdn-linter] reported by reviewdog 🐶

Suggested change
filter:
drop-shadow(1px 1px red)
drop-shadow(1px -1px red)
drop-shadow(-1px 1px red)
drop-shadow(-1px -1px red);
filter: drop-shadow(1px 1px red) drop-shadow(1px -1px red)
drop-shadow(-1px 1px red) drop-shadow(-1px -1px red);

}
```

{{EmbedLiveSample("Setting a drop shadow", "100%", "300px")}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You also need to update the paragraph following the example to describe your new addition. At the moment, it only describes the first four shadows.

Expand Down
Loading