• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Делаем градиентный текст при помощи CSS (Текст с использованием градиента на чистом CSS)
Делаем градиентный текст при помощи CSS
Kosten
Дата: Суббота, 2019-03-23, 16:09 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24946
Награды: 57


В этой теме затронем красочный вид градиента, который используется в название текста. А точнее создаем красочный градиент для текста с помощью CSS, который отлично считается с разным дизайн. Чтоб понятнее было, то если мы название сайта ставим в одном оттенке, то при помощи градиентов создаем красивый обзор.

Как пример, первая буква будет синей а крайнее зеленой и по центру все красиво переливается, вообщем здесь также вы сами можете добавить палитры цвета, это делается для того, чтоб соответствовало вашему дизайну.

Так выглядит:



HTML

Код
<h2><a href="http://zornet.ru/">ZorNet сайт вебмастера</a></h2>

CSS

Код
h2 {
  font-size: 34px;
  line-height: 4vw;
  font-weight: lighter;
  letter-spacing: 0.01em;
  position: fixed;
  top: 2.5vw;
  left: 35vw;
}
a {
    background: linear-gradient(45deg, #e010e0 33%, #12128c 66%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    color: #0e0e69;
}

Есть еще можно самостоятельно оформить все значение.

Демонстрация
Прикрепления: 8091341.png(10.1 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2019-03-24, 15:19 | Сообщение 2
Оффлайн
Администраторы
Сообщений:24946
Награды: 57


Совместимый текст градиента с использованием режимов наложения CSS. По состоянию на ноябрь 2015 года это не работает в последних версиях Chrome.

Минусы: точность цветопередачи снизилась и в основном работает на очень темном или очень светлом фоне.

Плюсы: код гораздо проще и не требует дублирования текста.

Граница текста границы фона Кнопки с анимацией


See the Pen
GButton
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Делаем градиентный текст при помощи CSS (Текст с использованием градиента на чистом CSS)
  • Страница 1 из 1
  • 1
Поиск: