Эффект гравюровки текста | Техники оформления CSS

Введение

В этом практическом занятии мы научимся создавать эффект "щелины" или гравюры текста с использованием CSS. Этот эффект может добавить уникальный и стильный оттенок к вашим веб-дизайнам, и, удивительно, его достичь довольно просто. Изменяя тень, фон и цвет текста, мы можем создать иллюзию того, что текст вырезан в фон. Присоединяйтесь к нам, когда мы исследуем эту интересную и творческую технику!

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

Skills Graph

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

Гравюровка текста

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

Для создания эффекта "щелины" или гравюры текста на фоне используйте следующие свойства CSS:

.etched-text {
  text-shadow: 0 2px white;
  font-size: 1.5rem;
  font-weight: bold;
  color: #b8bec5;
}

Свойство text-shadow создает белую тень, смещенную на 0px по горизонтали и на 2px по вертикали от исходной позиции. Убедитесь, что фон темнее тени, чтобы эффект работал. Кроме того, цвет текста должен быть несколько затухлым, чтобы выглядел, как если бы он был вырезан из фона. Наконец, примените класс etched-text к нужному HTML-элементу, например, абзацу, чтобы достичь эффекта.

<p class="etched-text">I appear etched into the background.</p>

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

Резюме

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