Интересный эффект объёма на экране
Создать эффект пространства, объема на на листе бумаге доступно всем кто “проходил” геометрию в школе. Но как такое “начертить” на экране компьютера до недавнего времени считалось практически невозможным. Но как только как в CSS появилось правило z-индекса, третьей пространственной оси это стало возможным. А с добавлением теней и градиента эффект объема только усилиться.
Итак z-индекс.
Этот эффект знаком каждому кто хоть держал в руках карты. Раскладывая карты по мастям и старшинству, чередуя для удобства “черные” и “красные” масти, для удобства подкладывал одну карты под другую. Да же на картинке, как “младшие” карты уходят в глубь. Расположение карт веером несколько слаживает эффект обычно достигаемый z – индексом, но в общем и целом наглядно ее демонтирует. И теперь стоит перейти к практическим примерам применения z – индекса. Заранее следует сказать что для возможности его использования к блоках, где будут находиться находиться изображения необходимо применить правило “position: relative;” Итак самый простейший пример – применения z-индекса к пяти квадратным блокам различных оттенков зеленого цвета,
See the Pen
тень1 by Аарон Интман (@aeafjusm)
on CodePen.
Такое расположение блоков обеспечивается прежде всего за счет различных значений z-index. Чем оно меньше, тем блок будет расположен “дальше”- у блока с цифрой 1 минимальное значение z-index:1;
. Соответственное у блока с цифрой 5 максимальное для данного примера значение z-index:5;
и он расположен “ближе.” Наложение блоков определяют значения внешних отступов – в частности для блоков с цифрой 2 margin: -70px 0px 0px 30px;
для карт https://webcode.tools/generators/css/rotate