CSS Box Shadow Generator

Description of each CSS property

box-shadow

The box-shadow property allows you to set a shadow on an element.

Each value can be specified as follows
box-shadow: Shadow inward(inset)amount of horizontal displacementamount of vertical displacementamount of shadow blurringshadow sizeshadow color

• Negative values foramount of horizontal displacementamount of vertical displacementwill place them vertically above and horizontally to the left, respectively.
• A positive value forshadow sizemakes it larger, while a negative value makes it smaller.

Example description) box-shadow: inset 2px 2px 3px 4px #000;

If inset is not required, the description is also unnecessary.

• If only two values are specified, they are set asamount of horizontal displacementamount of vertical displacement
• If only three values are specified, an additional third value is set asamount of shadow blurring
• If only four values are specified, an additional fourth value is set asshadow size

The initial values foramount of horizontal displacementamount of vertical displacementamount of shadow blurringshadow sizeare 0 for each.
The initial value forshadow coloris currentColor (the value set for color).

If border-radius is specified, the shadow will also reflect that rounding.

If border-radius is specified, the shadow will also reflect that rounding.
To specify multiple shadows, separate them with a comma ",". The first shadow specified will be in the foreground.
Example description) box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, .5), 0px 0px 3px #ff0;

Use text-shadow to add shadows to text.

before / after

before and after create pseudo-elements as children of an element.
The before is created as the first child element of the element and the after as the last child element of the element.
Also, the content property is required.
When describing "before," a ":" (colon) is placed in front of it.
However, to distinguish it from pseudo-classes, it is often described with two colons.
Example description)
.test::before {
content: "";
}

In addition to strings, quotation marks, counters, images, etc. can be inserted in the content property.
Since it is generated as an inline element, it must be converted to a block element when specifying a size such as width.

Since screen readers may not be able to access pseudo-elements, it is necessary to consider whether pseudo-elements should be used for information that is necessary for users.

position

The position property sets how the element is positioned.
The top, right, bottom, and left properties determine the position of the placed element if a value other than static (the default value) is specified.
For non-static values, the z-index (order of overlap) can be specified. z-index defaults to auto. A numerical value can be specified, and the higher the value, the higher the element will be displayed as the upper layer (the layer in front).

The position property can be set to the following values

• relative：The position of the element itself does not change even if it is specified, but unlike static (default value), it is affected if top, etc., is specified.
• absolute：If an ancestor element is specified other than static, it is placed with respect to the nearest specified ancestor element.
• fixed：The elements are positioned relative to the screen.
  The position does not change when scrolling.
• sticky：Like fixed, it fixes the position when scrolled, but it cannot leave the scope of the parent element.

Example description) position: relative;