CSS give us a cool way to make text more “pop” in the browser rather than pure HTML.

A syntax of a text-shadow is:

text-shadow: 2px 2px 2px #000

In this line, I’ll explain the syntax of the code.

There are three “2px” and a color name after the colon.

The 1st “2px” means the shadow is located on the right of the text and the distance is 2px. If you want to move it to the left, try out “-2px”

Example of 2px and -2px:

1st 2px 1st -2px

The color of the text is maroon, the shadow is black, you can see the exact position of the shadow when I use different parameters.

The following “2px” means nearly the same as the 1st one, but vertically instead of horizontally. It means when you use 2px, the shadow will be laid 2px lower from the main text, the distance will be 2px. If you want to make the shadow go up, just use the sign “-“: “-2px” and the shadow will jump up. This is quite easy to try so I pause the example.

The last “2px” mean the “blur level” of the text, this is hard to explain: the blur radial, so try yourselves. I just give a notive that if you leave it 0px, the shadow will be look exacly the same form as the main text.

The final attribute: color. Easy to understand, it’s the color of the shadow, not like Photoshop (which the color can be adjust the opacity, blending mode …), color of shadow in CSS is only normal as blend mode and 100% as opacity.

Use it wisely, you can make your post looks lively. But don’t get abused.

There’re many ways to use the text-shadow, you can find out yourselves, I just hint you that: popping, neon glow, grave text. Each style can only be used effectively of particular background, so be careful!

Some tips you should know:

-IE8 and newer version don’t support text-shadow.
-To leave a comment in your CSS code, put the comment between /* and */
-I’ll translate this post into VN since I can’t find any sites who teach Vietnamese CSS.


Reply in English if you want

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: