Трёхмерные страницы с помощью CSS.

Мы привыкли задавать координаты в двух осях X и Y, но с помощью CSS можно задать и третью координату, по оси Z. Поэтому я называю эти страницы трёхмерные. Это свойство z-index.

Свойство z-index схоже со слоями в графических редакторах. Так основной слой будет иметь координату 0. Слой номер 1, будет распологаться выше, слой 2 будет выше чем слой 1 и т.д.

Свойство z-index

С помощью этого свойства и задаются слои (координаты) на странице.

Вот так можно сделать с помощью z-index:

Вот так будет выглядеть CSS файл:

body{
background: #775B06;}

.dama{
position: absolute;
top: 150px;
left: 150px;
z-index: 1; }

.king{
position: absolute;
top: 200px;
left: 210px;
z-index: 2; }

.a{
position: absolute;
top: 250px;
left: 270px;
z-index: 3; }

А в HTML добавим :

<div><img src="/dama.jpg" class="dama"></div>
<div><img src="/king.jpg" class="king"></div>
<div><img src="/a.jpg" class="a"></div>

Ничего сложного. С помощью z-index можно накладывать текст на картинки или наоборот. Можно делать текст с эффектом тени, в общем на сколько хватит фантазии.

Наверное хватит. Тренируйтесь, делайте свои странички, применяйте знания по CSS.

Перейти к: Полезные советы по CSS