Градієнтний текст за допомогою CSS3

1 хв. читання

Це буде дуже коротка стаття, так як цей ефект є дуже швидким в реалізації та легким у застосуванні . Я покажу вам, як можна зробити барвистий градієнтний ефект для тексту використовуючи CSS3 властивості background-clip та text- fill-color.

Зверніть увагу, що в даний час цей метод працює тільки в webkit браузерах.

Це демо використовує тільки один елемент h1 та наступний CSS:

    h1 {
      display: table;
      margin: 0 auto;
      font-family: "Roboto Slab";
      font-weight: 400;
      font-size: 6em;
      background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      line-height: 200px;
    }

Ключовими у цьому прикладі будуть наступні рядки:

    background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

Ми додали барвистий градієнт і зробити наш текст прозорим. Ми скористались background-clip, щоб переконатися, що фон маскується текстом. Це означає, що фон буде тільки там, де (тепер прозорий) текст.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 5.9K
Приєднався: 8 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація