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

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

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

See the Pen Gradient text with CSS3 by Creative Punch (@CreativePunch) on CodePen.

Це демо використовує тільки один елемент 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, щоб переконатися, що фон маскується текстом. Це означає, що фон буде тільки там, де (тепер прозорий) текст.