we.type | YS_text

<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
|                                                                 |
|                Filename : YS_text_shadow.html                   |
|                   Label : Basics                                |
|                  Author : Yevheniia Shyrchenko                  |
|                    Size : 2.545 bytes (4 KB on disk)            |
|                 Created : 23. February 2024 at 10:32            |
|                                                                 |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>text-shadow</title>

  <style>
    @font-face {
      font-family: Konsole;
      src: url(../_fonts/Konsolev1.1-VF.ttf);
    }

    body {
      font-family: Konsole;
      font-size: 6vh;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      height: 100vh;
    }

    .class-1 {
      /* defines a basic shadow; horizontal offset, vertical offset, blur radius, color with alpha transparency */
      text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);
    }

    .class-2 {
      /* defines no text-shadow */
      text-shadow: none;
    }

    .class-3 {
      /* defines first shadow; horizontal offset, vertical offset, blur radius, color with alpha transparency */
      /* defines second shadow; horizontal offset, vertical offset, blur radius, color with alpha transparency */
      text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(0, 0, 0, 0.5);
    }

    .class-4 {
      /* defines a vertical shadow; horizontal offset, vertical offset, blur radius, color with alpha transparency */
      text-shadow: 0 8px 6px rgba(0, 0, 0, 0.5);
    }

    .class-5 {
      /* defines a horizontal shadow; horizontal offset, vertical offset, blur radius, color with alpha transparency */
      text-shadow: 8px 0 6px rgba(0, 0, 0, 0.5);
    }
  </style>
</head>

<body>
  <div>
    <p class="class-1">basic text shadow
    <p class="class-2">no shadow </p>
    <p class="class-3">multiple shadows </p>
    <p class="class-4">vertical shadow </p>
    <p class="class-5">horizontal shadow</p>
  </div>
</body>
</html>