CSS Shadows все четыре стороны div
Я хочу добиться этого в CSS, а не в CSS3, так как хочу, чтобы это поддерживалось всеми браузерами.
т.е. div, содержащий содержимое, с тенями на каждой стороне. Верхняя область будет использоваться для навигации. Я искал учебники, но пока безрезультатно. Помогите!
5 ответов
Как сказал Ventus, невозможно использовать тени css в ie (только в ie9). Но вы можете использовать shadowOn. Это отличный плагин jquery и очень простой в использовании. С ним у вас будет кросс-браузерная совместимость.
Вы можете сделать это с тремя div, предполагая, что все они имеют одинаковую (фиксированную) ширину:
<div class='top'>
</div>
<div class='middle'>
<p>Hello World!</p>
</div>
<div class='bottom'>
</div>
.top{
background:url('top.png');
height:20px;
width:800px;
}
.middle{
background:url('middle.png') repeat-y;
width:800px;
}
.bottom{
background:url('bottom.png');
height:20px;
width:800px;
}
Вы должны создать несколько образов. Один для левой стороны. Один за право. Один для низа и т. Д. А затем создайте несколько div и установите фон для каждого из них.
В качестве альтернативы вы можете создать одно большое изображение , и используйте это как фон для всей области содержимого; затем жестко запрограммируйте положения и размеры содержащихся элементов.
CSS3pie - это инструмент, позволяющий использовать некоторые свойства css3 в IE.
То, что вы пытаетесь сделать, - это довольно широко распространенный css3 в новых браузерах и очень хорошо (и легко) эмулируемый в IE с помощью файла .htc, который вы можете скачать оттуда.
Что касается разметки, я вижу всего 2 элемента, например, верхний плавающий. Придется поиграться с z-index, чтобы скрыть лишние тени. На этом сайте также есть очень похожий эффект, вы сможете адаптировать его под свои нужды.