Example sharing of text shadow effect using Html5 and CSS

This article mainly introduces the relevant information on using Html5 and CSS to achieve text shadow effects. Friends in need can refer to it. I hope it can help everyone.

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.

1. Text shadow

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

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

2. Example

How do we achieve the effect of the above picture?

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

HTML:

<p>【千锤百炼】尚学堂</p>

CSS:

.text{
    font: bold 100px/1.5 '微软雅黑';
    color: dodgerblue;
/*文本阴影*/
    text-shadow: 10px 10px 50px #000;
    /*text-shadow: 10px 10px 50px #000,-10px -10px 50px #f00;*/
}

Now let’s see how to do the effect of the front-end little beauty asking me..

It’s actually very simple, let’s do it Directly upload the code~

HTML:

<p>【千锤百炼】尚学堂</p>

CSS:

body {
    background: #000;
    color: #fff;
}
.text{
    font: bold 100px/1.5 georgia, sans-serif;
/*不同颜色的,多个不同值的模糊大小*/
    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 style is very interesting. Sometimes it can be achieved with just a little change. Very cool effect^.^

Related recommendations:

Use CSS3 to achieve ever-changing text shadow text-shadow effect design

Detailed introduction to layer shadow and text shadow effects using CSS3

CSS3 tutorial (4): Web page border and web page text shadow_css3_CSS_Web page

The above is the detailed content of Example sharing of text shadow effect using Html5 and CSS. For more information, please follow other related articles on the PHP Chinese website!