Градиентный текст в CSS. Простая техника изготовления… | by Mateusz Hadryś
Простая техника создания привлекающих внимание веб-сайтов
Выделить веб-сайт может быть непросто.
Вот небольшая хитрость, которая улучшит любую целевую страницу или заголовок: используйте градиентный текст.
Только не злоупотребляйте им. Градиенты никогда не должны использоваться для более длинного текста. Вместо этого используйте их, чтобы сделать заголовки или конкретные слова более привлекательными.
Что может вас удивить, особенно если у вас есть опыт работы с инструментами дизайна, так это то, что вы не можете напрямую установить градиент в качестве цвета текста. Например цвет: линейный градиент (желтый, красный)
не подойдет.
Но градиентный текст можно получить в CSS, для этого требуется всего несколько дополнительных шагов.
Лучше всего начать с большого текста жирным шрифтом. Это сделает градиент более заметным, а текст более читаемым.
Текст, который я буду использовать, оформлен с использованием сокращенного шрифта со следующими значениями:
шрифт: полужирный 120px Poppins, без засечек;
Во-первых, нам нужно добавить градиент в качестве фона.
По умолчанию градиент идет сверху вниз, но мы также можем указать направление.
Если вам нужен горизонтальный градиент, вправо
подойдет, но небольшой угол вроде 60deg
выглядит более естественным.
Если вы хотите узнать, как создать любой градиент, какой захотите, или просто хотите освежить в памяти знания, ознакомьтесь с моим Полным руководством по CSS-градиентам.
Полное руководство по CSS-градиентам
Градиенты возвращаются, убедитесь, что вы знаете, как их использовать
hadrysmateusz.medium.com
Теперь нам нужно сделать так, чтобы градиент показывал только то место, где находится текст. Мы можем сделать это, используя background-clip
.
Возможно, вы уже знаете, что это свойство позволяет обрезать фон по границе, отступу или полю содержимого элемента.
Но он также может обрезать фон к тексту.
Если вы попробуете этот код, он будет выглядеть так, будто градиент просто исчез. Это потому, что градиент равен под текстом.
Чтобы показать градиент под нашим текстом, нам нужно сделать текст прозрачным. Мы можем сделать это, установив цвет : прозрачный
.
У вас может возникнуть соблазн использовать здесь фоновое сокращение. Не.
К сожалению, сокращенная версия background
background-clip
не поддерживает ключевое слово text
.
Если вам необходимо поддерживать Internet Explorer, вам нужно будет вернуться к плоскому цвету.
Оберните все, что мы написали ранее, в правило @supports
. Таким образом, он будет отображаться только в современных браузерах.
Затем за пределами блока @supports
установите для текста резервный цвет. Вероятно, это должен быть цвет, который появляется в вашем градиенте и хорошо сочетается с остальным дизайном.
Убедитесь, что запасной вариант предшествует фактическим стилям градиента.
ПРИМЕЧАНИЕ: Несмотря на то, что само правило @supports также не поддерживается в IE, все, что внутри, все равно будет игнорироваться, а это именно то, что нам нужно.
Спасибо за внимание. Если у вас есть какие-либо вопросы, задавайте в комментариях. Следуйте за мной для получения дополнительных советов по веб-разработке.
Щелкайте по ним, не стесняйтесь 👆