Easy-to-master 3 small effects-text cutout, transparency value, shadow effect

This article mainly introduces the text skeleton in CSS, transparency value, shadow effect setting example summary, which through the Text-stroke-color transparent value settings can make the text in some degree more gentle, the need for friends can refer to the next

Text-fill-color Create skeleton text:
Code

CSS Code copy content to clipboard

1. -webkit-text-fill-Color:transparent;

2. -webkit-text-stroke:1px #000;

Effect

Text-stroke-color transparency values make text softer:
Code

CSS Code copy content to clipboard

1. background-image:-webkit-linear-gradient (#eee,#000);

2. -webkit-Background-clip: text;

3. -webkit-text-fill-Color:transparent;

Effect 1

Code

CSS Code copy content to clipboard

1. background-image:-webkit-linear-gradient (#eee,#000);

2. -webkit-Background-clip: text;

3. -webkit-text-fill-Color:transparent;

4. -webkit-text-stroke:1px Transparent;

Effect 2

Contrast you will find the text in effect 2 softer than the effect 1

Text-shadow Text Shadow
Grammar:

CSS Code copy content to clipboard

1. Box-reflect:None | [<length>{2,3} && <color;?] [, <length>{2,3} && <color;?] *

Let's implement a shaded text example:
Code

CSS Code copy content to clipboard

1. Text-shadow:2px 2px 0 #000;

Effect

The Text-shadow has 3 length parameters, the 1th represents a horizontal offset, the 2nd represents a vertical offset, and the 3rd represents a blur (optional)
A slightly softer text shadow:
Code

CSS Code copy content to clipboard

1. Text-shadow:1px 1px 5px #000;

Effect

Multiple shadows:
Code

CSS Code copy content to clipboard

1. Text-shadow:1px 1px 5px #000;

Effect