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

Пятница, Апрель 10, 2009 7:33 WebMast
Рубрики: web-design

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>

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

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

Вы можете оставить ответ, или trackback с Вашего собственного сайта.
Теги: , , , , ,

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

  1. 40a сообщил:

    Апрель 10th, 2009 20:24

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


  2. vanoID сообщил:

    Апрель 10th, 2009 22:21

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


  3. WebMast сообщил:

    Апрель 11th, 2009 7:44

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


  4. egoholic сообщил:

    Апрель 11th, 2009 13:48

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

    ПС у меня аська поменялась...


  5. WebMast сообщил:

    Апрель 12th, 2009 18:45

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


  6. 40a сообщил:

    Апрель 14th, 2009 20:11

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


  7. WebMast сообщил:

    Апрель 15th, 2009 11:07

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


  8. 40a сообщил:

    Апрель 15th, 2009 19:38

    Для корректного отображения в IE надо указать размеры шрифта и line-height и добавить к

    .top {zoom:1;}


  9. 40a сообщил:

    Апрель 15th, 2009 19:42

    или

    .top{height:1%;}


  10. Andre сообщил:

    Октябрь 10th, 2009 8:23

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


Оставить комментарий

Я не робот!

« Скрипт времени/часов на JavaScript
План «Заработать Деньги» »