Sliding doors с помощью CSS

Reading time ~3 minutes

Просматривал один из видеокурсов по верстке сайта и разворачиванию его на CMS Joomla.

И столкнулся с такой вещью, как вложенность слоев. В видеокурсе был рассмотрен очень наглядный и интересный пример, как с помощью вложенных слоев можно создавать раздвижной фон сайта. Сперва было немного непонятно, но потом все встало на свои места. До этого момента, разбирая готовые примеры верстки, никогда не сталкивался с таким приемом.

Конечно, можно сохранить где-нибудь этот видеоурок и просматривать его, если забыл какие-то моменты. Но показанный в нем прием мне так понравился, что я решил описать его сам, своими собственными словами. Более того, благодаря этому приему для меня “открылась” возможность работы с вложенными слоями. Оказалось, это достаточно простое и эфективное решение, которое можно применять при верстке на практике. И, как мне кажется, данное решение является 100%-но кроссбраузерным.

И так. Имеется сайт с неоднородным фоном. Сайт планируется создавать с подвалом, прижатым книзу. Так как фон неоднородный, то необходимо сделать так, чтобы он подвижным. Он будет состоять из двух частей - верхней части, неподвижно закрепленной вверху страницы. И нижней части, которая будет всегда прижата книзу сайта и перемещаться вместе с подвалом вверх-вниз взависимости от величины контента в средней части:

Неоднородный фон страницы

Как будем поступать. Выделить и вырезать фон из psd-макета не составляет проблем. Затем сохраняем выделенный фон в виде jpeg-файла. После этого нужно разрезать полученную картинку пополам. В результате получиться две части одного фона - верхняя и нижняя. Верхнюю разместим вверху страницы и закрепим там. А нижнюю часть поместим вниз сайта и сделаем так, чтобы она была постоянно прижата к нему. И так, выделили, разрезали и сохранили. Все у нас получилось.

Теперь начинается самое интересное. Будем создавать каркас сайта и в нем реализовывать нашу задумку. Но для начала набросаем схему-каркас сайта. Она очень проста и создана мною в качестве примера:

Каркас будущей страницы

Смотрим и видим пять слоев на div’ах, которые вложены один в другой. Первый слой с классом .wrap является оберткой, на которую возложена задача центрирования страницы и задания ей определенной ширины. Второй слой с классом

1
.fon-bot
предназначен для размещения нем фонового изображения, в частности - нижней части фонового изображения сайта. В этот слой вложен еще один слой с классом
1
.fon-top
, в котором расположена в качестве фона верхняя часть картинки. И, наконец, самый последний и глубоковложенный слой - это будущий контент сайта с классом
1
.content
.

HTML-каркас создан. Теперь нужно прописать стили для него, чтобы он “ожил”. Делаю так:

Раздвижной фон страницы

Слой

1
.wrap
- тут все понятно без лишних слов. Далее - слой
1
.fon-bot
. В нем задается фоновая картинка, которая прижимается с помощью свойства
1
background-position
в правый нижний угол блока. Посмотрите на значения этого свойства:
1
100% 100%
. Это как раз и задает фоновому изображению положение в правом нижнем углу. Фактически, теперь она будет постоянно прижата книзу блока
1
.fon-bot
, что нам и требовалось.

С точностью до наоборот поступаем с блоком

1
.fon-top
. Также устанавливаем для него фоновое изображение, но позиционируем его в левом верхнем углу с помощью значений
1
0 0
. Теперь картинка будет всегда прижата кверху этого блока. Фактически, поставленная перед нами задача уже выполнена.

Но для наглядности в пример добавлен еще один, пятый блок

1
.content
. На практике он выполняет функцию контейнера для всего содержимого страницы сайта. Вставим внутрь этого слоя фоновое изображение и зададим ему минимальную высоту, которая превышает высоту блоков
1
.fon-top
и
1
.fon-bot
в сумме (точнее - высоту фоновых картинок обоих слоев). Также отцентруем фоновую картинку блока
1
.content
.

В итоге получим следующий результат (чтобы пример веселее смотрелся, в качестве фоновых картинок вставил красоток-сестренок Марианну и Камиллу Давалос):

Раздвижной фон страницы

При увеличении значения

1
min-height
слоя
1
.content
верхняя и нижняя картинки будут разъезжаться, а при уменьшении - съезжаться. Если не ошибаюсь, описанный мною способ называется методом “раздвижных дверей” (сам такой метод не изучал, но встречал в книгах по CSS такое упоминание.)

Полезным для себя вынес такой прием, как работа с неоднородным фоном страницы.

На этом все.


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024