Тень у резинового блока средствами 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>

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

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

Комментарии — 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 выполнить пропорциональный ресайз фоновой картинки, чтобы она всегда закрывала весь фон? Как здесь: www.alexandergusev.com

  12. john9, вот, я писал об этом:

    bitby.net/web/masshtabiru...i-rezinovyj-fon/

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting