How to use CSS3 to make 3D text effects

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 '