CSS text-shadow Property
- Introduction to CSS text-shadow property
- The syntax of CSS text-shadow property
- Example of CSS text-shadow property
Introduction to CSS text-shadow Property
CSS provides you the ability to display the shadow of the text. By displaying a shadow of any text, you can make it even more attractive.
So far this popular feature was only available in some word processors such as MS Word, Powerpoint, and excel, etc. Text-shadow property has been introduced in CSS3 to implement this feature in webpages.
With this property, you can also create more than one shadows of a text. For this, you can rewrite the values by separating from the comma.
You can use this property to display the heading of the website or any other important note.
Syntax of CSS text-shadow Property
The general syntax of the text-shadow property has been given below.
text-shadow: horizontal-shadow vertical-shadow blur color;
As you can see in the above syntax, four values are defined for the text-shadow property. These are described below.
- horizontal-shadow - This value defines how the shadow will be horizontally displayed. This value is a pixel number which shows how much it will look in the right or left. When this value is defined in positive then the shadow will be on the right side. When this value is defined in negative then it will be on the left side. When this value is increased or decreased, the shadow grows in the same left and right.
- vertical-shadow - This value defines how the shadow will be vertically displayed. This value is a pixel number which tells how far it will appear in the top or bottom. When this value is defined negative, it is displayed in the top and if the value is positive then it is shown in the bottom. When this value is increased or decreased, then the shadow increases towards the top and bottom.
- blur – This value is the pixel number that shows how much shadow will be a blur.
- color – This value is for color, you can define it by name or as a hex value.
To define more than one shadow of a text, you can define all of these values separated by a comma and re-define for another shadow.
Example of CSS text-shadow Property
A simple example of the text-shadow property has been given below.
<!DOCTYPE html>
<html>
<head>
<title> CSS text-shadow property example </title>
<style>
h1
{
text-shadow: 5px 5px 5px red;
color: green;
font-size: 5em;
}
</style>
</head>
<body>
<h1> My Blog Help</h1>
<style>
h1
{
text-shadow: 5px 5px 5px red;
color: green;
font-size: 5em;
}
</style>
</head>
<body>
<h1> My Blog Help</h1>
</body>
</html>
The above example will produce the below output.
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.