Как применить стили CSS только к половине слова или символа

Иногда по каким-то причинам, возможно в связи с дизайном веб-сайта, вам может понадобиться добавить стиль только к половине символа, слова или предложения.

Для этого вам потребуется CSS, а также JavaScript. Ниже мы представим, как можно получить такой эффект.

Стилизация половины только с помощью CSS

Возможно получить стилизацию половины символа, используя только CSS.

Сначала установите свойство background со значением "linear-gradient" для вашего предпочитаемого направления и укажите видимость видимость 50% для каждого цвета.

Потом установите свойство background-clip как background-clip: text;

Следующим шагом будет установление свойства text-fill-color, которое указывает цвет заливки переднего плана для текстового контента элемента. Задайте webkit-text-fill-color: transparent; , чтобы текст имел цвет, указанный свойством background.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      h1 {
      display: inline-block;
      margin: 0;
      line-height: 1em; 
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
      font-size: 200px;
      background: linear-gradient(to right, #1c87c9 50%, #8ebf42 50%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <h1>X</h1>
    <p>Стилизация половины символа.</p>
  </body>
</html>

Если хотите отобразить только половину символа и применить к ней стиль, задайте значение "transparent" для второй половины линейного градиента.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      h1 {
      display: inline-block;
      margin: 0;
      line-height: 1em; 
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
      font-size: 200px;
      background: linear-gradient(to right, #1c87c9 50%, transparent 50%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <p>Прозрачная стилизация половины символа. Выберите символ, чтобы увидеть его скрытую часть.</p>
    <h1>X</h1>
  </body>
</html>

Теперь давайте рассмотрим случай, когда нужна стилизация половины слова, а не символа. Это нетрудно. Здесь вам просто необходимо разместить каждую букву в элемент <span> и применить вышеуказанную стилизацию для элемента span.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      span {
      display: inline-block;
      margin: 0;
      line-height: 1em; 
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
      font-size: 60px;
      background: linear-gradient(to right, #1c87c9 50%,#113155 50%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <div>
      <span>T</span>
      <span>E</span>
      <span>X</span>
      <span>T</span>
    </div>
  </body>
</html>

Вертикальная и горизонтальная стилизация половины

Можно легко указать, должна ли стилизация половины быть вертикальной или горизонтальной. Вам просто необходимо указать линейный градиент справа налево или сверху вниз.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .vertical {
      display: inline-block;
      margin: 0;
      line-height: 1em; 
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
      font-size: 60px;
      background: linear-gradient(to right, #1c87c9 50%,#113155 50%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      }
      .horizontal {
      display: inline-block;
      margin: 0;
      line-height: 1em; 
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
      font-size: 60px;
      background: linear-gradient(to top, #1c87c9 50%,#113155 50%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Вертикальная стилизация половины буквы.</h2>
      <span class="vertical">X</span>
      <h2>Горизонтальная стилизация половины буквы.</h2>
      <span class="horizontal">X</span>
    </div>
  </body>
</html>

Стилизация половины с помощью JavaScript/jQuery

Смотрите другой пример, где CSS псевдоэлемент ::before используется вместе с JavaScript. Можно также задать text-shadow для стилизации половины текста.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      font-family: Helvetica, Arial, sans-serif;   
      font-size: 60px;
      font-weight: bold;
      text-align: center;
      }
      .half-style > span {
      white-space: pre-line;
      position: relative;
      color: #1c87c9 ;
      }
      .half-style > span::before {
      content: attr(data-content);
      pointer-events: none;
      position: absolute;
      overflow: hidden;
      color: #113155;
      width: 50%;
      z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class='half-style'>W3docs</div>
    <script>
      function wrapString(str) {
        var output = [];
        str.split('').forEach(function(letter) {
          var wrapper = document.createElement('span');
          wrapper.dataset.content = wrapper.innerHTML = letter;
      
          output.push(wrapper.outerHTML);
        });
      
        return output.join('');
      }
      
      window.onload = function() {
          var el  = document.querySelector('.half-style'),
              txt = el.innerHTML;
      
          el.innerHTML = wrapString(txt);
      }
    </script>
  </body>
</html>

Рассмотрим другой пример, где используется jQuery для получения эффекта тройной стилизации.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>
    <style>
      .halfStyle { /* базовый символ и правый 1/3 */
      position:relative;
      display:inline-block;
      font-size:80px; /* или любой размер шрифта будет работать */
      color: transparent; /* скрыть базовый символ */
      overflow:hidden;
      white-space: pre; /* чтобы избегать свертывания пространств */
      color: #1c87c9; /* в целях демо использования */
      text-shadow: 2px 2px 0px #eee; /* в целях демо использования */
      }
      .halfStyle:before { /* создает левый 1/3 */
      display:block;
      z-index:2;
      position:absolute;
      top:0;
      width: 33.33%;
      content: attr(data-content); /* динамический контент для псевдоэлемента */
      overflow:hidden;
      pointer-events: none; /* разрешает выбор базового символа с помощью мыши */
      color: #8ebf42; /* в целях демо использования */
      text-shadow: 2px -2px 0px #eee; /* в целях демо использования */
      }
      .halfStyle:after { /* создает средний 1/3 */
      display:block;
      z-index:1;
      position:absolute;
      top:0;
      width: 66.66%;
      content: attr(data-content); /* динамический контент для псевдоэлемента */
      overflow:hidden;
      pointer-events: none; /* разрешает выбор базового символа с помощью мыши */
      color: #666; /* в целях демо использования */
      text-shadow: 2px 2px 0px cyan; /*  в целях демо использования */
      }
    </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;
      
          // Выполните перебор всех классов 
      
          $('.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('');
      
              // Установите программу для чтения текста с экрана 
              $halfstyle_el.html('<span style="position: absolute;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');
      
              // Восстановите вывод для дополнения 
      
              halfstyle_output = '';
      
              // Выполните перебор всех символов в тексте 
      
              for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
                  // Создайте стилизованный элемент для каждого символа и добавьте к контейнеру 
                  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
              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>';
              }
      
              // Обратитесь к DOM только один раз
      
              $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>

Считаете ли это полезным?

Похожие статьи