Фоны, часть 1 / Эффекты с повторяющимся фоном [14/16]
×

Эффекты с повторяющимся фоном [14/16]

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

Например:

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

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

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

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


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Эффекты с повторяющимся фоном</title> </head> <body> <div class="block block1"></div> <div class="block block2"></div> <div class="block block3"></div> </body> </html>
CSS
body { padding-top: 40px; } .block { height: 70px; margin: 30px 50px; background-color: #3498db; background-repeat: repeat-x; border-radius: 5px; box-shadow: 1px 1px 3px #999999; } .block1 { background-position: -30px 30px; } .block2 { background-position: 0 0; } .block3 { background-position: 0 100%; }
HTML Academy

Задайте повторяющиеся по горизонтали фоновые картинки:

  1. /assets/course13/stitch.png — 1 блоку,
  2. /assets/course13/zigzag.png — 2 блоку,
  3. /assets/course13/shadow.png — 3 блоку.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.