- Регистрация
- 09.09.14
- Сообщения
- 970
- Реакции
- 634
- Баллы
- 93
Рамка для изображения на CSS
В секции <head><style> пишем код CSS:
CSS:
.border {
display: inline-block; /* Строчно-блочный элемент */
position: relative; /* Относительное позиционирование */
outline: 1px solid #fff; /* Параметры рамки */
}
.border, .border::after {
padding: 4px; /* Толщина внутренней рамки */
background: #dad6cf; /* Цвет внутренней рамки */
border: 2px solid #c2b59d; /* Параметры рамки */
box-sizing: border-box; /* Не учитываем padding */
}
.border img { display: block; }
.border::after {
content: ''; /* Выводим рамку */
position: absolute; /* Абсолютное позиционирование */
left: 0; top: 0; /* Положение */
width: 100%; height: 100%; /* Размеры */
z-index: -1; /* Опускаем вниз */
transform: rotate(-7deg); /* Поворачиваем */
}
HTML:
<figure class="border">
<img src="image/b-52.jpg" alt="Б-52" width="150" height="150">
</figure>
Последнее редактирование: