x
 
Николай Марченко
3 января 2013

Артём, как сделать клёвый вертикальный градиент на тексте?



Николай!

В браузерах на базе Вебкита недавно появилась возможность закрашивать текст градиентом:

<style>
.text-gradient {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #2aab33;
  background-image: -webkit-linear-gradient(#b0fb68, #2aab33);
  /* Запрещаем рисовать градиент Опере,
     понимающей префикс -webkit- */
  background-image: -o-linear-gradient(transparent, transparent);
}
</style>
<span class="text-gradient">1<s class="hs"></s>073<s
    class="hs"></s>498</span>

Посмотрите примеры в Хроме или Сафари:

  • 1073498
    2475874

Оказалось, такому тексту нельзя просто взять и добавить падающую тень — она всплывает над градиентом, что даёт странный эффект:

  • 1073498
    2475874

Чтобы совместить тень и градиент, пришлось добавить ещё один элемент, продублировать текст и чуть усложнить стиль:

<style>
.text-gradient {
  position: relative;
  color: transparent;
  white-space: nowrap;
  text-shadow: 0 2px 1px rgba(0, 0, 0, .5);
}
.text-gradient .gradient {
  position: absolute;
  left: 0;
  font-style: normal;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  color: #2aab33;
  background-image: -webkit-linear-gradient(#b0fb68, #2aab33);
  background-image: -o-linear-gradient(transparent, transparent);
}
</style>

<span class="text-gradient">1<s class="hs"></s>073<s
      class="hs"></s>498<i class="gradient">1<s
      class="hs"></s>073<s class="hs"></s>498</i></span>
  • 10734981073498
    24758742475874

Если этот градиент несёт только декоративно-карамельную функцию, я бы не стал заморачиваться с остальными браузерами и остановился. Все невебкитовые браузеры покажут цветной текст по возможности с тенью. Если градиент важен (часть фирстиля) или дизайнер настаивает, я нарезал бы цифры в Фотошопе и составлял числа из картинок.

См. о разделении разрядов чисел полупробелом

Градиентый текст есть в СВГ, но даже в свежих браузерах решение получается сложным. Для браузеров без СВГ требуется совершенно отдельный код и детектор поддержки СВГ, например, Модернизр.

Советую пока лишь поиграть в СВГ для саморазвития :-)

Текст в СВГ, простой и не очень

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии


3 января 2013

Бонус-трек. Используя независимый слой для тени, можно найти неожиданные спецэффекты, например текст сделать наклонным, а тень оставить прямой:

http://jsfiddle.net/HjtYH/1/

Антон Романов
3 января 2013

Джейквери-плагин для текстовых градиентов Сергея Никитина: http://mrnix.ru/pxgradient/

Виктор Гринчик
3 января 2013

Ещё один способ — наложить поверх текста плашку с прозрачным градиентным фоном:

http://codepen.io/joe/pen/ubexw

Работает если:
1. Градиент простой (один цвет постепенно становящийся ярче).
2. Под текстом белый фон.
3. Выделение текста не критично.

Дмитрий Шишкин
3 января 2013

Решение для горизонтального градиента, придуманное в Студии Лебедева: http://www.artlebedev.ru/tools/technogrette/js/gradient-text/

Артём Мичурин
13 сентября 2017

Делаю крутые анимированные градиент-надписи на https://gfto.ru/


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

3 2 4 4




Недавно всплыло

Как следует поступить дизайнеру, если клиент постоянно вспоминает «нечто очень важное» 7 Почему в переписке нельзя использовать «Доброго времени суток»? 2 Как сделать, чтобы публикация выделялась в ленте: композиция, исправление дефектов, цвет 1 Какие законы для текста, который будет восприниматься только на слух? 1