css рамка для изображения
В этой статье я покажу способ, как можно создать
css рамку обрамляющюю фотографию или другое изображение.
Здесь будет описана возможность манипулирования свойством
border.
Структура css рамки
Для создания рамки вокруг изображения будут использоваться стандартные css свойства:
border padding и
background.
Изображение для обрамления
В качестве изображения, для которого я буду создавать рамку, я выбрал такое:
Для начала, создадим css класс
.cont-image для контейнера
<div>, на который установим
исходное изображение в качестве фона, а также его размеры и установим
простую css рамку в 4px.
.cont-image {
width:350px;
height:275px;
border:4px solid #999;
background:transparent url(/foto-sss-mini.jpg);
}
<div class="cont-image">
</div>
Что из этого вышло, вы можете увидеть ниже.
Добавляем вторую рамку
Чтоб добавить еще одну рамку, нам нужно добавить еще один контейнер и в него поместить ранее созданный. Далее показаны css стили для этого и html структура.
.cont-image {
width:150px;
height:275px;
border:4px solid #999;
background:transparent url(/foto-sss-mini.jpg);
}
.border-image-2 {
width:158px;/*150+4+4(borders)*/
border:8px inset #5f6632;
padding:15px;
background:#b1b1c3;
}
<div class=
"border-image-2">
<div class="cont-image">
</div>
</div>
Что из этого вышло, вы можете увидеть ниже.
Добавляем фоновое изображение для css рамки
В этой части мы добавим еще один контейнер в структуру, для которого пропишем фоновое изображение. Это фоновое изображение будет видно там, где установлены отступы.
.cont-image {
width:150px;
height:275px;
border:4px solid #999;
background:transparent url(/foto-sss-mini.jpg);
}
.border-image-2 {
width:158px;/*150+4+4(borders)*/
border:8px inset #5f6632;
padding:15px;
background:#b1b1c3;
}
.border-bg {
width:204px;/*358+8+8(borders)+15+15(paddings)*/
border:20px inset #5d738b;
padding:25px;
background:transparent url('/images/bg-um.gif');
}
<div class=
"border-bg">
<div class=
"border-image-2">
<div class="cont-image">
</div>
</div>
</div>
В результате мы получим фотографию, обрамленную
css рамкой.
Оригинал: Criando molduras com CSS
Добавить комментарий
Комментарии
RSS лента комментариев этой записи.