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

Введение

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/BasicStylingGroup -.-> css/fonts("Fonts") css/BasicStylingGroup -.-> css/text_styling("Text Styling") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35204{{"Создание текста с градиентом с использованием CSS"}} css/colors -.-> lab-35204{{"Создание текста с градиентом с использованием CSS"}} css/fonts -.-> lab-35204{{"Создание текста с градиентом с использованием CSS"}} css/text_styling -.-> lab-35204{{"Создание текста с градиентом с использованием CSS"}} css/backgrounds -.-> lab-35204{{"Создание текста с градиентом с использованием CSS"}} end

В ВМ уже предоставлены 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, чтобы улучшить свои навыки.