Недавно задался вопросом, как сделать тень у резинового блока. Думаете все просто? Нарисовал картиноки все? Нет. Блок резиновый, значит тень тоже резиновая.
Все что мне пригодилось, это photoshop, редактор, браузер, руки и голова. Надеюсь у вас это все есть...
Так как я верстальщик, а не дизайнер, я не рисовал тень. Мне пришлось ее нарезать. Стал еще один вопрос, как верстать? Заказчик говорит дивами... Ну я и начал делать. Сейчас покажу вам все свои варианты.
1. Слоями.
Вам пригодятся следующие картинки.
1, 2, 3, 4
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-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
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 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 картинок.
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;
}
<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>
Таблицами кода получилось немного меньше. И этот вариант работает во всех браузерах...
Посмотреть пример.
Каким примером пользоваться решаете вы сами. Существует много вариантов решения таких проблем. Но каждый для своего случая. Спасибо за внимание...
Посмотрите примеры здесь вообще без картинок —
тень без картинок?
Сравни нашу тень и их).
Сложная статейка вышла... Спасибо! Реально полезная инфа.
ПС у меня аська поменялась...
Egoholic, напиши мне с нового номера аськи. Когда напишешь этот пост удалю...
Уж очень много картинок. Сделайте спрайты, тогда будет 3 картинки!
Ох... Забыл совсем про них... Точно. Спрайты хорошая замена... Спасибо что напомнил =).
Для корректного отображения в IE надо указать размеры шрифта и line-height и добавить к
.top {zoom:1;}
или
.top{height:1%;}
Большое тебе спасибо! Замучился искать нормальный способ...
Возможно ли на чистом CSS выполнить пропорциональный ресайз фоновой картинки, чтобы она всегда закрывала весь фон? Как здесь:
john9, вот, я писал об этом:
bitby.net/web/masshtabiru...i-rezinovyj-fon/