Shadows

Question 1

Which CSS properties can create shadows?

Answer 1

The CSS properties that can create shadows are:

• box-shadow: used to apply a shadow effect to block-level elements or boxes.
• text-shadow: used to apply a shadow effect to text content.

“box-shadow - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). and “text-shadow - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 12, 2023.

Question 2

What does the box-shadow CSS property do?

Answer 2

The box-shadow property enables you to cast a drop shadow from the frame of almost any element. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. You can set multiple effects separated by commas.

A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

“box-shadow - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 12, 2023.

Question 3

Syntax of box-shadow CSS property

Answer 3

You can 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.

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

“box-shadow - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 12, 2023.

Question 4

Possible values of box-shadow CSS property

Answer 4

• inset - if not specified, the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of the inset keyword changes the shadow to one inside the frame (as if the content was debossed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.
• <offset-x> - The <length> value specifies the horizontal distance. Negative values place the shadow to the left of the element.
• <offset-y> - The <length> values specifies the vertical distance. Negative values place the shadow above the element.
• <blur-radius> - This is a third <length> value. The larger this value, the bigger the blur. Negative values are not allowed. If not specified, it will be 0 (the shadow’s edge is sharp).
• <spread-radius> - This is a fourth <length> value. 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).
• <color> - See <color> values for possible keywords and notations. If not specified, it defaults to current color.

Note: If both <offset-x> and <offset-y> are set to 0, the shadow is placed behind the element (and may generate a blur effect if <blur-radius> and/or <spread-radius> is set).

“box-shadow - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 12, 2023.

Question 5

What happens when the values x-offset, y-offset, and blur of box-shadow CSS property are all zero?

Answer 5

The box shadow will be a solid-colored outline of equal-size on all sides. The shadows are drawn back to front, so the first shadow sits on top of subsequent shadows.

For example:

HTML

<div><p>Hello World</p></div>

CSS

p {
  box-shadow: 0 0 0 2em #f4aab9, 0 0 0 4em #66ccff;
  margin: 4em;
  padding: 1em;
}

“box-shadow - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 12, 2023.

Question 6

Difference between box-shadow and filter: drop-shadow()

Answer 6

The difference between box-shadow and filter: drop-shadow() really boils down to the CSS box model. One sees it and the other disregards it. There are other differences that distinguish the two in terms of browser support, performance and such, but the way the two treat the box model is the key difference.

Source css-tricks

Question 7

drop-shadow() CSS function

Answer 7

The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a filter-function.

Source MDN

Question 8

List the types of shadows that can occure when a light shines on an object

Answer 8

There are two kinds of shadows that occur when a light shines on an object, a drop shadow and a form shadow.

• A drop shadow is cast when an object blocks a light source. A drop shadow can vary in tone and value.
• A form shadow, on the other hand, is the side of an object facing away from the light source. A form shadow has softer, less defined edges than a drop shadow. Form shadows illustrate the volume and depth of an object.

Source css-tricks

Question 9

How are box-shadow comma separated shadow values stacked

Answer 9

Shadows stack on top of one another, in the order they are declared where the top shadow is the first one in the list.

Source css-tricks

Question 10

What does the text-shadow CSS property do?

Answer 10

The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.

“text-shadow - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 12, 2023.

Question 11

What is the syntax of the text-shadow CSS property?

Answer 11

text-shadow property is specified as a comma-separated list of shadows.

Each shadow is specified as two or three <length> values, followed optionally by a <color> value. The first two <length> values are the <offset-x> and <offset-y> values. The third, optional, <length> value is the <blur-radius>. The <color> value is the shadow’s color.

When more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top.

Example:

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: revert;
text-shadow: revert-layer;
text-shadow: unset;

Source MDN

Question 12

text-shadow CSS property values

Answer 12

• <color> - Optional. The color of the shadow. It can be specified either before or after the offset values. If unspecified, the color’s value is left up to the user agent.
• <offset-x> <offset-y> - Required. These <length> values specify the shadow’s distance from the text. <offset-x> specifies the horizontal distance; a negative value places the shadow to the left of the text. <offset-y> specifies the vertical distance; a negative value places the shadow above the text. If both values are 0, the shadow is placed directly behind the text, although it may be partly visible due to the effect of <blur-radius>.
• <blur-radius> - Optional. This is a <length> value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to 0.

Source MDN

Question 13

What is a drop shadow?

Answer 13

A drop shadow is effectively a blurred, offset version of the input image’s alpha mask, drawn in a specific color and composited below the image.

You create them using the drop-shadow() CSS function

Source MDN

Question 14

Reasons why shadows can help improve accessibility

Answer 14

Google conducted a study with low-vision participants and concluded that using shadows and outlines:

• Increases the ease and speed of finding a component when scanning pages, and
• Improves one’s ability to determine whether or not a component is interactive.

W3C says in it’s guidelines for WCAG 2.0 standards:

[…] the designer might darken the background behind the letter, or add a thin black outline (at least one pixel wide) around the letter in order to keep the contrast ratio between the letter and the background above 4.5:1.

Source css-tricks