-1

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

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

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

2 ответа 2

9

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>

1
  • Офигенно. Настолько офигенно, что я даже на секунду поверил в оное)) То что мне нужно))) Где вы этому научились? 11 окт 2020 в 23:11
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>

3
  • Тут даже не в тематике дело, а в "...во флаге полосы горизонтальные, а не вертикальные, посему вертикальная раскраска не будет выглядеть так символично" и "...каждый символ был раскрашен несколькими цветами"
    – UModeL
    11 окт 2020 в 14:34
  • @Эмиль_Сабитов так и я могу. Не впечатляет. 11 окт 2020 в 23:09
  • @UModeL, да согласен. Изначально неправильно в голове интерпретировал вопрос 12 окт 2020 в 15:06

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.