CSS3 Shadows
Mastering CSS3 – Part 10
Forward: In this part of the series, we see how to give shadows to text and elements.
By: Chrysanthus Date Published: 25 Jul 2012
Introduction
Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.
Text Shadow
To give shadow to text, you need the text-shadow property. The text-property can take from two to four values separate by spaces.
Horizontal Offset
The first value is a number in pixels, and it gives the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box; a negative value to the left.
Vertical Offset
The first value is a number in pixels, and it gives the vertical offset of the shadow. A positive value offsets the shadow down; a negative one up. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Shadow</title>
</head>
<body>
<h1 style="text-shadow:5px 5px; color:red">The Main Heading</h1>
</body>
<html>
The shadow of this code has three values, which are the shadow horizontal offset, the shadow vertical offset and the shadow color.
I tried this code and I did not like the shadow at my browser. In my browser the color of the text was red as expected, but the color of the shadow was still the same, red. If you do not give any color for the shadow, the browser chooses one for you. You probably do not like the display of the above code at your browser.
The above shadow has a sharp edge as you move away from the text. You can give a value with which the shadow blurs away, removing the sharpness. This value is in pixel and it is called the blur radius. The greater the value, the more the edge is blurred. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Shadow</title>
</head>
<body>
<h1 style="text-shadow:5px 5px 3px; color:red">The Main Heading</h1>
</body>
<html>
The color
There is actually another value that can be given before the color, but I will ignore it. You can give the color by colorname or by decimal RGB code or by decimal RGBA code, which includes transparency (opacity). I prefer the decimal RGBA code. Read and try the following:
<!DOCTYPE HTML>
<html>
<head>
<title>Shadow</title>
</head>
<body>
<h1 style="text-shadow:5px 5px 3px rgba(0,0,0,0.5); color:red">The Main Heading</h1>
</body>
<html>
So, these four values separated by spaces, will do, to give your text a good shadow.
Element Shadow
An element such as the figure element or the div element or the paragraph element can have a shadow. In theory, any containing element can have a shadow. I will use the figure element for illustration. You give shadow to an element just as you do to text. However, here, you need the box-shadow property instead of the text-shadow property. The values used for the text-shadow property are used in the same way for the box-shadow property. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Shadow</title>
</head>
<body>
<figure style= " box-shadow:10px 10px 3px rgba(0,0,0,0.4); width:144px; height:144px; background-color:orange; border:6px solid blue"></figure>
</body>
<html>
The default shadow for an element goes outside the element box. You can have a shadow inside the box instead. For this, you include the “inset” value. You type the inset value in front of the other values; all values being separated by space. Read and try the following code and not the use of the inset value;
<!DOCTYPE HTML>
<html>
<head>
<title>Shadow</title>
</head>
<body>
<figure style= " box-shadow:inset 10px 10px 3px rgba(0,0,0,0.4); width:144px; height:144px; background-color:orange; border:6px solid blue"></figure>
</body>
<html>
That is it. It is up to you now to decide what to do with shadows. At the end of this series, I will give you a guide on how to use CSS. Rendezvous in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT