CSS Text Shadow: The secret to getting words out of the way

In the Web design, Text Shadow It is not just a means of increasing readability, but a central means of creating visual depth and an artistic atmosphere. By putting multiple layers of shadow together, we can achieve a result ranging from simple projection to complex neon, 3D and even flames.

Syntax: What are the four values?

text-shadow: h-shadow v-shadow blur-radius color;

Horizontal offset (h-shadow): Positive to right, negative to left.
Vertical offset (v-shadow): Positive value down, negative value up.
Fuzzy radius (blur-radius): The greater the value, the blurring. Set zero to edge sharp.
Colour (color): Support for the RGBA, which means you can control the transparency of the shadows.

2. Specific issues addressed: raising the contrast and artistic sense

Scene one: text on background maps. When the text background is complex or not sufficiently contrasted, the addition of a slight dark, blurry shadow increases readability in an instant without undermining the overall beauty.

Scenario two: achieve side effect. CSS does not have a perfect text bordering attribute, but sets 1 px in four directions Shadows (without ambiguity) can be perfectly modelled by text: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 。

Scenario three: lighting. Set the offset to 0 and add a larger blur radius and high-light colour, which will give light to neon-like lights.

3. Multilayered forces

text-shadow Comma-separated multi-group values are supported. The hierarchy follows the "Book on first". You can use this to achieve a thickness by multilayering. 3D effects, or the creation of a real physical projection through fuzzy layers of different colours.