In the previous article "Teach you step by step how to use html css to achieve carousel effect (code sharing)", I introduced how to use html css to achieve carousel effect. The following article will introduce to you how to use css3 to add a three-dimensional effect to fonts. Let’s see how to do it together.
The three-dimensional effect of adding fonts is as follows
1. Create a new html code example 2. By giving Code example Code effect 3. The effect comes out, just add color to the background, and then add the font Effects are positioned by entering the font, font size, horizontal alignment, weight, line spacing, font size, top, bottom, left and right properties in the Code example Code effect 4,The effect is out, just make the font bigger Make it bold and centered. Next, give the font a background color and shadow by entering the background color and shadow in the Use the Code example Code effect By modifying parameters You can achieve a variety of special effects ok, edit the code and complete. Recommended learning:CSS3 introductory tutorial The above is the detailed content of Teach you how to use css3 to add three-dimensional effects to fonts (with code). For more information, please follow other related articles on the PHP Chinese website!html
File, first write thediv
tag and enter thecontenteditable
attribute to specify whether the user is allowed to edit the content. It can support IE and eliminates compatibility issues.
class
is the class selector, which can be purely static Control font color in web pages.
css
global settings, write and usehead
to addString code and then enter the
div
generationbackground-color
attribute in thestyle
tag to set the background color of the element.body{ background-color: #456; }
style
tag..text { font-family:"微软雅黑", "Dosis", sans-serif; font-size: 80px; text-align: center; font-weight: bold; line-height:200px; text-transform:uppercase; position: relative; }
style
tag.text-shadow
property to generate text shadow effects. Its usage is very simple,text-shadow:0px 0px 0px #000
,X
axis,Y
axis, blur level (not a negative value), shadow color..eff{ background-color: #333; color:#fefefe; text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0, 0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.6); }