CSS Stencil Effect - GeeksforGeeks

01 Jul, 2020
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.
html
<!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.
CSS
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.
HTML
<!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: 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?