В последнее время градиентный текст все чаще используется на популярных сайтах и становится трендом!
И Vuejs, и Netlify используют градиентный текст на своей главной странице!
Вы когда-нибудь задумывались, как добиться такого стиля, используя только CSS?
В этой статье я хочу показать вам, как использовать простой сайт для генерации градиентного текста CSS, а также как реализовать его вручную, используя только CSS.
как генерировать градиентный текст CSS с помощью веб-сайта:
Я опубликовал полезный сайт: CSS градиентный текст | бесплатный онлайн генератор градиентного текста.
🔗 URL сайта: cssgradienttext.com
Используя этот инструмент, вы настраиваете цвета градиента (добавляете, удаляете, изменяете порядок) и угол, а затем копируете сгенерированный код!
Я с нетерпением жду ваших отзывов и предложений в комментариях ниже!
Как вручную реализовать градиентный текст, используя только CSS
Идея заключается в том, чтобы задать три различных свойства CSS тексту, который мы хотим стилизовать:
div {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: // your gradient here
}
Как это работает?
Первое свойство — -webkit-background-clip, которое отвечает за отрисовку фона только там, где есть текст.
Второе свойство — text-fill-color, которое устанавливается в transparent. потому что мы хотим скрыть текст, чтобы иметь возможность показать градиентный фон за ним!
Третье свойство простое, а именно: background-image: linear-gradient(45deg, #f3ec78, #af4261);. Вы можете изменить угол, цвета и добавить несколько цветов.
Посмотрите Mozilla Docs for linear-gradient, чтобы увидеть все варианты.
Если вы хотите увидеть больше классных вещей, нажмите кнопку «Следить»! Я буду регулярно добавлять новые материалы, связанные с CSS, Javascript, Vue и Nuxt в будущем!
Спасибо, что читаете 🤓