• Теория
  • Теория

Эффекты с повторяющимся фоном

Повторяющийся фон, тот у которого repeat, repeat-x или repeat-y, часто используется для создания интересных декоративных эффектов.

Например:

  • стежки;
  • зазубренные края;
  • градиенты и тени.

Да, сейчас уже градиенты и тени можно делать с помощью CSS. Но иногда, когда тень или градиент достаточно сложные, проще использовать полупрозрачный PNG.

Самое главное при создании таких эффектов — выбрать картинку с нужным периодом. Она может быть очень маленькой и даст существенную экономию веса страницы.

Попрактикуемся. Только, пожалуйста, изменяйте режим повторения после того, как пропишете фоновые изображения. Так будет нагляднее.

Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик». Всего от 6080 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Фоны. Знакомство» тренажёра «Базовые механики стилизации» можно после регистрации и оформления подписки.