Нужно задать тексту градиент
@Qwertiy Чем проявляется связаность? Здесь есть только связность. Да, в вопросах, есть похожие слова, но здесь они применяются в другом контексте.
9 авг 2020 в 19:29
@ВладимирВладимирович, именно из-за разного контекста была отклонена тревога на удаление одного из вопросов как дубликата другого. Тем не менее, весьма возможно, что решение одного вопроса может быть применимо и для другого.
10 авг 2020 в 8:50
Уважаемый @Qwertiy, согласен с вашей точкой зрения, но в данном вопросе просто хочу узнать про различные способы создания текстового градиента )
Градиентный текст в CSS
Простая техника для создания привлекательных веб-сайтов
Может быть сложно выделить сайт среди других.
Итак, вот небольшой трюк, который улучшит любую целевую страницу или заголовок: используйте градиентный текст.
Только не злоупотребляйте им. Никогда не используйте градиенты для более длинного текста. Вместо этого используйте их, чтобы сделать заголовки или конкретные слова более привлекательными.
Что может вас удивить, особенно если у вас есть опыт работы с инструментами дизайна, так это то, что вы не можете напрямую установить градиент в качестве цвета текста. Например color: linear-gradient(yellow, red) не сработает.
Но градиентный текст можно получить в CSS, для этого требуется всего несколько дополнительных шагов.
Лучше всего начать с большого жирного текста. Это сделает градиент более заметным, а текст более читабельным.
Текст, который я буду использовать, оформлен с использованием сокращенного шрифта со следующими значениями:
font: bold 120px Poppins, sans-serif; Во-первых, нам нужно добавить градиент в качестве фона.
По умолчанию градиент будет идти сверху вниз, но мы также можем указать направление.
Если вам нужен горизонтальный градиент, это to right поможет, но небольшой угол 60deg выглядит более естественным.
Если вы хотите узнать, как создать любой градиент, который вам нужен, или просто хотите освежить в памяти, ознакомьтесь с моим полным руководством по градиентам CSS .
Полное руководство по градиентам CSS
Шаг 2: закрепите его
Теперь нам нужно сделать так, чтобы градиент отображал только текст. Мы можем сделать это, используя background-clip .
Вы можете узнать больше об этом и других свойствах фона в моей статье обо всех свойствах фона.
Вы уже знаете , что это свойство позволяет нам обрезать фон до границы, обивка, или содержимого коробки элемента.
Но он также может обрезать фон текста.
Если вы попробуете этот код, будет похоже, что градиент просто исчез. Это потому, что градиент находится под текстом.
Шаг 3: Раскройте это
Чтобы показать градиент под нашим текстом, нам нужно сделать текст прозрачным. Мы можем сделать это, установив color: transparent .
У вас может возникнуть соблазн использовать здесь сокращение фона . Не надо.
К сожалению, background сокращенная версия background-clip не поддерживает text ключевое слово.
Отступать
Если вам необходимо поддерживать Internet Explorer, вам нужно будет вернуться к однотонному цвету.
Оберните все, что мы написали ранее, в @supports правило. Таким образом, он будет отображаться только в современных браузерах.
Затем за пределами @supports блока установите резервный цвет для текста. Вероятно, это должен быть цвет, который появляется в вашем градиенте и хорошо сочетается с остальной частью дизайна.
Убедитесь, что резервный вариант предшествует фактическим стилям градиента.
ПРИМЕЧАНИЕ. Несмотря на то, что само правило @supports также не поддерживается в IE, все, что находится внутри, по-прежнему будет игнорироваться, что мы и хотим.
Спасибо за прочтение. Если есть вопросы, задавайте в комментариях. Следуйте за мной, чтобы получить больше советов по веб-разработке.
Щелкай по ним, не стесняйся ��
Вам также может понравиться:
Красивые стили пользовательских списков с использованием современного CSS 11 лучших бесплатных программных шрифтов 2020
Как сделать текст градиентом — простой CSS-трюк
C помощью двух свойств можно сделать градиентом любой текст на странице. А ещё заливка меняется в зависимости от ширины экрана!
Прежде чем разбираться, как сделать текст градиентом, посмотрим на результат. Вот что мы получим в итоге:
See the Pen CSS Gradient text effect by Pochemuta (@pochemuta) on CodePen.
Для удобства настроим внешний вид и поведение родительского элемента.
body
Затем стилизуем сам заголовок:
На всякий случай прописываем запасной цвет — background-color: #2AA5A0. Даже если градиент не сработает, текст не потеряется на фоне.
Вот так выглядит промежуточный результат:
На данный момент этот блок не поддерживается, но мы не забыли о нём! Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Теперь добавляем немного магии, чтобы получить градиентный текст:
Осталось понять, что происходит:
- свойство -webkit-background-clip: text оставляет градиент только под текстом;
- свойство -webkit-text-fill-color: transparent делает цвет текста прозрачным.
Фактически текст не становится градиентным. Однако через него теперь виден градиент, то есть задачу мы решили.
Вот ещё пример того, как можно использовать те же свойства. Раскомментируйте text-shadow, поменяйте radial-gradient на linear-gradient — эффекты будут заметно отличаться.
See the Pen CSS Gradient text effect-shadow by Pochemuta (@pochemuta) on CodePen.
Поддерживаются все современные браузеры. Исключение — Internet Explorer. Но пользоваться -webkit-text-fill-color нужно с осторожностью. Это нестандартное свойство, поведение которого может измениться в будущем.
На данный момент этот блок не поддерживается, но мы не забыли о нём! Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Больше интересных материалов:
- CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript
- Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице
- Как стать фронтенд-разработчиком в 2021 году: дорожная карта
Как легко создавать текстовые градиенты с помощью CSS
От автора: градиент — это переход цветов от начальной и конечной точке, а линейный градиент постепенно перемещается по прямой к другому цвету. Градиенты — это последняя тенденция в наши дни, и большинство веб-сайтов создаются с использованием градиентов. Благодаря свойству CSS background-clip очень легко реализовать градиенты для текста.
Синтаксис: как создавать текстовые градиенты
Во-первых, мы должны настроить шрифт, используя h1 или любой тег по нашему выбору, и поместить его в желаемое место. Я разместил свой шрифт в центре, используя flexbox.
Результат может быть достигнут с помощью:
1. Свойство linear-gradient()
Как объяснялось выше, это свойство создает для текстового блока фоновый линейный градиент. В CSS linear-gradient реализуется с помощью: