Тень у резинового блока средствами CSS, HTML

css_html_block

Недавно задался вопросом, как сделать тень у резинового блока. Думаете все просто? Нарисовал картиноки все? Нет. Блок резиновый, значит тень тоже резиновая.

Все что мне пригодилось, это photoshop, редактор, браузер, руки и голова. Надеюсь у вас это все есть..

Так как я верстальщик, а не дизайнер, я не рисовал тень. Мне пришлось ее нарезать. Стал еще один вопрос, как верстать? Заказчик говорит дивами.. Ну я и начал делать. Сейчас покажу вам все свои варианты.

1. Слоями.

Вам пригодятся следующие картинки.
1, 2, 3, 4

.roundbox-tr {
margin:15px auto;
padding:0;
background:url(«roundbox_tr.gif») no-repeat right top;
width: 90%;
}/* top-left corner and left side */
.roundbox-tl {
margin:0;
padding:0;
background: url(«roundbox_tl.gif») no-repeat left top;
}

/* bottom-right corner and bottom side */
.roundbox-br {
margin:0;
padding:0;
background: url(«roundbox_br.gif») no-repeat right bottom;
}

/* bottom-left corner */
.roundbox-bl {
margin:0;
padding:0;
background: url(«roundbox_bl.gif») no-repeat left bottom;
}

/* content div, it could be omitted (the content going into «roundbox-bl» but I felt that alinging the content was easier
with «roundbox-content» in place */
.roundbox-content {
margin:0;
padding:2.5em 3.5em;
}

.roundbox-content p {
margin:0;
padding:0;
line-height:1.6;
}
/* roundbox CSS ends here */

<div class=»roundbox-tr»>
<div class=»roundbox-tl»>
<div class=»roundbox-br»>
<div class=»roundbox-bl»>
<div class=»roundbox-content»>
<p>Текст внутри блока</p>
</div>
</div>
</div>
</div>
</div>

Вот пример. В примере вы не увидите теней, однако картинки можно заменить на другие, с тенями.

У этого варианта есть недостатки. Грузить придется большие картинки. Либо устанавливать максимальную ширину и высоту. Не считаю этот метод идеальным..

2. Слоями с абсолютным позитионированием.

Здесь понадобится 8 картинок. Следовательно много кода. Это большой минус..
1, 2, 3, 4, 5, 6, 7, 8

#block{
position:relative;
margin:auto;
width:50%;
}
.t-l{
height:5px;width:5px;
position:absolute;left:0;top:0;
background:url(‘t-l.png’) no-repeat top left;
}
.t-r{
height:5px;width:5px;
position:absolute;right:0;top:0;
background:url(‘t-r.png’) no-repeat top right;
}
.b-l{
height:5px;width:5px;
position:absolute;left:0;bottom:0;
background:url(‘b-l.png’) no-repeat bottom left;
}
.b-r{
height:5px;width:5px;
position:absolute;right:0;bottom:0;
background:url(‘b-r.png’) no-repeat bottom right;
}
.top{
background:url(‘bg-t.png’) repeat-x top;
}
.top{
background:url(‘bg-t.png’) repeat-x top;
}
.top{
background:url(‘bg-t.png’) repeat-x top;
}
.bottom{
background:url(‘bg-b.png’) repeat-x bottom;
}
.left{
background:url(‘bg-l.png’) repeat-y left top;
}
.right{
background:url(‘bg-r.png’) repeat-y right top;
padding:8px;
}
<div id=»block»>
<div class=»t-l»></div>
<div class=»t-r»></div>
<div class=»b-l»></div>
<div class=»b-r»></div>
<div class=»top»>
<div class=»bottom»>
<div class=»left»>
<div class=»right»>
Текст внутри блока!
</div>
</div>
</div>
</div>
</div>

Кода много. Самый главный минус. Еще, при некоторых случаях, код некорректно отображается в IE.
Смотреть пример.

3. Таблица.

Таблицы. На таблицах можно смело делать, они всегда будут правильно передавать изображение блока во всех браузерах.

Начнем. При таблицном вариант также придется использовать 8 картинок.

#block{
margin:auto;
width:50%;
}
.t-l{
height:5px;width:5px;
background:url(‘t-l.png’) no-repeat top left;
}
.t-r{
height:5px;width:5px;
background:url(‘t-r.png’) no-repeat top right;
}
.b-l{
height:5px;width:5px;
background:url(‘b-l.png’) no-repeat bottom left;
}
.b-r{
height:5px;width:5px;
background:url(‘b-r.png’) no-repeat bottom right;
}
.top{
background:url(‘bg-t.png’) repeat-x;
}
.bottom{
background:url(‘bg-b.png’) repeat-x;
}
.left{
background:url(‘bg-l.png’) repeat-y;
}
.right{
background:url(‘bg-r.png’) repeat-y;
}
.text{
padding:8px;
}
<table id=»block» border=»0″ cellpadding=»0″ cellspacing=»0″>
<tr>
<td class=»t-l»></td>
<td class=»top»></td>
<td class=»t-r»></td>
</tr>
<tr>
<td class=»left»></td>
<td class=»text»>
Текст внутри блока.
</td>
<td class=»right»></td>
</tr>
<tr>
<td class=»b-l»></td>
<td class=»bottom»></td>
<td class=»b-r»></td>
</tr>
</table>

Таблицами кода получилось немного меньше. И этот вариант работает во всех браузерах..
Посмотреть пример.

Каким примером пользоваться решаете вы сами. Существует много вариантов решения таких проблем. Но каждый для своего случая. Спасибо за внимание..

Комментарии — 12 комментариев

  1. #750 40a в 20:24, 10 апреля 2009:

    Ответить | Цитировать

    Посмотрите примеры здесь вообще без картинок — cssplay.co.uk

  2. #751 vanoID в 22:21, 10 апреля 2009:

    Ответить | Цитировать

    тень без картинок?

  3. #754 WebMast в 7:44, 11 апреля 2009:

    Ответить | Цитировать

    Сравни нашу тень и их).

  4. #757 egoholic в 13:48, 11 апреля 2009:

    Ответить | Цитировать

    Сложная статейка вышла… Спасибо! Реально полезная инфа.
    ПС у меня аська поменялась…

  5. #774 WebMast в 18:45, 12 апреля 2009:

    Ответить | Цитировать

    Egoholic, напиши мне с нового номера аськи. Когда напишешь этот пост удалю..

  6. #799 40a в 20:11, 14 апреля 2009:

    Ответить | Цитировать

    Уж очень много картинок. Сделайте спрайты, тогда будет 3 картинки!

  7. #808 WebMast в 11:07, 15 апреля 2009:

    Ответить | Цитировать

    Ох.. Забыл совсем про них.. Точно. Спрайты хорошая замена.. Спасибо что напомнил =).

  8. #821 40a в 19:38, 15 апреля 2009:

    Ответить | Цитировать

    Для корректного отображения в IE надо указать размеры шрифта и line-height и добавить к
    .top {zoom:1;}

  9. #822 40a в 19:42, 15 апреля 2009:

    Ответить | Цитировать

    или
    .top{height:1%;}

  10. #6879 Andre в 8:23, 10 октября 2009:

    Ответить | Цитировать

    Большое тебе спасибо! Замучился искать нормальный способ…

  11. #9926 john9 в 10:55, 10 августа 2010:

    Ответить | Цитировать

    Возможно ли на чистом CSS выполнить пропорциональный ресайз фоновой картинки, чтобы она всегда закрывала весь фон? Как здесь: http://www.alexandergusev.com/

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting