Рамка для изображения на CSS

stream

Support
Команда форума
Регистрация
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); /* Поворачиваем */
   }
В теле документа <body> пишем HTML-код:
HTML:
  <figure class="border">
   <img src="image/b-52.jpg" alt="Б-52" width="150" height="150">
  </figure>
Получается изображение вот с такой симпатичной рамкой:
ramka.gif
 
Последнее редактирование:
Сверху Снизу