How to use CSS3 to make 3D text effects

Source: Internet
Author: User

The following tutorial is to teach you how to use CSS3 to produce 3D effect text, the article translates from 3D CSS Shadow text Tutorial.

This simple CSS text Shadow tutorial will teach you step-by-step how to create 3D text by stacking layers of shading, and then further utilize the CSS3 transform and Transition properties to enable the mouse to move through font magnification. Note that this 3D text effect is pure CSS, does not use JavaScript, and needs to support CSS3 browsers to see the effect, such as Firefox, Chrome, Safari and opera.

How the CSS text shadow is implemented

In order to achieve the 3D text effect, we will take advantage of the CSS3 Text-shadow properties, Text-shadow works as follows:

1
2
3
4
. example-class
{
Text-shadow: [X offset] [Y offset] [Blur size] [colour];
}

The Translator Note: X indicates that the displacement on the x-axis can be negative; Y indicates the displacement on the y-axis, which can be negative; Blur represents the width of the projection and cannot be negative; Color is the shadow of the projection.

Stacking multi-tier CSS Projections

Although we do not need to stack multiple layers of projection, there is a better 3D effect by stacking multiple layers of projections

Start creating 3D Text

You may choose a darker color than the text to be the color of the projection, so in this example I use the white text, a darker gray as the projection color, in this example I will H2 text rendering 3D effect, CSS code as follows:

1
2
3
4
5
6
7
8
9
10
H2
{
Text-shadow:
1px
1px 0
#CCC,
2px
2px 0
#CCC,/* End of the 2 level deep grey shadow * *
3px
3PX 0
#444,
4px
4PX 0
#444,
5px
5px 0
#444,
6px
6PX 0
#444; /* End of the 4 level deep dark shadow * *
}

The effect is as follows:

OK, here you have created the basic 3D text, however, let us further to achieve the mouse sliding text amplification effect, and CSS transision properties to achieve a smooth fade effect.

First, use the Transform property to achieve a sliding font magnification

1
2
3
4
5
6
7
H2:hover
{
/* CSS3 Transform Effect * *
-webkit-transform:scale (1.2);
* Safari & Chrome * *
-moz-transform:scale (1.2);
* * Firefox *
-o-transform:scale (1.2);
/* Opera * *
}

The effect is as follows: and then using the Transition property to achieve fade effect

1
2
3
4
5
6
7
H2
{
/* CSS3 Transition Effect * *
-webkit-transition:
All 0.12s ease-out;
* Safari & Chrome * *
-moz-transition:
All 0.12s ease-out;
* * Firefox *
-o-transition:
All 0.12s ease-out;
/* Opera * *
}

To this, we use CSS3 to achieve the text of the 3D effect, and in the mouse is to let the font magnification, and fade in the effect, all of this is done with a pure css oh.

Here is a demo of this example, together to see

3D CSS TEXT

With ' ZOOM '

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.