Example of texts that change their shadow color on selection with the text-shadow property for the ::selection pseudo-element | CSS Snippets

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      /* before selection */
      .shadow2 {
        text-shadow: 1px 1px 1px;
      }
      .shadow3 {
        text-shadow: 1px 2px 4px #000;
      }
      .shadow4 {
        text-shadow: 1px 2px 4px;
      }
      /* after selection */
      .shadow1::-moz-selection {
        text-shadow: 1px 1px 1px;
        background-color: transparent;
      }
      .shadow1::selection {
        text-shadow: 1px 1px 1px;
        background-color: transparent;
      }
      #shadow2::-moz-selection {
        text-shadow: none;
        background: #fffae6;
      }
      .shadow2::selection {
        text-shadow: none;
        background: #fffae6;
      }
      .shadow3::-moz-selection {
        text-shadow: 1px 1px 2px #222;
      }
      .shadow3::selection {
        text-shadow: 1px 1px 2px #222;
      }
      .shadow4::-moz-selection {
        text-shadow: 1px 2px 4px #208A28;
        background-color: transparent;
        color: #208A28;
      }
      .shadow4::selection {
        text-shadow: 1px 2px 4px #208A28;
        background-color: transparent;
        color: #208A28;
      }
    </style>
  </head>
  <body>
    <p class="shadow1">Select this text to get the text shadow.</p>
    <p class="shadow2">Select this text to remove the text shadow.</p>
    <p class="shadow3">Select this text to make the text clearer.</p>
    <p class="shadow4">Select this text to change color of text shadow.</p>
  </body>
</html>