Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the Outline Effect to Text?
Sometimes, we require to show only the text's outline and remove the text's fill. We can also say it is the outline effect.
We can use various CSS properties to generate an outline effect for the text. For example, we can add a border to the text and remove the fill colour of the text to add an outline effect to the text.
Here, we have three different approaches to showing text with outline effects using HTML and CSS.
Using the Various CSS Properties
In this approach, we will use the three CSS properties to add an outline effect to the text. The first is ‘-webkit-text-fill-color’ to change the fill color of the text same as the background color. The second is ‘-webkit-text-stroke-width’ to add the stroke width for the text, and the third CSS property is ‘-webkit-text-stroke-color’ to add the outline color to the text.
Syntax
Users can follow the syntax below to use three different CSS properties to add an outline effect to the text.
-webkit-text-fill-color: color; -webkit-text-stroke-width: size; -webkit-text-stroke-color: color;
In the above syntax, we set the fill color for the text, stroke width, and stroke means outline color.
Example 1
In the example below, we have a div element with the class name ‘text1’ containing some texts. We have set the font size for the text in CSS. Furthermore, to add an outline effect to the text, we have set the white fill color for the text, ‘1px’ stroke width, and ‘blue’ stroke color to show blue outlines.
In the output, users can observe the text with blue outlines.
<html>
<head>
<style>
.text1 {
font-size: 50px;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: blue;
}
</style>
</head>
<body>
<h2>Using the <i> different CSS properties </i> to add outline effect on the text.</h2>
<div class = "text1">This text has a default background.</div>
</body>
</html>
Example 2
In the example below, we have set the red background for the div element. Next, we have used ‘red’ as a fill color to make the fill color the same as the background. Here, the stroke width is ‘1.2px’, and the stroke color is ‘yellow’.
In the output, users can observe the text with a yellow outline on a red background.
<html>
<head>
<style>
.text {
font-size: 50px;
width: 600px;
height: auto;
background-color: red;
-webkit-text-fill-color: red;
-webkit-text-stroke-width: 1.2px;
-webkit-text-stroke-color: yellow;
}
</style>
</head>
<body>
<h2>Using the <i> different CSS properties </i> to add outline effect on the text</h2>
<div class = "text"> This text has a red background. </div>
</body>
</html>
Using the ‘Text-shadow’ CSS Property
In this approach, we will use the ‘text-shadow’ CSS property to generate an outline effect for the text. We can generate an outline effect if we hide the text by setting up the same text color as a background color and showing only text shadow.
Syntax
Users can follow the syntax below to use the ‘text-shadow’ CSS property to add an outline effect to the text.
text-shadow: x-offset y-offset blur color;
The ‘text-shadow’ property takes 4 different values to set the shadow. First is x-offset, second is y-offset, third is blur value, and fourth is a shadow color.
Example 3
In the example below, the div element contains the text. In CSS, we set the background color and font color the same. After that, we used the ‘text-shadow’ CSS property to add an outline effect. Here, we have used 4-pairs of 4 values as a value of the ‘text-shadow’. The first pair is for the right shadows, the second for the down shadow, the third for the left, and the last for the up.
In actuality, it shows the text-shadow rather than the stroke, generating the outline effect.
<html>
<head>
<style>
.text {
color: rgb(117, 117, 235);
font-size: 50px;
background-color: rgb(117, 117, 235);
text-shadow: -1px -1px 2px red, 1px -1px 2px red, -1px 1px 2px red, 1px 1px 2px red;
}
</style>
</head>
<body>
<h2>Using the <i> text-shadow CSS property </i> to add outline effect on the text</h2>
<div class = "text"> Welcome to the TutorialsPoint! </div>
</body>
</html>
Add the text inside the <SVG> tag and apply a stroke to the text
Here, we will convert the text to an SVG image. After that, we will set the stroke color, fill color, stroke width, etc., using various CSS properties to add an outline effect to the text.
Syntax
Users can follow the syntax below to add an outline effect to the text by converting the text to SVG.
paint-order: stroke; fill: color; stroke: color;
In the above syntax, we set the fill color for the text. Also, we set the stroke color for the text. The ‘paint-order: stroke’ CSS property allows us to overlap the fill color by stroke whenever they intersect with each other.
Example 4
In the example below, we have used the <Svg> HTML tag to create an HTML element and <text> HTML tag to add text inside the SVG. In CSS, we have set the ‘stroke-width’ to 3px to show the outline of 3px and ‘stroke-linejoin’ to round so whenever any two lines join, they join in a round shape. Furthermore, we have used ‘fill: white’ to set the text color the same as the background color, and ‘stroke’ to brown to show the text with a brown outline.
<html>
<head>
<style>
svg {
font-size: 35px;
width: 490px;
height: 100;
}
.text {
stroke-width: 3px;
stroke-linejoin: round;
paint-order: stroke;
fill: white;
stroke: brown;
}
</style>
</head>
<body>
<h2>Using the <i> SVG text </i> to add outline effect on the text</h2>
<svg viewBox = "0 0 490 100">
<text class = "text" x = "10" y = "45"> This text is in the svg element </text>
</svg>
</body>
</html>
We have seen three approaches to adding an outline effect to the text. The first approach uses the three different CSS properties to change the fill color of the text and set the stroke for the text.
The second approach shows the ‘text-shadow’ rather than showing the text. The third approach converts text to SVG and uses the various CSS properties related to SVG to add an outline effect to the text.
180 Views
