In the past, if you wanted to add special styles to text, such as lighting, shadows, etc., you had to use PS to save the text as a picture in order to display it normally on the web page.
The newly added text-shadow property of CSS3 can easily achieve great three-dimensional effects such as text projection, luminescence, and inner shadows, and the effect is natural, not inferior to the effect produced by PS. The specific effect is shown in the figure:
1. Grammar of text-shadow
As usual, first read the official document of w3c: CSS3 text-shadow property
- text-shadow: none|h-shadow v-shadow blur color;
none: no shadow, the default value.
h-shadow: Set the shadow horizontal offset value of the object. can be negative
v-shadow: Set the shadow vertical offset value of the object. can be negative
blur: Sets the shadow blur value of the object. Negative values are not allowed and can be defaulted.
color: Set the color of the object's shadow. Can be defaulted. By default, it is #333 dark gray, not black.
Before learning the various effects, I think you should understand that the shadow core is actually a copy of the original object
For example, I copied two original objects, and set its offset value, blur value and color.
.ts1{
text-shadow:10px 20px 1px #666,20px 40px 3px #999;}
Let's take a look at the powerful three-dimensional effect of text-shadow.
First set the style uniformly for all demos:
.demo{
width:400px;
padding:30px;
background-color:#ccc;
font:bold 50px/2 "microsoft Yahei";
color:#333;
text-transform:uppercase;
margin-bottom:20px;}
1. The most common simple shadow effect for a large number of text paragraphs
.ts2{
font-size:16px;
text-shadow:0 1px #eee;
color:#121212;}
.ts3{
background-color:#666;
color:#eee;
font-size:16px;
text-shadow:0 1px #121212;}
This kind of shadow requires simplicity and texture, and the focus is on the contrast of black, white and gray to produce an effect. The text is dark, the background is light, and the shadow is a little brighter than the background. The text is bright, the background is dark, and the shadow is a little darker than the background. It needs to look like nothing, but it has more detailed texture than nothing. This effect only requires the y coordinate to move down by 1px, neither horizontal nor blur.
2. Common x, y positive offset text shadow effect
.ts4{
background-color:#ddd;
color:#fff;
text-shadow:2px 2px #777;
}
3. A raised effect, a bit like a slight relief
.ts5{
text-shadow:-1px -1px #fff,1px 1px #333;
color:#ccc;
background-color:#888;}
The highlight is on the upper left, and the dark side is on the lower right, so the highlight x and y are negative values, and the dark side x and y are positive. Toggling the positive and negative of the highlights and shadows can produce the opposite concave effect. It will be better understood if you are familiar with the ps style panel. Knowledge is interlinked. Another point is the color contrast.
4. The concave effect is just the opposite of the convex effect.
.ts6{
font-family:Verdana, Geneva, sans-serif;
color:#666;
text-shadow:-1px -1px #000,-2px -2px #333,1px 1px #fff,2px 2px #eee;}
After doing two layers, it looks more concave. The key is that the dark side is on the upper left and the bright side is on the lower right.
5. Text shadow semi-transparent three-dimensional effect
.ts7{
font-family:Tahoma, Geneva, sans-serif;
color:rgba(203,29,77,.5);
text-shadow:-5px -5px rgba(70,232,240,.5);}
The key is to use the translucent effect of rgba to realize the overlay.
6. 3D stereo effect
.ts8{
background-color:#333;
color:#1C9F96;
text-shadow:1px 1px #BAE6EF,2px 2px #BAE6EF,3px 3px #BAE6EF,4px 4px #BAE6EF,5px 5px #BAE6EF;
}
The key to 3D effect is to superimpose the shadow layer by layer, that is, to copy one object after another, each time the offset is 1px more than the last one, and the color is exactly the same. Negative values can produce a 3D effect in the opposite direction.
7. Antique font effect
.ts9{
font-family:Georgia, "Times New Roman", Times, serif;
color:#eee;
background-color:#666;
text-shadow:5px 5px #666,7px 7px #eee;}
The core of the effect is that the first shadow color is the same as the background color, and the second shadow color is the same as the text color.
8. Light stick effect
.ts10{
background-color:#000;
color:transparent;
text-shadow:0 0 5px #FFFF66,1px 1px 1px #fff,-1px -1px 1px #fff,0 0 10px #FFFF99,0 0 20px #B9EB50;}
The key point is the transparent color used for the text, so the text itself is gone, and a certain blurred shadow is added to the front and back through the white stroke, like a sandwich biscuit.
9. Use opacity to realize translucent pattern font
body{
background:url(images/body_bkg.png);}
.ts11{
background-color:#222;
color:#333;
opacity:.4;
text-shadow:-1px -1px rgba(255,255,255,.3),1px 1px rgba(0,0,0,.8);
}
The text and the background color are the same, the highlight and the dark side adopt the rgba method, and the transparency effect is used for the white and black, which is softer, and the opacity can be used to achieve a translucent effect, and the pattern picture of the background can be seen.
10. Text stroke style
If you use shadows to stroke the text, you will find that there are breakpoints at the turning points of the text, which is a little ugly.
.ts12{
color:#fff;
text-shadow:-1px 0 #666,0 -1px #666,1px 0 #666,0 1px #666;
}
There is a special property text-stroke prefixed with webkit, which can be implemented as a text stroke, but this property is -webkit-private, and Firefox and IE browsers do not support it.
.ts12{
color:#fff;
-webkit-text-stroke:1px #666;/*文字描边*/
}
It can be found that using text-stroke to stroke text has no breakpoints.
11. 3D gradient blur projection
.ts13{
color:#0DCFDF;
text-shadow: 0 0 2px #686868,0 1px 1px #ddd, 0 2px 1px #d5d5d5, 0 3px 1px #ccc, 0 4px 1px #c5c5c5,
0 5px 1px #c1c1c1, 0 6px 1px #bbb, 0 7px 1px #777,0 8px 3px rgba(100,100,100,0.4),0 9px 5px rgba(100,
100,100,0.09),0 10px 7px rgba(100,100,100,0.14),0 11px 9px rgba(100,100,100,0.2),0 12px 11px rgba(100,100,
100,0.24),0 13px 15px rgba(100,100,100,0.29);
background-color:#fff;
}
Compared with the pure color 3D projection, this 3D projection looks more three-dimensional and shadowy. It's just that the color changes from light to dark, slowly increasing the blur value, and using rgba translucency for dark colors, which can be superimposed softer and more three-dimensional.
To sum up, the shadow effect of text is actually a layer-by-layer copy and overlay, and you can set the offset value, blur value, and color for a copied object.
Observe more, think more, practice more, design different text effects according to specific web page requirements, and add luster to the web page effect.