What is CSS Text-Shadow?
Cascading style sheets are used for styling an html page. This counts all the elements that an HTML page can possibly contain. Text styling is a very prominent feature within CSS. It is very important that there are uniformity and synchronization in the styling of the text content on a page with other elements like images, links, buttons, etc. With the use of CSS, we can assure that the text on the page is in sync. CSS offers many text features like text color, letter spacing, text size, line height, text direction. One such property is Text-shadow. By using this feature, we can project the text along with a shadow, to highlight the text. This will give a desirable outlining of the text that we want to be highlighted. This article will discuss in details about this special feature. In this topic, we are going to learn about CSS for Text-Shadow.
Text-Shadow syntax and how it works in CSS?
Text-shadow can be used in inline CSS, internal CSS or External CSS. The syntax for text-shadow is:
text-shadow: horizontal-shadow vertical-shadow blur-radius color/none/ inherit/initial;Here, horizontal-shadow, vertical-shadow, blur-radius are mandatory parameters, while color is an optional parameter.
- None, initial and inherit are global values where none specifies that there is no text-shadow, inherit instructs the element to take the parameters set for the parent element and initial will make sure that the property is reverted back to its default value.
- Horizontal and vertical shadows are numerical parameters that decide the distance of the shadow from the text.
- Horizontal shadow specifies the horizontal distance of the shadow from the text, i.e. left or right direction. If the value is positive, the shadow will be in the right direction, if negative, the shadow will be in the left direction.
- Vertical Shadow specifies the vertical distance, i.e. above or below. If the value is positive, the shadow will be below the text, while if it is negative, the shadow will be placed above the text.
- Blur-radius is also a numerical parameter, which must be specified or else, its default value is taken as 0. This parameter decides, how blurry (light or wide) must the shadow be. The higher the value, the wider the shadow.
- As the name goes, color is the feature that decides the color of the shadow. This is an optional parameter.
Examples of CSS for Text-Shadow
Let’s discuss the feature through some examples for better clarity:
1. Basic Text-shadow Using Inline CSS
- Create an html page. Include the basic tags required to create the page, such as, <html />, <head /> and <body>.
- Within, body tag, define any textual element and using inline styling, defines its text-shadow parameters. For this example, we have styled <h1> as follows:
<h1 style="text-shadow: 1px 2px 4px #00EE00;">Testing Text-shadow Property</h1>- So the entire html code should be in somewhat the below-defined structure:
<html>
<head>
<title>Text-Shadow property</title>
</head>
<body>
<h1 style="text-shadow: 1px 2px 4px #00EE00;">Testing Text-shadow Property</h1>
</body>
</html>- Save the page, and open the saved .html file through a browser. The output text will have a green-colored shadow, as in the screenshot:
2. Text-shadow using External Style Sheet
- For this example, we are taking up the External CSS approach. We will first create a CSS file and then call its features in our html page. So, as the first step, we will create a css file, namely, textProp.css
- Next, we will style paragraph tag i.e. p and define various properties for it, as below:
p{
text-align: center;
text-shadow: 2px 2px 4px blueviolet;
font-size: 20px;
font-family: 'Courier New', Courier, monospace;
background-color: rgb(230, 217, 217);
}- We will also define a class called “yellow-text”. We will be able to call this class in various elements of our html page. The class must be coded as below:
.yellow-text{
text-align: center;
text-shadow: 4px -1px 4px green;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
color: yellow;
}- Combining these to pieces of code, the final CSS sheet should be:
p{
text-align: center;
text-shadow: 4px 2px 4px blueviolet;
font-size: 20px;
font-family: 'Courier New', Courier, monospace;
background-color: rgb(230, 217, 217);
}
.yellow-text{
text-align: center;
text-shadow: 4px -1px 4px green;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
color: yellow;
}- Now we will create an html page, call the style sheet and make use of the styles we have defined. To test all the properties that have been defined, the html code can be similar to the one as defined below:
<html>
<head>
<title>Text-Shadow property</title>
<link rel = "stylesheet" href = "textProp.css">
</head>
<body>
<h1 class="yellow-text">Testing Text-shadow Property</h1>
<p>This is testing for the styling set for paragraph tag. This is External method of using CSS </p>
<p class="yellow-text">Test 2 for p and yellow text</p>
</body>
</html>- For the experimentation purpose, there is a call for the text-yellow class within a p tag. There can be more combinations made and tested for research.
- The final page or output of the html code should be as below:
3. Creating Multiple Shadows
- There can be more than one shadow for a particular text. We just need to add another set of the parameter in the same definition, separated by a comma, like this:
text-shadow: 4px 2px 4px blueviolet, -4px -2px 4px red;- Similar to the last example, we will create an external CSS file, where we will define multiple shadows for all text with <p> tags. We can add some styling for the heading element <h1>. The CSS file should be similar to the example below:
p{
text-align: center;
text-shadow: 4px 2px 4px blueviolet, -4px -2px 4px red;
font-size: 20px;
font-family: 'Courier New', Courier, monospace;
background-color: rgb(230, 217, 217);
margin: 100px;
}
h1{
text-align: center;
font-family: 'Courier New', Courier, monospace;
color: purple;
text-shadow: 4px 4px 4px violet;
}- We will create an html page, call the style sheet and use the elements, for which we have defined the style in the CSS file. The html code should look like this:
<html>
<head>
<title>Text-Shadow property</title>
<link rel = "stylesheet" href = "textProp.css">
</head>
<body>
<h1>Testing Multiplle Text-Shadows</h1>
<p>This is test for multiple shadows for text in paragraph element. There are two colors of shadows. One is violet and one is red.</p>
</body>- The output of this file should look like this:
So, we discussed the uses of text-shadow property offered by CSS for styling texts in our html pages. There are many other ways, where one can experiment with text-shadow. It will be of prominent use for highlighting some important text.
Recommended Articles
This is a guide to CSS for Text-Shadow. Here we discuss the basic concept, how Text Shadow works in CSS along with the appropriate examples. You may also have a look at the following articles to learn more –
