Three small special effects that are easy to master - text hollowing, transparency, and shadow effects

This article mainly introduces a summary of examples of text hollowing, transparency value, and shadow effect settings in CSS. Setting the text-stroke-color transparency value can make the text softer to some extent. Friends in need can refer to it. Next

text-fill-color to create hollow text:
Code

CSS CodeCopy content to clipboard

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

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

Effect

text -stroke-color transparency value makes text softer:
Code

CSS CodeCopy 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; Softer

text-shadow text-shadow

Syntax:

CSS Code

Copy content to clipboard

box-reflect：

none | [ {2,3} && <color>? ][ , < ;length>{2,3} && <color

>? ]*

1. Let’s implement a shadowed text example: CodeCSS Code

   Copy content to clipboard

##text-shadow

:2px 2px 0

#000

;

1. Effect text-shadow has 3 length parameters, the first represents horizontal offset, the second represents vertical offset, and the third represents blur (optional) Softer text shadow: Code

CSS Code

Copy content to clipboard

text-shadow

:1px 1px

5px

1. #000

   ; EffectMultiple shadows: Code

CSS Code

Copy content to clipboard

##text-shadow

:

1px 1px 5px

#000
1. ;

Effect

The above is the detailed content of Three small special effects that are easy to master - text hollowing, transparency, and shadow effects. For more information, please follow other related articles on the PHP Chinese website!