Недавно задался вопросом, как сделать тень у резинового блока. Думаете все просто? Нарисовал картиноки все? Нет. Блок резиновый, значит тень тоже резиновая.
Все что мне пригодилось, это 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>
Таблицами кода получилось немного меньше. И этот вариант работает во всех браузерах..
Посмотреть пример.
Каким примером пользоваться решаете вы сами. Существует много вариантов решения таких проблем. Но каждый для своего случая. Спасибо за внимание..
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
ПС у меня аська поменялась…
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
.top {zoom:1;}
Ответить | Цитировать
.top{height:1%;}
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
https://bitby.net/web/masshtabiruemaya-kartinka-na-fone-sajta-ili-rezinovyj-fon/