Создание css тени для боксов
В этой статье будет показан способ, как сделать тень для бокса используя три изображения для этого.
Этот метод основан на вложенности контейнеров и на css свойстве
background
В конце статьи мы получим необходимый html и css для создания следующего эффекта тени в боксах:
css тень бокса
Содержание бокса
Используемые изображения
Для тени справа
right_shadow.jpg
Для тени справа в нижнем углу
right_bottom_shadow.jpg
Для тени снизу
bottom_shadow.jpg
Об изображениях
right_shadow.jpg - будет распологаться справа, высота блока должна быть не более высоты этого изображения.
right_bottom_shadow.jpg - используется для скругления тени справа внизу.
bottom_shadow.jpg - будет распологаться внизу бокса и использоваться в качестве тени снизу.
Зачем большие изображения?
Если вы загрузите изображения к себе на компьютер, то увидите, что они по размерам больше, чем показано тут, в
статье они представлены меньшими размерами для того, чтоб не портить внешний вид статьи. Скорей всего у вас возникнет вопрос - зачем же используются
такие большие изображения? Этому есть простое обьяснение:
Такую тень можно сделать используя и маленькие изображения, но тогда вам прийдется использовать не 3, а 4 контейнера для этого. Поэтому экономя контейнеры
нам приходится использовать большие изображения потому, что в одном изображении
right_shadow.jpg вложено 2:
- для правого верхнего угла.
- для правой стороны бокса.
Контейнеры для создания тени
Для создания css тени для бокса мы будем использовать 4 контейнера
<div>:
3 для создания эффекта тени и 1 для текста. Для удобства названия классов для контейнеров мы будем использовать такие же, как и для изображений.
<div class=
"right_shadow">
<div class=
"bottom_shadow">
<div class=
"right_bottom_shadow">
<div class=
"text-box">
<h3>css тень бокса</h3>
<p>Содержание бокса</p>
</div>
</div>
</div>
</div>
css свойства для фона
Дальше показаны стили, которые будут использоваться для созданной выше html структуры.
right_shadow {
background:url('/images/right_shadow.jpg') 100% 0 no-repeat;
width:25em;
}
bottom_shadow {
background:url('/images/bottom_shadow.jpg') 0 100% no-repeat;
}
right_bottom_shadow {
background:url('/images/right_bottom_shadow.jpg') 100% 100% no-repeat;
padding:0 27px 27px 0;
}
text-box {
background:#ffc;
border:1px solid #333;
}
Помимо стилей для создание эффекта тени здесь мы еще определили цвет фоновой заливки для содержимого бокса, а также указали отступы справа и снизу, чтоб текст не наезжал на тень.
Оформление текста
В принципе свойства для бокса с тенью уже определены, но я думаю, что необходимо еще добавить стили для оформления содержания бокса.
.right_shadow {
background:url('/images/right_shadow.jpg') 100% 0 no-repeat;
width:25em;
}
.bottom_shadow {
background:url('/images/bottom_shadow.jpg') 0 100% no-repeat;
}
.right_bottom_shadow {
background:url('/images/right_bottom_shadow.jpg') 100% 100% no-repeat;
padding:0 27px 27px 0;
}
.text-box {
background:#ffc;
border:1px solid #333;
}
.text-box h3 {
text-align:center;
margin:0.5em 0;
}
.text-box p {
margin-bottom:0;
font::0.8em Georgia, "Times New Roman", Times, serif;
padding:0 10px 10px;
text-alig:justify;
}
Оригинал: Sombras em boxes
Добавить комментарий
