Помогите создать тень

Тема в разделе "Веб-дизайн", создана пользователем uNknownMark, 3 дек 2009.

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

    uNknownMark

    Регистр.:
    22 сен 2007
    Сообщения:
    393
    Симпатии:
    169
    Помогите, пожалуйста создать страницу так как на рисунке, точнее помогите сделать тень снизу и справа.
    Заранее спасибо.
     

    Вложения:

    • Page1.jpg
      Page1.jpg
      Размер файла:
      25,1 КБ
      Просмотров:
      22
  2. gres_18

    gres_18 Pythonобандерівець®

    Регистр.:
    26 апр 2009
    Сообщения:
    407
    Симпатии:
    206
    http://study.krr.ru/content_t_246.htm
    Это поможет тень нарисовать, или надо еще и сверстать?
     
    uNknownMark нравится это.
  3. uNknownMark

    uNknownMark

    Регистр.:
    22 сен 2007
    Сообщения:
    393
    Симпатии:
    169
    Спасибо, сам буду разбираться )
     
  4. t3s

    t3s

    Регистр.:
    16 фев 2008
    Сообщения:
    719
    Симпатии:
    290
  5. troop3r

    troop3r Постоялец

    Регистр.:
    14 ноя 2009
    Сообщения:
    138
    Симпатии:
    22
    значит так:
    1) делаем основной блок-обертку, выравниваем его по центру
    #wrapper { width: 438px; margin: 0 auto; }
    <div id="wrapper"></div>

    2) задаем этому блоку белый фон и картинку, которую будем тянуть по высоте
    #wrapper { width: 438px; background: #fff url(11.png); margin: 0 auto; }

    3) добавляем блок и размещаем в нем верхнюю тень
    #shadow-top { height: 24px; background: url(22.png); }
    <div id="wrapper">
    <div id="shadow-top"></div>
    </div>

    4) создаем блок для контента
    #content { padding: 50px; }
    <div id="wrapper">
    <div id="shadow-top"></div>
    <div id="content">bla-bla-bla</div>
    </div>

    5) добавляем блок с нижней тенью
    #shadow-bottom { height: 35px; background: url(333.png); }
    <div id="wrapper">
    <div id="shadow-top"></div>
    <div id="content">bla-bla-bla</div>
    <div id="shadow-bottom"></div>
    </div>

    6)и на последок добавляем фон для body (серый цвет бокам белого блока:(
    body { background: #e4e4e4; }

    7) Проверяем и заливаем на сайт.
     

    Вложения:

    • 11.png
      11.png
      Размер файла:
      214 байт
      Просмотров:
      7
    • 22.png
      22.png
      Размер файла:
      721 байт
      Просмотров:
      3
    • 333.png
      333.png
      Размер файла:
      1.014 байт
      Просмотров:
      4
Статус темы:
Закрыта.