Можно ли раскрасить одну букву несколькими цветами в html?

Question

Нашёл хохмочку, которая не работает:

<h1>you are <a>gay</a></h1>
a{
color;
}

Загуглил английский стэк - они предлагают отдельно раскрасить каждую букву в разный цвет. Но проблема в том, что в гейском флаге полосы горизонтальные, а не вертикальные, посему вертикальная раскраска не будет выглядеть так символично. Можно ли как-нибудь обойти эти ограничения, чтобы юзер получал радужный текст, и каждый символ был раскрашен несколькими цветами?

Answer 1

h1 { font: bold 48px/48px 'Arial Black'; }
a {
  background-image: linear-gradient(to bottom, #e40303 45%, #ff8c00 46%, #ff8c00 51%, #ffed00 52%, #ffed00 57%, #008026 58%, #008026 63%, #004dff 64%, #004dff 69%, #750787 70%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  color: black;
}

<h1>you are <a>Gay</a></h1>

Answer 2

Если не учитывать Вашу сомнительную тематику, а лишь способ реализации, то самый простой вариант - использование обёрток для символов в виде span.

<style>
    p span:nth-child(1) {color:orange;}
    p span:nth-child(2) {color:yellow;}
    p span:nth-child(3) {color:green;}
    p span:nth-child(4) {color:blue;}
    p span:nth-child(5) { color :purple;}
</style>

<p><span>H</span><span>e</span><span>l</span><span>l</span><span>o</span></p>

БЛОГ НА HUSL

Можно ли раскрасить одну букву несколькими цветами в html?

Ответы (2 шт):