Home / Articles / Programming languages / Markup languages / HTML & CSS / CSS3: pseudo 3D text using text-shadow property

CSS3: pseudo 3D text using text-shadow property

CSS3: pseudo 3D text using text-shadow property
 
CSS3: pseudo 3D text using text-shadow property
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


The following article demonstrates how a simple text-shadow CSS property with specified values can make an illusion of a 3D text.

Initially, text-shadow CSS property is used to attach one or more shadows to text. The property can accept a comma-separated list of shadows, each specified by 2 or 3 length values and an optional color.

Here is syntax:

text-shadow: h-shadow v-shadow blur color;

Where:

  • h-shadow - horizontal position of shadow (required);
  • v-shadow - vertical position of shadow (required);
  • blur - blur distance (optional);
  • color - color of shadow (optional).

Any text in HTML has two dimensions set by default. To add the third one, text-shadow CSS property can be used. Actually it doesn't add third dimension, but only an illusion of depth which makes the text look as if it has this third dimension.

The illusion of text depth is achieved by adding five shadows where each shadow moves away 1 pixel from the previous shadow position in the same direction starting from the edges of the characters. Also to each shadow the identical color must be set which should be a bit darker compared to the text color. That's it, that's the whole trick!

text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #CCCCCC, 0 3px 0 #CCCCCC, 0 4px 0 #CCCCCC, 0 5px 0 #CCCCCC;

Live demo

There are only two important things you need to known in order to change the appearance of the text:

  1. Direction of text depth. It can be changed by first two values (h-shadow, v-shadow) in text-shadow CSS property;
  2. Color of text depth. It can be changed by fourth value. Color must be the identical for all the shadows.

Let's change it a little bit! In the example above, direction of text depth was set by increasing the value for vertical position of the shadow, now we are also going to increase the value for horizontal position of the shadow.

text-shadow: 1px 1px 0 #CCCCCC, 2px 2px 0 #CCCCCC, 3px 3px 0 #CCCCCC, 4px 4px 0 #CCCCCC, 5px 5px 0 #CCCCCC;

Live demo


 

Read also

Discussion (total 6 comments)

bob marley
June 03, 2015 at 06:22 am
yer mon i found zis very helpful thank yee bless thy soul
Hugh Jass
June 03, 2015 at 06:29 am
Thanks a lot man, I found this very easy to understand.
Heimdonger
June 03, 2015 at 07:11 am
You know, having a huge donger is hard enough but thanks to the pseudo I can manage. Thanks.
Dr. Mundo
June 03, 2015 at 05:12 pm
mundo does as he pleases, mundo like this, mundo.
Yorick Mori
June 03, 2015 at 05:13 pm
answers like beneath the dirt.
Gnome Child
June 29, 2015 at 01:54 pm
dank

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation