Add documentation for using multiple drop-shadows #37138
Conversation
This was missing from the page, had to go to SO to find it.
TheJaredWilcurt
requested review from
chrisdavidmills
and removed request for
a team
github-actions
bot
added
Content:CSS
|
Preview URLs (comment last updated: 2024-12-08 22:11:41) |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| drop-shadow(1px 1px red) | ||
| drop-shadow(1px -1px red) | ||
| drop-shadow(-1px 1px red) |
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
| 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) |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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 ```
There was a problem hiding this comment.
Then re add, commit, and push, and it should turn the PR green.
| filter: drop-shadow(1px 1px red) | ||
| drop-shadow(1px -1px red) | ||
| drop-shadow(-1px 1px red) | ||
| drop-shadow(-1px -1px red); |
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
| 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); |
There was a problem hiding this comment.
Is there a way to make the linter shut up without making the code look like it was written by AI?
| filter: | ||
| drop-shadow(1px 1px red) | ||
| drop-shadow(1px -1px red) | ||
| drop-shadow(-1px 1px red) | ||
| drop-shadow(-1px -1px red); |
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
| 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); |
There was a problem hiding this comment.
Hi there @TheJaredWilcurt, and thanks for your addition to MDN! I've left a few comments for you to work your way through, but nothing too major.
| @@ -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 */ | |||
There was a problem hiding this comment.
| /* You can pass multiple drop-shadow's to a filter to stack them */ | |
| /* Pass multiple drop-shadows to a filter to stack them */ |
| @@ -94,6 +103,14 @@ div:nth-child(3) { | |||
| div:nth-child(4) { | |||
| filter: drop-shadow(-16px -16px red); | |||
| } | |||
|
|
|||
| div:nth-child(5) { | |||
| filter: | |||
There was a problem hiding this comment.
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); | ||
| } | ||
| ``` | ||
|
|
||
| {{EmbedLiveSample("Setting a drop shadow", "100%", "300px")}} |
There was a problem hiding this comment.
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.
Description
Adds examples for how to use multiple drop-shadows.
Motivation
I assumed the SVG filter
drop-shadowwould work the same as the CSS box-shadow/text-shadow (comma-separated). But when that didn't work, I came to MDN, which didn't mention it and assumed it wasn't possible, but double-checked on StackOverflow and found the solution.