LabEx
Log InJoin Free

Crafting Etched Text Effects with CSS

Beginner

This tutorial is from open-source community. Access the source code

Introduction

In this lab, we will be learning how to create an "etched" or engraved text effect using CSS. This effect can add a unique and stylish touch to your web designs, and it's surprisingly easy to achieve. By adjusting the shadow, background, and text color, we can create the illusion of text being carved into the background. Join us as we explore this fun and creative technique!

This is a Guided Lab, which provides step-by-step instructions to help you learn and practice. Follow the instructions carefully to complete each step and gain hands-on experience. Historical data shows that this is a beginner level lab with a 100% completion rate. It has received a 92% positive review rate from learners.

Etched Text

index.html and style.css have already been provided in the VM.

To create an "etched" or engraved effect for text on a background, use the following CSS properties:

.etched-text {
  text-shadow: 0 2px white;
  font-size: 1.5rem;
  font-weight: bold;
  color: #b8bec5;
}

The text-shadow property creates a white shadow offset 0px horizontally and 2px vertically from the origin position. Make sure that the background is darker than the shadow for the effect to work. Additionally, the text color should be slightly faded to make it look like it's been carved out of the background. Finally, apply the etched-text class to the desired HTML element, such as a paragraph, to achieve the effect.

<p class="etched-text">I appear etched into the background.</p>

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Etched Text lab. You can practice more labs in LabEx to improve your skills.