• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как добавить градиент к тексту с помощью CSS (Как добавить наложение градиента к тексту при помощи CSS)
Как добавить градиент к тексту с помощью CSS
Kosten
Дата: Понедельник, 2020-06-22, 23:55 | Сообщение 1
Оффлайн
Администраторы
Сообщений:28886
Награды: 62


Чтобы добавить наложение градиента к текстовому элементу, нам нужно установить три различных свойства CSS для текста, который мы хотим стилизовать.

Как работает цвет градиента текста CSS?

В CSS нет выделенных цветовых свойств градиента текста. Вместо этого мы должны использовать комбинацию свойств для достижения цветового градиента текста. Принцип градиента цвета текста CSS основан на свойстве цвета фона элемента HTML , которое мы будем использовать в качестве маски для текста . Цвет фона элемента HTML можно легко установить на градиент, используя свойство -webkit-linear-gradient В CSS. С парой дополнительных свойств мы замаскируем текст внутри элемента в цвет градиента фона.

Поскольку мы маскируем текст внутри элемента HTML в цвет фона элемента, фон элемента становится прозрачным . Это означает, что элемент HTML, содержащий текст цвета градиента, не может иметь одновременно заданный цвет фона. Если вам нужно создать элементы, содержащие градиентный текст определенного цвета фона (например, кнопки), вам нужно будет обернуть элемент родительским элементом, для которого будет установлен цвет фона. Чтобы узнать больше о градиентном тексте с цветом фона, посмотрите наши продвинутые примеры.

background-image: gradient
background-clip: text
text-fill-color: transparent

Шаг 1: Добавьте градиент в качестве фона

В этом примере мы будем использовать линейный градиент, который можно нарисовать следующим образом:

CSS

