1. Home
  2. /
  3. Уроки css
  4. /
  5. Текст с градиентом

Текст с градиентом

Мы можем добавить фоновое изображение для текстового элемента.

Сегодня мы будем экспериментировать background-clip: text; и создадим симпатичный золотой тест, добавив CSS3 переходы.

background-clip: text находится в стадии разработки и поддерживается некоторыми современными браузерами только с префиксом -webkit- Таким образом, браузеры, поддерживающие свойства, отобразят текст с градиентом, а браузеры, не поддерживающие свойство, просто пропустят его в коде и установят для текста заданный цвет.
Золотой текст
Код <span class="gold">Золотой текст</span> Стиль
.gold {
    background-image: linear-gradient(to right, #462523 0px, #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #462523 100%);
    color: transparent;
    font-family: "Times New Roman",serif;
    font-size: 150px;
    font-weight: bold;
   background-clip: text;
    letter-spacing: 5px;
    -webkit-background-clip: text;}

предыдущий
следующий


  1. Home
  2. /
  3. Уроки css
  4. /
  5. Текст с градиентом

Архивы

Рубрики

Друзья сайта

Метки

Яндекс.Метрика