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];
} |
X indicates that the displacement on the x-axis can be negative, y indicates the displacement on the y-axis, can be negative, blur represents the width of the projection, cannot be negative, and 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 attribute 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 '
This article links http://www.cxybl.com/html/wyzz/CSS/20130902/40014.html
