Создать эффект пространства, объема на на листе бумаге доступно всем кто «проходил» геометрию в школе. Но как такое «начертить» на экране компьютера до недавнего времени считалось практически невозможным. Но как только как в CSS появилось правило z-индекса, третьей пространственной оси это стало возможным. А с добавлением теней и градиента эффект объема только усилиться.

Итак 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

Аватар

от intman

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *