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