Градиентный текст в 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, все, что внутри, все равно будет игнорироваться, а это именно то, что нам нужно.
Спасибо за внимание. Если у вас есть какие-либо вопросы, задавайте в комментариях. Следуйте за мной для получения дополнительных советов по веб-разработке.
Щелкайте по ним, не стесняйтесь 👆Красивые настраиваемые стили списков с использованием современного CSS
Научитесь стилизовать маркеры списков с помощью нового псевдоэлемента ::marker
Найдите свой новый любимый шрифт для программирования. С лигатурами кодирования и открытым исходным кодом.
hadrysmateusz.medium.com
Как добиться градиентного текста в CSS
В этом коротком видео мы рассмотрим, как можно добиться эффекта градиентного текста и как его использовать в LiveCanvas.
Итак, мы попытаемся воспроизвести что-то похожее на это.
Возможно, вы уже видели этот эффект несколько раз — в настоящее время он довольно популярен на многих веб-сайтах.
Прежде чем мы начнем, немного о теории.
Таким образом, в Интернете возможен градиентный текст, сочетающий в себе три простых свойства CSS.
Мы убедимся в этом, взглянув на статью о хитростях CSS, фантастический веб-сайт, который на самом деле является одним из лучших ресурсов для изучения интересных вещей CSS и HTML.
Возможно, вы уже сталкивались с ним раньше.
Кстати, Крис Койер — одно из тех имен, которые нельзя игнорировать, если вы увлечены веб-сайтами и программированием.
Очень рекомендую читать его статьи. А этому тоже десять лет — но он до сих пор актуален!
Давайте посмотрим на фрагмент кода.
Давайте просто проигнорируем свойство font-size, которое не важно для эффекта.
У нас есть свойство «фон», в котором определен градиент.
Но волшебство происходит с последними двумя свойствами, с префиксом webkit: заливка текста webkit и обводка текста webkit.
Если вы не ниндзя CSS, возможно, вы никогда о них не слышали.
Итак, первый вопрос: можно ли безопасно использовать эти свойства?
Если вы посмотрите на веб-сайт «Могу ли я использовать», вы увидите, что свойство «заполнение текстом» на самом деле довольно хорошо поддерживается во всех браузерах, кроме Internet Explorer, который в любом случае мертв.
Итак, зеленый свет! Эти свойства безопасны в использовании, а эффект будет работать даже на мобильных устройствах.
Итак, давайте посмотрим, как это сделать на практике.
Мы собираемся создать новый черновик страницы Live Canvas.
Добавим демонстрационный раздел.
Как видите, неплохо, но….
Давайте сделаем его более необычным, добавив к заголовку текстовый эффект градиента.
Итак, я открою редактор кода и попытаюсь добавить какой-нибудь встроенный стиль, чтобы продемонстрировать, как это может произойти.
Сначала я скопирую три необходимых оператора CSS из примера на сайте трюков CSS.
Вставка внутри определения «стиля» сразу дает ожидаемые результаты.
Затем мы можем настроить цвета и изменить градиент, переходя от голубого к пурпурному.
На самом деле, выглядит неплохо.
И, конечно же, если вы имеете что-то против использования встроенных стилей или вам нужно повторно использовать эффект на вашем сайте более одного раза, вы можете определить класс в CSS.