Settings for text hollowing, transparency and shadow effects in CSS3

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 creates hollow text:
Code

-webkit-text-fill-color:transparent;   
-webkit-text-stroke:1px #000;

Effect

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

background-image:-webkit-linear-gradient(#eee,#000);   
-webkit-background-clip:text;   
-webkit-text-fill-color:transparent;

Effect 1

code

background-image:-webkit-linear-gradient(#eee,#000);   
-webkit-background-clip:text;   
-webkit-text-fill-color:transparent;   
-webkit-text-stroke:1px transparent;

Effect 2

Comparison you will find that the text in effect 2 is a little softer than effect 1

text-shadow text shadow
Grammar:

box-reflect：none | [ <length>{2,3} && <color>? ][ , <length>{2,3} && <color>? ]*

Let’s implement a shadowed text example:
Code

text-shadow:2px 2px 0 #000;

Effect

## text- Shadow has three length parameters, the first one represents horizontal offset, the second one represents vertical offset, and the third one represents blur (optional)

Softer text shadow:
Code

text-shadow:1px 1px 5px #000;

Effect

Multiple Shades:

Code

text-shadow:1px 1px 5px #000;

Effect

That’s it The entire content of this article is hoped to be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Use CSS3 to draw basic graphics

The use of CSS3 layer shadows and text shadows

How to use css to make the background image stretch and fill to avoid repeated display

The above is the detailed content of Settings for text hollowing, transparency and shadow effects in CSS3. For more information, please follow other related articles on the PHP Chinese website!