Книга: CSS3 для веб-дизайнеров
Старый способ: дополнительная разметка
Старый способ: дополнительная разметка
Как это сделать? В начале 2008 года в статье для Think Vitamin Пол Аннетт написал о приемах, которые он использовал для создания эффекта параллакса именно на сайте Silverback (http://bkaprt.com/css3/10/)[13].
Чтобы наслоить отдельные PNG одну поверх другой, нужно создать как минимум три доступных элемента блочного уровня. Требуется два дополнительных оберточных слоя, чтобы расположить фоновое изображение на элементах body, #midground, #foreground.
Разметка будет выглядеть приблизительно так:
<body>
<div>
<div>
<!– page content here – >
</div>
</div>
</body>
CSS-код для размещения трех изображений с различными положениями по горизонтали выглядит так:
body {
background: url(vines-back.png) repeat-x 20% 0;
}
#midground {
background: url(vines-mid.png) repeat-x 40% 0;
}
#foreground {
background: url(vines-front.png) repeat-x 150% 0;
}
Конечно, это решение работает как следует. Но оно значительно упрощается с использованием синтаксиса множественных фонов, которые приходят вместе с CSS3.
Посмотрим, как множественные фоны применяются к содержимому сайта с Луной и как создается более простой эффект параллакса для тех, кто может испытать его.
Оглавление книги
- ТЕКСТОВАЯ РАЗМЕТКА
- Три способа кодирования звука
- Дополнительная информация
- Глава 3 Способы монетизации
- Способы «запуска» слухов
- Есть ли быстрый способ доступа к папкам?
- Часть II Изменение способов ведения бизнеса
- Мне требуется информация с сайта, который я посещал позавчера, но я не помню его адрес. Есть ли способ его узнать?
- Новый винчестер издает странный звук во время работы. Он не похож на тот, с которым работал старый диск. Это нормально и...
- Старый монитор начал издавать высокий звук, от которого болит голова. Как это прекратить?
- Презентация: 30 минут, которые способны изменить ваш бизнес
- Надо уменьшить размер ста изображений. Не делать же это вручную. Есть ли способ автоматизировать процесс?