Декоративные узоры с псевдоэлементами
Создавайте декоративные фигуры, разделители и наложения с помощью ::before и ::after без дополнительного HTML.
«Декоративные узоры с псевдоэлементами» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Философия оформления только средствами CSS
Псевдоэлементы позволяют создавать сложные декоративные эффекты без дополнительного HTML. Цель — ни одного элемента div для оформления: все визуальные украшения должны находиться в CSS.
Треугольник на CSS
Создавайте треугольники с помощью элементов нулевого размера и прозрачных границ:
<div class="triangle"></div>Стрелка всплывающей подсказки
Стрелка всплывающей подсказки с помощью ::before:
<div class="tooltip" style="position:relative;display:inline-block;background:#333;color:#fff;padding:6px 12px;border-radius:4px;margin-top:16px;">Tooltip text</div>Диагональный разделитель разделов
Наклонный разделитель разделов с использованием skew или clip-path на ::after:
<div class="section" style="background:linear-gradient(135deg,#4f8cff,#7ee787);height:120px;position:relative;"></div>Декоративные подчёркивания
Анимированные эффекты подчёркивания с помощью ::after:
<a href="#">Hover me (underline animates in on :hover)</a>Значок с помощью ::after
Наложенный значок уведомления без дополнительных элементов HTML:
<span class="nav-icon" data-count="3" style="position:relative;display:inline-block;font-size:1.5rem;margin:16px;">🔔</span>Градиентное наложение на изображения
Тёмное градиентное наложение на изображения для лучшей читаемости текста:
<div class="card-image" style="width:100%;height:160px;background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>Галочка с помощью ::before
Пользовательская галочка флажка, нарисованная с помощью границ CSS:
<div class="custom-check" style="width:20px;height:20px;background:#34c759;border-radius:4px;padding:2px;"></div>Лента-баннер
Эффект ленты на карточках с использованием ::before и отрицательного позиционирования:
<div class="card featured" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;width:200px;">Featured product</div>Эффект мерцания при загрузке
Мерцающий каркас загрузки на CSS без JavaScript:
<div class="skeleton" style="width:100%;height:60px;border-radius:6px;"></div>Быстрая проверка
Какая комбинация свойств создаёт треугольник, направленный вверх, только средствами CSS?
Повторение
Псевдоэлементы позволяют создавать сложные декоративные узоры без дополнительного HTML: стрелки, наложения, анимированные подчёркивания, значки, ленты и эффекты мерцания. Всё это основано на сочетании content: "", position: absolute и творческом использовании границ, clip-path и преобразований.
Часто задаваемые вопросы
Урок «Декоративные узоры с псевдоэлементами» бесплатный?
Да — полный текст урока «Декоративные узоры с псевдоэлементами» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Декоративные узоры с псевдоэлементами»?
Создавайте декоративные фигуры, разделители и наложения с помощью ::before и ::after без дополнительного HTML. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Декоративные узоры с псевдоэлементами»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Содержимое ::before и ::after
- ::placeholder ::selection и ::marker
- Счётчики CSS с помощью ::before
- Декоративные узоры с псевдоэлементами