2.9. Урок 8: Шари в css.

У цьому уроці , поговоримо про таке поняття як шар в CSS . Для тих , хто працював з графічними редакторами , це поняття має бути знайома , а для решти постараюся пояснити .

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

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

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

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

. desatka_buba {

position : absolute ;

left : 200px ;

top : 200px ;

z - index : 1 ;

}

. valet_buba {

position : absolute ;

left : 215px ;

top : 215px ;

z - index : 2 ;

}

. dama_buba {

position : absolute ;

left : 230px ;

top : 230px ;

z - index : 3 ;

}

. korol_buba {

position : absolute ;

left : 245px ;

top : 245px ;

z - index : 4 ;

}

. tuz_bubna {

position : absolute ;

left : 260px ;

top : 260px ;

z - index : 5 ;

}

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

<img src="10buba.gif" class="10_buba"> ну і так далі .

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