CSS text-shadow adds shadow to H1 title

 I often see that the title of some websites has a shadow effect, just like the title of this article actually has a little shadow effect. How is this done? First, you need to understand two things. The first thing is the website title <H1> tag, and the second is CSS3 text-shadow text shadow. Combining these two grammars together, you can create the shadow effect of the article title. The advantage of this effect is that it can make the title more three-dimensional and clearer, and can be easily distinguished from the content of the web page.

HTML H1 title and text

<h1>Here is the title of the example</h1>
Here is the content of the article...

The most important headings in web pages are usually marked with <h1> tags, please refer to: HTML H1 H2 H3 H4 H5 H6 headings .

CSS3 text-shadow syntax

<style type="text/css">
<!--
h1 {
　text-shadow:3px 3px 3px #cccccc;
}
-->
</style>

This is a standard CSS syntax block, starting with "<style type="text/css">" and ending with "</style>". We use declarations like h1 to set the shadow effect of the H1 title. text-shadow is the attribute of text shadow effect . For detailed usage, please refer to: CSS3 text-shadow text shadow effect .

Integrate the above two parts into one webpage

<style type="text/css">
<!--
.h1 {
　text-shadow:3px 3px 3px #cccccc;
}
-->
</style>
<h1>This is the sample title</h1>
This is the article content .....................

Rendering effect

Here is the sample title,

here is the article content...

Is it clear to distinguish the article title from the article content? This technique can be seen on many websites, but the editor here suggests that although text-shadow can clearly mark the three-dimensional effect of the H1 title, excessive use will cause the blurring effect, which will make the title blurred. The design needs Pay more attention to the presentation effect.