Наслоение картинок (колода карт)

Тема в разделе "Веб-дизайн", создана пользователем horpah, 29 сен 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. horpah

    horpah

    Регистр.:
    21 июн 2010
    Сообщения:
    200
    Симпатии:
    55
    Все хоть раз видели как рисуется колода карт: карта первая, из под нее виден краешек второй, из под 2-й - 3-я....
    Можно ли как-то средствами CSS (без программного кода) наслоить картинки друг на друга таким же образом, чтобы одна картинка наезжала на другую допустим на 20px??? Смещение "колоды" (по вертикали или горизонтали) значения не имеет. Здесь еще важен такой момент. Сейчас на стороне сервера рассчитывается top(left) для каждой картинки, что в купе с position:absolute дает нужный эффект, но хочу избавится вообще от всяких рассчетов как на стороне сервера, так и на стороне клиента(JS)
    Количество картинок (от 1 до 7).
    Если возможен такой вариант, подскажите пожалуйста.
     
  2. Kub

    Kub

    Регистр.:
    5 июн 2009
    Сообщения:
    607
    Симпатии:
    474
    В CSS укажите top(left) и затем z-index от 1 до 7 в том порядке в каком хотите их наслаивать друг на друга.
     
  3. horpah

    horpah

    Регистр.:
    21 июн 2010
    Сообщения:
    200
    Симпатии:
    55
    Порядок впринципе произвольный. Сейчас PHP выводит так:
    PHP:
    foreach($pics as $i=>$pic)
    {
      <
    div class="tpic{$i}"><img//// /></div>
      
    или
      
    <div class="lpic{$i}"><img//// /></div>
    }
    Ну и соответственно 7 классов .tpic0 - .tpic6 для вертикального и
    7 классов .lpic0 - .lpic6 для горизонтальноо наслоений
    в которых просто top(left) отличаются на ширину(длину) картинки(40 пикс.) минус степень нахлеста (10прикс) Примерно так
    position: absolute для всех, а дальше
    .top0{top: 0px;}
    .top1{top: 40-10=30px;}
    .top2{top: 30+40-10=60px;}
    .top3{top: 60+40-10=90px;}
    .....
    Т.е. это все через программный код + фикс. высота. Браузеру ведь как-то не нужно указывать, top для <div>'а, который идет за другим <div>'ом, он ее сам рассчитает основываясь на top+height+margin вышестоящих блоков. Так и здесь, нужно чтобы картинки шли одна под одной (как в обычно дивы без маргинов), только чуток нижестоящая наезжала на вышестоящую.
     
  4. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    Чтобы position:absolute было комфортно использовать веди отсчёт от блока relative, просто задаёшь ему координаты "0" и вставляешь как обычный div в любое место, а position:absolute будет уже внутри рассчитываться.

    Код:
    <div style="position: relative; top: 0px; left: 0px;">
        <div style="position: absolute; top: 0px; left: 0px; z-index: 1">
        карта 1
        </div>
        
        <div style="position: absolute; top: 0px; left: 5px; z-index: 2">
        карта 2
        </div>   
    </div>
     
  5. horpah

    horpah

    Регистр.:
    21 июн 2010
    Сообщения:
    200
    Симпатии:
    55
    Это все пронятно про relative. Суть в том чтобы не использовать значения ТОП/ЛЕФТ, для нижестоящей/правостоящей картинки.
    Пример:
    <div></div>
    <div></div>
    .......
    <div></div>
    Блоки будут идти аккуратно 3-й под 2-ым, 2-й под 1-ым с отступами определяемыми margin. Им не надо задавать ТОП, браузер сам рассчитывает местоположение нижестоящего, ориентируясь по вышестоящему и margin. Примерно этого и я хочу добиться, только чтобы нижестоящий чуть чуть наезжал на вышестоящий. А программно считать их, и каждому давать свой ТОП или класс - так это уже реализовано, эффект нужный есть. Если есть возможность - хочу без программного участия их так разместить (в т.ч. и участия JS).
     
  6. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    Единственные ещё вариант, это сделать таблицу и каждой ячейки присвоить фон нужной карты, ячейки сделать короче и визуально, карты будут накладываться друг на друга

    Код:
    <table border="0" cellpadding="0" cellspacing="0" width="18%" id="table1" height="202">
    	<tr>
    		<td>фон карты1</td>
    		<td>фон карты2</td>
    		<td>фон карты3</td>
    	</tr>
    </table>
    
    По другому, без позиционирования через css или JS и т.п. этого невозможно добиться.
     
  7. gruz222

    gruz222 Постоялец

    Регистр.:
    8 авг 2008
    Сообщения:
    62
    Симпатии:
    6
    можно сделать так

    <div id="cards">
    <span><img src="" />
    <span><img src="" />
    <span><img src="" /></span></span></span>
    </div>

    а в css

    #cards span{
    display:block;
    float:left;
    padding: 40px 0 0 40px; /* отступ от ячейки картинки */
    }

    #cards span img {
    position: relative;
    top:-20px;
    left:-20px;
    }

    типа такого,
    набросал на скорую руку, но должно работать
     
  8. horpah

    horpah

    Регистр.:
    21 июн 2010
    Сообщения:
    200
    Симпатии:
    55
    Всем спасибо кто пытался помочь. Задачу выполнил так:
    <div class"statusblock(t/l)">
    <div><img ..../></div>
    <div><img ..../></div>
    .....
    <div><img ..../></div>
    </div>
    .statusblockt div{ //для вертикального
    margin-top: -15px;
    }
    .statusblockl{ //для горизонтального
    margin-left: -15px;
    }
    Странно получилось, ведь это было первым решением, но хитрый огненный лис странно закешировал именно маргин этого блока, так как измененный цвет бекграунда он подхватил на раз. ))
     
Статус темы:
Закрыта.