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

Softer text shadow:
Code

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

Code

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

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!