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 CodeCopy 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:

   1pxtransparent; 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

:2px2px0

#000

;

1. Effecttext-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

:1px1px

5px

1. #000

   ;EffectMultiple shadows:Code

CSS Code

Copy content to clipboard

##text-shadow

:

1px1px5px

#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!