Урок 15 шари в css

Створюючи блок в CSS, ми завжди чітко ставимо його параметри, а також позиціонуємо його в певне місце на екрані. Таким чином, будь-який блок має дві координати X і Y, які визначають положення блоку на площині екрану. Але в CSS є ще і третя, просторова координата Z, яка визначає номер шару, на якому знаходиться блок. Тобто чим більше координата Z, тим вище цей шар знаходиться по відношенню до решти. Наприклад шар з номером 2 буде ближче розташований до користувача, хто переглядає вашу сторінку, ніж шар з номером 1. А шар з номером 1, буде розташовуватися вище, ніж основний код сторінки.

За створення шару в CSS відповідає властивість Z-index. а прийняті ним значення, вказують номер шару.

Наприклад, можна зробити з карт знамениту комбінацію Royal Flash.

Як бачите, кожна карта, трохи перекриває іншу. Ось як це виглядає в коді:

Ну а в html коді. просто привласнюєте малюнків відповідні стилі, типу:
ну і так далі, ви зрозуміли.

Якщо гарненько розібратися з цим простим методом, можна створювати досить пристойні речі. Наприклад розміщувати текст над зображенням, або навпаки, створювати красиві заголовки. наприклад з ефектом тіні, також якщо глибше вивчити шари, можна створювати випадають меню. і багато іншого.

У наступному уроці, я закінчу підручник, і дам деякі поради, щодо подальшого навчання.

↑ Вгору ↑

Є питання? Отримай відповідь на форумі ПІДТРИМКИ

Схожі статті