Home > Article > Web Front-end > Teach you how to use css3 to add three-dimensional effects to fonts (with code)

Teach you how to use css3 to add three-dimensional effects to fonts (with code)

奋力向前Original: 2021-08-30 16:39:515192browse

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

Teach you how to use css3 to add three-dimensional effects to fonts (with code)

1. Create a new html File, first write the div tag and enter the contenteditable attribute to specify whether the user is allowed to edit the content. It can support IE and eliminates compatibility issues. <div contenteditable="true">You can edit the content inside<code>

, and class is the class selector, which can be purely static Control font color in web pages.

html code example

<div contenteditable="true" class="text eff">字体特效</div>

2. By giving css global settings, write and use head to add <style between tags type="text/css"></style>String code and then enter the divgenerationbackground-color attribute in the style tag to set the background color of the element.

Code example

body{
  background-color: #456;
}

Code effect

Teach you how to use css3 to add three-dimensional effects to fonts (with code)

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 style tag.

Code example

.text {
    font-family:"微软雅黑", "Dosis", sans-serif;
    font-size: 80px;
    text-align: center;
    font-weight: bold;
    line-height:200px;
    text-transform:uppercase;
    position: relative;
}

Code effect

Teach you how to use css3 to add three-dimensional effects to fonts (with code)

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 style tag.

Use the 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.

Code example

.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);
}

Code effect

Teach you how to use css3 to add three-dimensional effects to fonts (with code)

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use css to create interesting text swing animation effectsNext article：Use css to create interesting text swing animation effects

See more

Teach you how to use css3 to add three-dimensional effects to fonts (with code)

Related articles