How to add CSS Stroke to Web text. In CSS, the Stroke to Web Text property is utilized when we have to add strokes to the texts, and this property is also utilized to modify the width and the color of the text that text stroke is affected. This text-stroke property is normally maintained by using the WebKit prefix text stroke. This property is utilized for text-decoration like vector design utilization.
Read Also: What Is CSS?
| Working of CSS text-stroke Property to Web Text
As we know, In CSS there is a property that assists in text-decoration and stroking of web text and this is made by text-stroke property. This property, in the shift, presents a stenotype for the other two properties like text-stroke-color and text-stroke-width. This property is done in figuring strokes to the text and is only sustained by Webkit-based browsers with the use of –the WebKit prefix. Some browsers do not support this property can use the text-fill-color property which revokes the color property.
Read Also: What are CSS Controls?
This property is normally less adopted as it aligns the text to the center and there is no current alignment option in this property. And this property also modifies the shape of the stroke from that of the unique shape. Hence it is normally used with –WebKit- which can be made animated or more useable is text-shadow property. The text-stroke property can define both width and color at formerly where this can be shown in the under example that using –WebKit-prefix we can define both text-stroke-width and text-stroke-color attributes in a single property. This property has two shorthand properties like text-stroke-width and text-stroke-color attributes that can be done definitely each on one line.
Read Also: Adding Shadow Effect in CSS.
How to add CSS Stroke to Web text
-webkit-text-stroke: width value color value;
Example:
<h1>How to add CSS Stroke to Web text</h1>
<p>Example of Stroke property CSS</p>
<style>
p {
font-size: 2.5em;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke: 1px hotpink;
-webkit-text-fill-color: blue;
}
</style>Conclusion
In this article, we conclude that the CSS Stroke attribute property is done for adding the strokes to the texts like width and color. This attribute gives two stenotype assets like text-stroke-width which provides the width or density of the text and text-stroke-color provides the color of the text using color names or color HEX values. These attributes are utilized using the –WebKit- prefix as this attribute is not continued by all browsers. So in order to maintain this quality in all browsers, we have to use a text-fill-color property that supports all the WebKit-based browsers.
Have a Nice Day.