Код
.gradient-text {
    background-image: linear-gradient(45deg, #f3ec78, #af4261);
}

Чтобы градиент покрывал всю ширину и высоту вашего текстового поля, установите background-size: 100%, что я и сделал в этом примере.

Шаг 2: Обрезка фона для текста

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

Следующее, что мы хотим сделать, это настройка background-clip: text. Это сделает только фон, где есть текст. Если вы проверите это, то будет казаться, что ваш градиент полностью исчез, потому что текст по-прежнему отображается, а слой градиента скрыт под ним.

Вот почему мы должны установить text-fill-color для transparent. Это удалит заливку из текста, снова делая градиент видимым.

Наложение градиента текста


See the Pen
Gradient Text CSS
by Kocsten (@kocsten)
on CodePen.



Далее:

Шаг 3: Добавление запасных вариантов

Градиенты в виде фоновых изображений, обрезанных поверх текста, поддерживаются не всеми браузерами, поэтому важно добавить запасные варианты. Мы можем сделать это, добавив background-color свойство к тексту.

CSS

Код
.gradient-text {
    background-color: #f3ec78;
    background-image: linear-gradient(45deg, #f3ec78, #af4261);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

Также имейте в виду, что не все градиенты поддерживаются одинаково. Например, в некоторых браузерах конические градиенты не будут отображаться. В этих случаях также возможно добавить линейный градиент как запасной вариант к коническому градиенту.

CSS

Код
.gradient-text {
    background-color: #f3ec78;
    background-image: linear-gradient(#f3ec78, #af4261);
    background-image: conic-gradient(#f3ec78, #af4261);
}

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

Это также означает, что если вы хотите добавить фактический фон к тексту, вам нужно добавить обертку к тексту.

HTML

Код
<h1 style="background-color: black;">
    <span class="gradient-text">Этот текст будет иметь градиент сверху</span>
</h1>

Далее:

Красивое наложение градиента текста


See the Pen
Gradient Text Overlay
by Kocsten (@kocsten)
on CodePen.



Далее идет второй вариант:

Радужная текстовая анимация при наведении


See the Pen
Rainbow text hover animation
by Kocsten (@kocsten)
on CodePen.



Далее:

Создать наложение градиента текста


See the Pen
Gradient Text Overlay
by Kocsten (@kocsten)
on CodePen.



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

Градиент:

Код
.gradient-brand-primary {
    background-color: #f3ec78;
    background-image: linear-gradient(45deg, #f3ec78, #af4261);
}

Отсечение текста:

Код
.gradient-text {
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

Это позволяет вам легко делать две вещи:

1. Добавьте один и тот же градиент или шаблон как в текст, так и в качестве фона для обычных элементов.
2. Создавайте различные наложения текста без необходимости повторять свойства отсечения.

На этом все!
Страна: (RU)
Kosten
Дата: Среда, 2020-06-24, 00:20 | Сообщение 2
Оффлайн
Администраторы
Сообщений:28886
Награды: 62


Чтобы отобразить градиент для данного шрифта вместо сплошного цвета, вам нужно будет использовать некоторые -webkit-свойства с префиксами старой школы. Эта смесь -webkit- специфического CSS и общего градиентного фона была обнаружена десять лет назад, но остается лучшим способом получить чистый CSS-фон, даже с пользовательскими шрифтами. Обратите внимание, что несмотря на -webkit префикс Firefox по-прежнему правильно отображает градиентный шрифт.



HTML

Код
<h2 class="gevadienu-usinug">
  ZorNet.Ru — сайт для вебмастера
    </h2>


CSS
Код
  .gevadienu-usinug {
   background: linear-gradient(red, blue);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  }

С такими сложными шрифтами, как это ни удивительно, у нас есть довольно простой CSS-хак для создания градиентного текста.
Прикрепления: 1251551.png(8.2 Kb)
Страна: (RU)
Kosten
Дата: Среда, 2020-06-24, 00:39 | Сообщение 3
Оффлайн
Администраторы
Сообщений:28886
Награды: 62


Градиентный текст при наведении

Некоторое время я искал, как создать эффект перехода при наведении градиента на текст, но не смог найти решение. Поэтому здесь я использую режим смешивания для отображения текста. Тогда у div позади него будет градиент, где установлен div на width: 0%, затем на hover width: 100%, чтобы он выглядел так, как будто к тексту применен градиент.



HTML

Код
<div class="outer">
  <div class="bg">
    <div class="inner">

      <h1>ZorNet.Ru — сайт для вебмастера</h1>

    </div>
  </div>
</div>

CSS

Код
.outer {
  padding-top: 120px;
  width: 850px;
  margin: auto;
  display: block;
}

.bg {
  text-align: center;
  width: 0%;
  transition: all 0.6s ease-out;
  background: #3ebac6 background: -moz-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #3ebac6), color-stop(50%, #8b539e), color-stop(100%, #e53782));
  background: -webkit-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  background: -o-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  background: -ms-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  background: linear-gradient(to right, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3ebac6', endColorstr='#e53782', GradientType=1);
}

.inner {
  display: inline-block;
  background-color: white;
  mix-blend-mode: screen;
  padding: 5px;
  width: 850px;
}

h1 {
  color: black;
  font-size: 50px;
  letter-spacing: 5px;
}

.outer:hover .bg {
  width: 100%;
}

При использовании этого для различной ширины: no-wrap; на h1 и уберите ширину из внешней и внутренней.

Наведите курсор на демонстраций
Прикрепления: 7930173.png(24.1 Kb)
Страна: (RU)
Kosten
Дата: Среда, 2020-06-24, 00:42 | Сообщение 4
Оффлайн
Администраторы
Сообщений:28886
Награды: 62


Градиентный текстовый штрих CSS


See the Pen
Gradient Text Stroke CSS
by Kocsten (@kocsten)
on CodePen.




CSS текстовый градиент цвета


See the Pen
CSS3 text gradient color
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Среда, 2020-06-24, 00:59 | Сообщение 5
Оффлайн
Администраторы
Сообщений:28886
Награды: 62


CSS текстовый градиент цвета браузера совместимость

Чтобы создать цветовой градиент текста с помощью CSS, мы должны использовать расширение -webkit свойства. Поэтому цветовые градиенты, применяемые к тексту, должны быть совместимы только с браузерами на основе веб-набора. К счастью, в настоящее время самые популярные браузеры без webkit также поддерживают и отображают текст в градиентном цвете. Цветовые градиенты текста CSS будут правильно отображаться в последних версиях следующих браузеров:

- Хром
- опера
- Fire Fox
- Сафари

Чтобы ваш текст выглядел хорошо, даже если некоторые браузеры не поддерживают CSS-градиенты, рекомендуется также использовать стандартное свойство color: CSS в качестве альтернативного решения.

Как сделать цвет шрифта в градиенте CSS

CSS

Код
h1 {
  font-size: 45px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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