The Stencil effect is a classical text effect that has emerged in the last decade. This type of effect is generally used in websites where the User Interface is not of main concern. Examples of such designs can be found on movie downloading websites where the interface is not the best looking as the main concern is on the working of the website. The developer of the website may not want to waste resources in designing and building a good looking website.
Approach: The approach is to use the webkit-stroke CSS properties to create a stroke/outline around the text.
HTML Section: In this section, the text that has to be styled is declared. The text is declared in a heading tag for this example.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<title>
Stencil Effect
</title>
</head>
<body>
<h1>Geeks</h1>
</body>
</html>
|
CSS Section: Follow the steps for making the required stencil effect:
- Step 1: Apply basic styling to the text like font-size, family or color as needed. The text can also be transformed to uppercase for better visibility.
- Step 2: Use the -webkit-text-fill-color property to make the text transparent. This can be done by setting the property to “transparent”.
- Step 3: Use the -webkit-text-stroke-width property to set the width of the stroke or outline of the text. This property can be set to the required value with a suitable unit.
Tip: It is recommended to keep the width as low as possible to make the text look more pleasing to the eye.
h1 {
font-family: sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 6em;
color: black;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
} |
Complete Code: It is the combination of the above two sections of code.
<!DOCTYPE html> <html lang="en">
<head>
<title>Stencil Effect</title>
<style>
h1 {
/* Apply basic styling to
the text */
font-family: sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 6em;
color: black;
/* Make the text fill
transparent */
-webkit-text-fill-color: transparent;
/* Set the stroke width
of the text */
-webkit-text-stroke-width: 2px;
}
</style>
</head>
<body>
<!-- Define the text
to be styled -->
<h1>Geeks</h1>
</body>
</html>
|
Output: