fix(css): update 'drop-shadow()' page

[OnkarRuikar]

• fixes drop-shadow() parameters #29005

It is helpful to document the required parameters first then the optional parameters. For usage in code no guideline exist about the order. Also Prettier has no opinion about this. We can show all allowed combinations of values in the "Syntax" section.

The PR does following changes:

• updates the syntax section to cover various scenarios
• uses {{optional_inline}} badge. All non optional params are mandatory.
• adds playable example
• use standard-deviation instead of blur-radius. The drop-shadow and box-shadow implementations use different algorithms.

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/box-shadow
• /en-US/docs/Web/CSS/filter-function/drop-shadow

External URLs (1)

URL: /en-US/docs/Web/CSS/filter-function/drop-shadow
Title: drop-shadow()

• https://en.wikipedia.org/wiki/Gaussian_blur (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2023-09-22 19:08:17)

[dipikabh]

Thanks @OnkarRuikar for adding these improvements to the page!

[dipikabh]

Thanks, @OnkarRuikar. It is getting pretty close. Just a few more adjustments needed for the box-shadow page.

[dipikabh]

Suggested change

	- The fourth optional {{cssxref("&lt;length&gt;")}} value is interpreted as `<spread-radius>`. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be `0` (the shadow will be the same size as the element).
	- If four values are specified, the fourth value is interpreted as `<spread-radius>`. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be set to `0` (that is, the shadow will be the same size as the element).

[dipikabh]

While we're updating the value descriptions, can we also update this part just before "Values" to remove duplicate info:

Specify a single box-shadow using:

• Two, three, or four <length> values.
  • If only two values are given, they are interpreted as <offset-x> and <offset-y> values.
  • If a third value is given, it is interpreted as a <blur-radius>.
  • If a fourth value is given, it is interpreted as a <spread-radius>.
• Optionally, the inset keyword.
• Optionally, a <color> value.

To specify multiple shadows, provide a comma-separated list of shadows.

• We should probably move the above text to the "Values" section.
• And update it to:

You can create a single box-shadow by specifying two, three, or four <length> values, an optional inset, and an optional <color> value. To create multiple box-shadows, specify a comma-separated list of shadows for the box-shadow property.

[dipikabh]

Thanks for your work on these update, @OnkarRuikar 🙌