Easy CSS 3D Text Effect
By Stephen Bucaro
You can easily turn your text to 3D by using the CSS text-shadow property. The trick is to define
multiple shadows that are each offset by one pixel. Shown below is the syntax for the text-shadow property.
text-shadow: horizontal-offset vertical-offset blur-radius color;
The first two values after the property name are the offset. The blur-radius property, the area where
the shadow becomes wider and lighter. The last property is the color of the shadow. Shown below is an
example style class.
1px 1px 0 rgb(255,148,148),
2px 2px 0 rgb(255,148,148),
3px 3px 0 rgb(255,148,148),
4px 4px 0 rgb(255,148,148),
5px 5px 0 rgb(255,148,148),
6px 6px 0 rgb(255,134,134),
7px 7px 6px rgba(0,0,0,.8),
7px 7px 1px rgba(0,0,0,.4),
7px 7px 6px rgba(0,0,0,.2);
Note that in the first six shadows, the blur-radius property is set to 0. This causes the sides of the 3d
text to look solid. After defining the sides, I have added three more shadows that have their blur-radius
property set to non-zero values. This gives the 3d text an actual shadow.
You can control the appearance of your 3d text by adjusting the color values form each shadow layer. In
case you're not familiar with the rgb method to specify color, you must provide three comma separated values
within the brackets. The values specify the amount of blue, green, and red used to create the color. A scale
of 0 to 255 is used, 0 being no color used to 255 being the maximum amount of color.
For the three actual shadows, I used the rgba method to specify color. The rgba method works the same
as the rgb method except the fourth value within the brackets is the transparency, also called the
alpha. The alpha is specified on a scale of 0.0 to 1.0, 0.0 being completely transparent and 1.0
being completely opaque.
Lastly, apply the style class to an html span element containing the text "3D".
You can give high-visibility to specific text on your webpage by giving it a 3d effect. Using the CSS
text-shadow property You can easily turn your text to 3D.
More Easy Cascading Style Sheets:
• How to Overlay Text on an Image
• Create a No Image Rollover Button or Badge
• Add Style to Your Blockquotes
• CSS Arts and Crafts - Create a Graphic Cube Using the CSS3 Transform Property
• Add Drop Shadows to Your Pictures
• Basic Introduction to Simple Responsive Design With Code
• Make a Fixed-width Variable-height Round Cornered Box
• How to Use a Starburst on Your Web Page
• Create a Cool Picture Frame Effect with CSS
• How to Make Images Responsive