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

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

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

Например:

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

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

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

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

Без JavaScript профессионалу никуда. Записывайтесь на интенсивный курс по JS.

Выполнить задание
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 блоку.
Теория Проверить Следующее задание
Идёт запись на курс Базовый JavaScript #10, который стартует 8 августа.

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

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

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

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