Introduction to CSS text-stroke
In CSS, text-stroke is property that is used when we have to add strokes to the texts and this property is also used to change the width and the color of the text that text-stroke is applied. This text-stroke property is usually supported by using webkit prefix text-stroke. This property is used for text-decoration like vector drawing applications.
Working of CSS text-stroke Property
In CSS there is a property that helps in text-decoration and stroking of text and this is done by text-stroke property. This property, in turn, provides a shorthand for the other two properties like text-stroke-width and text-stroke-color. This property is used in adding strokes to the text and is only supported by webkit based browsers with the use of –webkit-prefix. Few browsers don’t support this property can use text-fill-color property which overrides the color property.
This property is usually less used as it aligns the text to the center and there is no current alignment option in this property. And this property also alters the shape of the stroke from that of the original shape. Hence it is usually used with –webkit- which is animatable or more useable is text-shadow property. The text-stroke property can specify both width and color at once where this can be shown in the below example that using –webkit-prefix we can specify both text-stroke-width and text-stroke-color properties in a single property. This property has two shorthand properties like text-stroke-width and text-stroke-color properties which can be used separately each on one line.
Syntax:
-webkit-text-stroke: width value color value;Example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba Training</title>
<style>
p {
font-size: 2em;
-webkit-text-stroke: 1px #1c57c9;
}
</style>
</head>
<body>
<h2>CSS Text-stroke property</h2>
<p>This is an example of text-stroke property</p>
</body>
</html>Output:
In the above program, we have used text-stroke property which specified the font size and color in a single property and we can see the output. The sentence in a paragraph is applied to the text-stroke property.
Two Shorthand Properties of text-stroke are as follows
As this property is only supported by –webkit- prefix we can see below examples using webkit prefix.
1. Text-stroke-width
This property as the name itself suggests it gives the thickness of the stroke to be displayed and it takes unit value. This property is used when we want to specify the thickness or font size of the sentence or characters in the element layout. This property can be used with text-stroke-color or it can be used alone. There is no need for this sub-property when the text-stroke property can be used alone to specify width and color both at once. This property is also executed with the support of –webkit- prefix.
Example:
Now let us see the example of how to use text-stoke-width.
Syntax:
text-stroke-width: values in pixel;Code:
<!DOCTYPE html>
<html>
<head>
<title>
Educba Training
</title>
<style>
p {
-webkit-text-stroke-width: 1px;
}
</style>
</head>
<body>
<p >CSS text-stroke-width property</p>
</body>
</html>Output:
In the above program, we see that we are printing the text in the paragraph with a width of 1 px. This program displays the output showing the text inside the paragraph which we have applied CSS property using –webkit- prefix like –webkit-text-stroke-width along with the value as 1px to display the text.
2. Text-stroke-color
This is one of the shorthand property of the CSS text-stroke property which is used for specifying the particular color to the text to which this property is applied. This property can also be used alone to specify the color only of the text you want. This property is also combined with the width of the letters or sentences. There is no need for this property to be displayed alone which be specified in the text-stroke property itself. This property also is supported with –webkit- prefix like the above property.
Example:
Now let us see the example of how –webkit-text –stroke-color is used to display the color of the text. This can use either color names directly or can use the color values using the “#” symbol at the start of the color value.
Syntax:
-webki-text-stroke-color: color name or color value;Code:
<!DOCTYPE html>
<html>
<head>
<title>
Educba Training
</title>
<style>
p {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: purple;
}
</style>
</head>
<body>
<p >CSS text-stroke-color example </p>
</body>
</html>Output:
In the above program, we can see that we have used –webkit-text-stroke-color property in this we have specified the value as “purple” where this will display the text in the paragraph in purple color. We can also use color values also instead of color names where we can use them using the “#” symbol at the starting of the value such as for black color the value is #000000 and for white color the value is #ffffff.
We saw that this text-stroke property is not supported by all the browsers so we can use the text-fill-color property to be used as this supports all the webkit based browsers. This also can be shown as below using –webkit- prefix.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba Training</title>
<style>
p {
font-size: 2.5em;
-webkit-text-stroke: 3px #1c87c9;
-webkit-text-fill-color: blue;
}
</style>
</head>
<body>
<h2>CSS Text-stroke property </h2>
<p>This is an example of text-fill-color property.</p>
</body>
</html>Output:
Conclusion
In this article, we conclude that the CSS property text-stroke property is used for adding the strokes to the texts like width and color. This property provides two shorthand properties like text-stroke-width which provides the width or thickness of the text and text-stroke-color provides the color of the text using color names or color values. These all properties are used using the –webkit- prefix as this property is not supported by all browsers. So in order to support this property in all browsers, we have to use a text-fill-color property that supports all the webkit based browsers.
Recommended Articles
This is a guide to CSS text-stroke. Here we discuss the introduction to CSS text-stroke and working of text-stroke property. You may also have a look at the following articles to learn more –
