Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Text-shadow in CSS 3

In this quick tip I’ll show another property of CSS3, the text-shadow, used to create shadows in the texts.

In this article I'll show you how to work with text-shadows in CSS 3.

This is a very simple feature that was incorporated into the css 3, and it is very good to add it in the text.

Text-shadow

The text-shadow property is responsible for adding a shadow to text through the CSS3. As we can see in Listing 1, the statement is very simple. In our example we will give a black shadow to a <h1> in gray.

Let's create an HTML document and add a <h1>. In this <h1> will be applied the text-shadow effect:

Listing 1 : Applying Text-shadow

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Applying Text-shadow</title>
<style type="text/css">
h1{
	text-shadow: #000 2px 3px 2px;
	}
</style>
</head>
<body>
<h1>text-shadow</h1>
</body>
</html>

With this effect, our example will look like this:

text-shadow

In our example, #000 is the shadow color, the first value (2px) is the horizontal distance of the shadow relative to the element, the second value (3px) is the vertical distance of the shadow relative to the element and, the third value (2px ) is the radius of the shadow (blur effect).

As in any other statement in CSS, we can use any unit of measure to define the distance and radius of the shadow, not just pixels, allowing the developers choose your needs.

See you in the next article

Ricardo Arrigoni - Front-end Developer and SEO Analyst



Front-end developer, WebEditor of MrBool.com and SEO Analyst. Work in the development area for over 4 years. For freelance work visit my portfolio: www.ricardoarrigoni.com.br

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login