Як створити заливку тексту градієнтом з допомогою CSS
Веб-дизайнери та розробники завжди шукають щось нове та креативне, щоб зробити свій сайт унікальним та виразним. Один із таких способів візуально привернути увагу, – використовувати градієнтний текст. Градієнтний текст – це просто текст, до якого застосовано заливку градієнтом, і з допомогою цього кольорового ефекту отримує унікальний та привабливий вигляд.
В даному практичному уроці я покажу вам різні методи, які дозволяють накласти градієнт на текст: через кілька простих властивостей CSS або через SVG.
Градієнтний текст з допомогою лише CSS
Мова стилів CSS – це потужний інструмент, який вміє створювати ефект градієнтного тексту. Наприклад, з використанням функції linear-gradient(), коли потрібно створити лінійний градієнт, або функції radial-gradient() – коли потрібен радіальний градієнт. Ці функції ви можете застосувати до тексту з допомогою властивості background-clip. Нижче показано простий приклад того, як створити лінійний градієнт для тексту з допомогою CSS:
.text-with-gradient {
background: linear-gradient(135deg, #5e58ff, #f9ff58);
background-clip: text;
-webkit-text-fill-color: transparent;
}
Спочатку через властивість background-image застосовуємо функцію linear-gradient() з кутом нахилу, початковим та завершальним кольором градієнта. А потім встановлюємо властивість background-clip (обмеження, обрізка фону) для тексту та прозорість (transparent) для властивості -webkit-text-fill-color (заповнення тексту кольором). З допомогою цієї інструкції ми вказуємо браузеру застосувати градієнт лише до самого тексту та зробити колір тексту прозорим, щоб градієнт було видно. Я вже використовував властивість CSS-відсікання (background-clip), щоб створювати круглі зображення, і, як бачите, вона знадобилася і для поточної задачі.
Градієнтний текст з допомогою властивості mask-image
Ще ми можемо створити градієнтний текст застосовуючи властивість mask-image. Наприклад, використовуючи прозоре PNG зображення в якості маски зображення, до якої потім буде застосовано градієнт.
.text-with-gradient {
background-image: linear-gradient(135deg, #feac5e, #c779d0, #4bc0c8);
mask-image: url("logo.png");
mask-repeat: no-repeat;
mask-position: center;
color: transparent;
}
Тут логіка практично аналогічна попередньому підходу, але замість тексту ми використовуємо зображення, що містить потрібний текст. Варто зазначити, що ми можемо використовувати не лише текст, а, наприклад, якісь складні фігури.
Використання mix-blend-mode для створення градієнтного тексту
Властивість CSS mix-blend-mode дозволяє вказати, як вміст елемента має поєднуватися з фоном. Це може бути особливо корисним під час створення градієнтного тексту, оскільки дозволяє поєднувати колір тексту з градієнтним фоном.
Щоб використовувати mix-blend-mode для створення градієнтного тексту, спочатку потрібно встановити колір фону як градієнт, використовуючи один із методів, обговорених раніше в даному уроці. Потім можна додати властивість mix-blend-mode для текстового елемента та встановити для нього режим змішування, який добре працює з градієнтним фоном (наприклад, luminosity).
Ось приклад того, як використовувати mix-blend-mode для створення градієнтного тексту. Розмітка наступна:
<div class="background-with-gradient"> <p class="text-with-gradient">SebWeo</p> </div>
CSS стилі:
.background-with-gradient {
background-image: linear-gradient(135deg, #feac5e, #c779d0, #4bc0c8);
}
.text-with-gradient {
position: relative;
mix-blend-mode: luminosity;
background: white;
color: gray;
}
В цьому прикладі я для батьківського блоку встановив лінійний градієнт з допомогою властивості background-image. Потім для елементу p з класом text-with-gradient встановив властивість mix-blend-mode в luminosity (режим світіння). У цьому режимі змішування кольорів шару опирається на базовий колір (сірий) та фоновий (білий для текстового елемента). Як видно на картинці – фоновий колір змішується з фоновим кольором тексту і ми отримуємо градієнтний текст.
У чому перевага використання mix-blend-mode? Найбільша перевага – це те, що це чисте CSS-рішення. Немає потреби використовувати JavaScript або SVG, лише кілька рядків CSS. Іншою перевагою є те, що mix-blend-mode забезпечує значну гнучкість щодо типів градієнтів та кольорів, які можна використовувати та комбінувати.
Градієнтний текст з використанням SVG
SVG (масштабована векторна графіка) – це формат векторних зображень на основі XML, який підтримується всіма сучасними веб-браузерами. SVG дозволяє створювати складні фігури, візерунки та градієнти, включаючи градієнтний текст.
Щоб створити градієнтний текст у SVG, можна використовувати елемент <text>, який застосовується для визначення текстового фрагменту. Щоб додати градієнт для заливки тексту, можна використовувати елемент <linearGradient> (як в нашому прикладі) або ж <radialGradient>. Ось як може виглядати текст з градієнтом через SVG картинку:
<svg viewBox="0 0 150 50" xmlns="//www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(0, 7, 249);stop-opacity:1"></stop>
<stop offset="50%" style="stop-color:rgb(255, 255, 0);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(79, 82, 194);stop-opacity:1"></stop>
</linearGradient>
</defs>
<text x="50%" y="50%" text-anchor="middle" fill="url(#gradient)">SebWeo</text>
</svg>
У коді SVG картинки даного прикладу я використовую лінійний градієнт (<linearGradient>) з трьома точками зупину (<stop>), які визначають кольори та положення градієнта. Атрибут id використовується для ідентифікації градієнта, на який ми можемо посилатися з допомогою атрибута fill елементу <text>. Атрибут text-anchor використовується для горизонтального центрування тексту, а атрибути x та y використовуються для вертикального центрування тексту.
Для створення радіального градієнту (<radialGradient>), вкажіть атрибути cx, cy та r, які визначають центр та радіус градієнта, наприклад, так:
<radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> … </radialGradient>
Вас також ніхто не обмежує використовувати градієнти в SVG у поєднанні з іншими елементами (такими як фігури та зображення), щоб створювати дійсно складні дизайни.
Замість висновку
Ефективно використовуючи градієнтний текст, ви можете вивести дизайн свого веб-сайту на новий рівень та створити незабутній UX для своїх відвідувачів. З його допомогою ви можете створити унікальний та привабливий елемент дизайну для свого сайту. Незалежно від того, чи ви оберете прості властивості CSS, SVG чи їх комбінацію, градієнтний текст може візуально прикрасити вашу сторінку.
Але важливо пам’ятати, що хоча текст «вкритий» градієнтом може бути потужним інструментом, його слід використовувати стратегічно та помірно. Занадто багато градієнтного тексту може викликати перевантаження та відволікати від загального дизайну сторінки. Враховуйте конкретні потреби та цілі вашого сайту та будьте певні, що це зручно та доступно для ваших користувачів.
Завдяки прикладам, наведеним у даному практичному уроці, ви зможете впевненіше експериментувати з градієнтним текстом на власному сайті.
Дякую за увагу!
Потрібно більше інформації?
