30-seconds-of-code/etched-text.md at a564514b74825ccbcae840f04ffd3fbf16acf6e6

Files

atomiks a564514b74 Update and run prettier

2018-10-05 09:23:16 +10:00

Creates an effect where text appears to be "etched" or engraved into the background.

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

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

text-shadow: 0 2px white creates a white shadow offset 0px horizontally and 2px vertically from the origin position.

The background must be darker than the shadow for the effect to work.

The text color should be slightly faded to make it look like it's engraved/carved out of the background.

✅ No caveats.