Простая техника создания привлекательных веб-сайтов
Выделить веб-сайт может быть сложно.
Итак, вот небольшой трюк, который улучшит любую целевую страницу или заголовок: используйте градиентный текст.
Просто убедитесь, что не злоупотребляете им. Градиенты никогда не должны использоваться для более длинного текста. Вместо этого используйте их, чтобы сделать заголовки или конкретные слова более привлекательными.
Что может вас удивить, особенно если у вас есть опыт работы с инструментами дизайна, так это то, что вы не можете напрямую установить градиент в качестве цвета текста. Например, color: linear-gradient(yellow, red) не будет работать.
Но градиентный текст можно реализовать с помощью CSS, для этого требуется всего несколько дополнительных шагов.
Лучше всего начать с большого текста жирным шрифтом. Это сделает градиент более заметным, а текст более читаемым.
Текст, который я буду использовать, стилизован с использованием сокращения шрифта со следующими значениями:
font: bold 120px Poppins, sans-serif;
Шаг 1: Добавьте градиент
Во-первых, нам нужно добавить градиент в качестве фона.
По умолчанию градиент будет идти сверху вниз, но мы также можем указать направление.
Если вам нужен горизонтальный градиент, to right подойдет, но небольшой угол, например 60deg, выглядит более естественно.
Если вы хотите узнать, как создать любой градиент, какой захотите, или просто хотите освежиться, ознакомьтесь с моим Полным руководством по CSS-градиентам.
Шаг 2: Обрежьте это
Теперь нам нужно сделать так, чтобы градиент показывал только то место, где находится текст. Мы можем сделать это, используя background-clip.
Возможно, вы уже знаете, что это свойство позволяет нам обрезать фон по границе, отступу или коробке содержимого элемента.
Но он также может обрезать фон к тексту.
Если вы попробуете этот код, градиент просто исчезнет. Это потому, что градиент находится под текстом.
Шаг 3: Раскройте это
Чтобы показать градиент под нашим текстом, нам нужно сделать текст прозрачным. Мы можем сделать это, установив color: transparent.
У вас может возникнуть соблазн использовать здесь сокращение фона. Не надо.
К сожалению, сокращенная версия background background-clip не поддерживает ключевое слово text.
Отступать
Если вы должны поддерживать Internet Explorer, вам нужно будет вернуться к плоскому цвету.
Оберните все, что мы написали ранее, в правило @supports. Таким образом, он будет отображаться только в современных браузерах.
Затем за пределами блока @supports установите для текста запасной цвет. Вероятно, это должен быть цвет, который появляется в вашем градиенте и хорошо сочетается с остальным дизайном.
Убедитесь, что запасной вариант предшествует фактическим стилям градиента.
ПРИМЕЧАНИЕ. Несмотря на то, что само правило @supports также не поддерживается в IE, все, что внутри, все равно будет игнорироваться, а это именно то, что нам нужно.
Спасибо, что прочитали. Если у вас есть какие-либо вопросы, задавайте в комментариях. Подпишитесь на меня, чтобы получать дополнительные советы по веб-разработке.
