Cool, text shadow with Html5/CSS, html5css

Cool, text shadow with Html5/CSS, html5css

Two days ago, an html5 front-end girl asked me how to implement the text shadow effect. She spoke to me about text shadow. She also knew text-shadow ,. but I cannot do what I want. In fact, the new functions of css3 are very powerful. Don't make your thoughts too restrictive. Well, let's take a look at the text shadow.

I. Text shadow
Text-shadow text shadow
Parameters:
Parameter 1: 1st length values are used to set the object's shadow horizontal offset value. It can be a negative value.
Parameter 2: The length of 2nd is used to set the vertical offset of the shadow of the object. It can be a negative value.
Parameter 3: If 3rd length values are provided, it is used to set the shadow blur value of the object. Negative value not allowed
Parameter 4: Set the color of the Object Shadow

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

Ii. Instance

How can we achieve this?
HTML Structure
CSS style
Font Style
Font color
Text shadow let's look at the specific code:
HTML:

<Div class = "text"> [click here] Shang xuexiang div> CSS :. text {font: bold 100px/1.5 ' '; 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 the front-end little girl and ask me how to do it ..

 

In fact, it is very simple. Let's go directly to the Code ~
HTML:

<Div class = "text"> [click here] Shang xuexiang div> CSS: body {background: #000; color: # fff ;}. text {font: bold 100px/1.5 georgia, sans-serif;/* blur different values in different colors */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 ;}

　　

Actually, the css3 style is very interesting when you think about it. Sometimes it is often a little changed, so you can achieve a Very dazzling effect ^. ^

In the next article, we will introduce the same technical method to implement text border shadow. Please look forward