Use Html5 and CSS to achieve text shadow effect

Two days ago, a pretty girl who was learning HTML5 front-end asked me about how to achieve the effect of text shadow. She told me about text-shadow. She also knew about text-shadow, but she couldn't make it look the way she wanted. In fact, the new features of CSS3 are very powerful. Don't limit your thinking too much. Okay, gossip. Without further ado, let’s take a look at this text shadow first.

text-shadow Text shadow parameters: Parameter 1: The first length value is used to set the horizontal offset value of the object's shadow. Can be negative Parameter 2: The second length value is used to set the vertical offset value of the object's shadow. Can be negative Parameter 3: If the third length value is provided, it is used to set the shadow blur value of the object. Negative values ​​are not allowed Parameter 4: Set the color of the object's shadow

text-shadow: 10px 10px 50px #000;

How do we achieve the effect in the picture above?

HTML structure CSS style font style font color text shadow Then let's take a look at the specific code:

HTML:

 <div class=text>[Thousands of tempers] Shang Xuetang</div>

CSS:

 .text{ font: bold 100px/1.5 'Microsoft Yahei'; color: dodgerblue;/*text-shadow*/ text-shadow: 10px 10px 50px #000; /*text-shadow: 10px 10px 50px #000,-10px - 10px 50px #f00;*/}

Now let's take a look at how to do the effect of the little beauty asking me on the front end..

It’s actually very simple, let’s go directly to the code~

HTML:

 <div class=text>[Thousands of tempers] Shang Xuetang</div>

CSS:

 body { background: #000; color: #fff;}.text{ font: bold 100px/1.5 georgia, sans-serif;/*Different colors, blur sizes of multiple different values*/ text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;}

Spread your thinking. In fact, CSS3 styles are very interesting. Sometimes just a little change can achieve very cool effects^.^

The above is the editor's introduction to using Html5 and CSS to achieve text shadow effects. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!