LabEx
ВходРегистрация

Создание текста с градиентом с использованием CSS

Beginner

This tutorial is from open-source community. Access the source code

Введение

В этом практическом занятии мы изучим концепцию текста с градиентом в CSS. Целью этого практического занятия является то, чтобы вы поняли, как создавать текст с градиентом с использованием функции linear-gradient(), а также как использовать свойства webkit-text-fill-color и webkit-background-clip для заполнения текста градиентным фоном. В конце этого практического занятия вы сможете создавать визуально привлекательный текст с градиентом, который может улучшить дизайн ваших веб-страниц.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Текст с градиентом

В ВМ уже предоставлены index.html и style.css.

Для придания тексту градиентного цвета вы можете использовать свойства CSS. Во - первых, используйте свойство background со значением linear-gradient() для задания градиентного фона элементу с текстом. Затем, используйте webkit-text-fill-color: transparent, чтобы заполнить текст прозрачным цветом. Наконец, используйте webkit-background-clip: text, чтобы обрезать фон по тексту и заполнить текст градиентным фоном в качестве цвета. Вот пример фрагмента кода:

<p class="gradient-text">Gradient text</p>

.gradient-text {
  background: linear-gradient(#70d6ff, #00072d);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 32px;
}

Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб - сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб - страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по тексту с градиентом. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.