От автора: для создания смешанных стилей символа или текста можно использовать плагин, помогающий стилизовать текст. Несмотря на то, что концепция хороша, реализация оставляет желать лучшего, поскольку скрипты, которые будут использоваться, являются сплошным мусором, а применяемая техника — это грубое принуждение, и CSS на самом деле может делать это сам с помощью linear-gradient и background-clip!.
Проблемы
Скрипты создают дубликаты каждого символа, накладываемые друг на друга с помощью абсолютного позиционирования и overflow: hidden, чтобы обрезать части. Нннааа пппооодддоообббиииеее эээтттоооггго. Не то поведение, которое мы хотим получить.
Для скрытия частей сверху вниз нам на самом деле не нужна помощь JavaScript! Буквально просто установите линейный градиент сверху вниз, а затем установите background-clip:text (и его эквивалент -webkit)
Из-за этого не только количество скриптов во много раз больше, чем необходимо, но мы получаем еще плохо написанную чепуху, которую можно ожидать, если мы описываем, как НЕ нужно писать JavaScript, который является jQuery. Когда он был представлен 15 лет назад, это была дурацкая некомпетентная ерунда, а в 2021 году это просто тупой мусор.
На самом деле, если вам нужен «плагин», состоящий из 2k скриптов и 7k CSS для этого, что ж … наверно что-то не так. Разве что, это полностью принадлежало бы оригинальному создателю упомянутого плагина — Арбелю Акопяну — учитывая, что, когда он был написан — по всей видимости, в 2014 году — многие причудливые функции CSS, которые мы можем использовать — например, background-clip — даже не были доступны. Мир меняется.
Тем не менее, это очень похоже на беспорядок, который я ожидал от людей, пострадавших от катастрофы глупостей, таких «фреймворков», как jQuery, Angular, React, Vue и т.д.
Давайте исправим это. Все, что нам действительно нужно сделать, чтобы решить проблему, это — как я уже сказал — применить background-style и background-clip.
Обратите внимание: весь следующий код предполагает, что используется сброс. Например, линейный градиент сверху вниз:
<p class="test">To Bottom Gradient</p>
С помощью этого CSS:
.test { background-image:linear-gradient( to bottom, #FF0000 0%, #0000FF 100% ); background-clip:text; --webkit-background-clip:text; color:transparent;
}Дает нам следующее:
Если мы переключим для контейнера inline-block, float и т. д. и заменим «to bottom» на « to right», мы получим следующее:
Бум, мы сделали большую часть работы. Все, что вы можете сделать с линейным градиентом, мы можем применить к тексту. Например, если мы изменим градиент от верха к низу на:
background-image:linear-gradient( to bottom, #FF0000 0%, #FF0000 50%, #0000FF 50%, #0000FF 100% );
мы получаем вот что:
Как это работает?
Сделав текст прозрачным, мы позволим фону просматриваться через него. Параметр background-clip:text; указывает браузеру рисовать фон только за текстом… именно так он просматривается.
А как насчет символов?
Вы действительно можете достичь того же результата без скриптов, хотя это немного неудобно. Просто добавьте диапазон к каждому символу.
<p class="test"><span>T</span><span>o</span><span> </span><span>R</span><span>i</span><span>g</span><span>h</span><span>t</span><span> </span><span>T</span><span>h</span><span>i</span><span>r</span><span>d</span><span>s</span><span> </span><span>E</span><span>a</span><span>c</span><span>h</span><span> </span><span>C</span><span>h</span><span>a</span><span>r</span></p>
На самом деле такой подход — отстой. Он отнимает пропускную способность, ваше время и усилия, это — отстой. Здесь я бы использовал Javascript, чтобы помочь … переключить разметку на что-то вроде этого:
<p class="test jsWrapEachChar">To Right Third Each Char</p>
С помощью простого небольшого скрипта:
(function(d) { for (var wrapper of d.getElementsByClassName("jsWrapEachChar")) { var text = wrapper.textContent; wrapper.textContent = ""; for (var char of text) { var span = wrapper.appendChild(d.createElement('span')); span.textContent = char; } } })(document);IIFE, чтобы изолировать область видимости и сделать так, чтобы нам не приходилось указывать «document» во всех местах, проходим все элементы с помощью .jsWrapEachChar, захватываем их текст, очищаем элемент, а затем создаем SPAN для каждого символа непосредственно в DOM.
И помните, что. appendChild возвращает добавленную узел, поэтому нам не нужно возиться с ожиданием применения значений. Точно так же никакие изменения в DOM не отображаются до тех пор, пока скрипт не будет выполнен.
Итак, давайте посмотрим на это в действии
Небольшой codepen, демонстрирующий это на нескольких примерах. Я использую враппер, чтобы применить все через комбинаторы, а не описывать все с помощью презентационных классов. Помните, что использование классов — это противоположность тому, что должно быть сделано в JavaScript, независимо от того, что вам пытаются сказать фреймворки «HTML / CSS» со своей некомпетентностью.
Проблемы, которые остаются:
Если ваш текст разбивается на несколько строк, вертикальный градиент будет растягиваться до контейнера, а не на строку. Вы можете исправить это, применив его так же, как и посимвольную версию.
Горизонтальный градиент по всему тексту соответствует родительскому контейнеру. Вот почему демонстрация очищает каждый абзац, чтобы они сжимались до своего содержимого.
Некоторое количество пробелов вокруг каждого символа считается частью градиента, поэтому вы можете компенсировать это, задав первые и последние пять-десять процентов каждого градиента как однородный цвет.
Заключение
Не беритесь за JavaScript, чтобы решить любую задачу. CSS теперь способен на гораздо больше, поэтому я не удивлюсь, если рано или поздно они действительно дадут нам возможность настраивать таргетинг на каждый символ индивидуально. А пока используйте скрипты строго, чтобы делать то, что нельзя сделать в обычном CSS, и убедитесь, что вы не копируете то, что уже существует.
Автор: Jason Knight
Источник: levelup.gitconnected.com
Редакция: Команда webformyself.