Example where jQuery is used to get triple effect|CSS Snippets|W3Docs

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <style>
      .halfStyle {
        /* base char and also the right 1/3 */
        position: relative;
        display: inline-block;
        font-size: 80px;/* or any font size will work */
        color: transparent;/* hide the base character */
        overflow: hidden;
        white-space: pre;/* to preserve the spaces from collapsing */
        color: #1c87c9;/* for demo purposes */
        text-shadow: 2px 2px 0px #eee;/* for demo purposes */
      }
      
      .halfStyle:before {
        /* creates the left 1/3 */
        display: block;
        z-index: 2;
        position: absolute;
        top: 0;
        width: 33.33%;
        content: attr(data-content);/* dynamic content for the pseudo element */
        overflow: hidden;
        pointer-events: none;/* so the base char is selectable by mouse */
        color: #8ebf42;/* for demo purposes */
        text-shadow: 2px -2px 0px #eee;/* for demo purposes */
      }
      
      .halfStyle:after {
        /* creates the middle 1/3 */
        display: block;
        z-index: 1;
        position: absolute;
        top: 0;
        width: 66.66%;
        content: attr(data-content);/* dynamic content for the pseudo element */
        overflow: hidden;
        pointer-events: none;/* so the base char is selectable by mouse */
        color: #666;/* for demo purposes */
        text-shadow: 2px 2px 0px cyan;/* for demo purposes */
      }
    </style>
  </head>
  <body>
    <hr/>
    <p>Single Characters:</p>
    <span class="halfStyle" data-content="T">T</span>
    <span class="halfStyle" data-content="E">E</span>
    <span class="halfStyle" data-content="X">X</span>
    <span class="halfStyle" data-content="T">T</span>
    <hr/>
    <p>Automated on any text:</p>
    <span class="textToHalfStyle">Half-style text.</span>
    <hr/>
    <script>
      jQuery(function($) {
        var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;
        // Iterate over all class occurrences
        $('.textToHalfStyle')
          .each(function(idx, halfstyle_el) {
            $halfstyle_el = $(halfstyle_el);
            halfstyle_style = $halfstyle_el.data('halfstyle') || 'hs-base';
            halfstyle_text = $halfstyle_el.text();
            halfstyle_chars = halfstyle_text.split('');
            // Set the screen-reader text
            $halfstyle_el.html('<span style="position: absolute;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');
            // Reset output for appending
            halfstyle_output = '';
            // Iterate over all chars in the text
            for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
              // Create a styled element for each character and append to container
              halfstyle_output += '<span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '">' + halfstyle_chars[halfstyle_i] + '</span>';
            }
            // Chrome 59 and above specific fix - Part 1 - Addresses a Chrome bug where Chrome fails to corectly render and repaint pseudo elements - I came up with this fix after many different tests.
            var _applyChromeFix = !!window.chrome && !!navigator.appVersion.match(/.*Chrome\/([0-9\.]+)/) && parseInt(navigator.appVersion.match(/.*Chrome\/([0-9\.]+)/)[1], 10) >= 59;
            if (_applyChromeFix) {
              halfstyle_output += '<style>.halfStyle{}</style>';
            }
            // Write to DOM only once
            $halfstyle_el.append(halfstyle_output);
            // Chrome 59 and above specific fix - Part 2
            if (_applyChromeFix) {
              setTimeout(function() {
                $halfstyle_el.find('style')
                  .remove();
              }, 0);
            }
          });
      });
    </script>
  </body>
</html>