красивые рамки для фотографий

Привет, друзья. Красивые рамочки для изображений на чистом CSS. Вариантом очень много. Последний пост по этой теме был про рамки с эффектом веера. Решила поделиться сегодня ещё несколькими кодами для оформления картинок.

Посмотрите, пожалуйста, на тестовом блоге, как красиво можно это сделать.

Демонстрация

Скопируйте нужный код и установите его в редакторе сообщений в нужном месте, переключившись в режим HTML.

Эффект для рамки 1.

<div class="image-wrapper">
<div class="image-inner">
<img height="320" src="адрес вашего изображения" width="320" />

</div>
</div>
<style>
* {box-sizing: border-box;}
.image-wrapper {
  position: relative;
  max-width: 400px;
  margin: 50px auto;
  padding: 15px;
  background: #FFCCCC;
}
.image-inner {position: relative;}
.image-wrapper img {
  display: block;
  width: 100%;
}
.image-wrapper:before,
.image-wrapper:after,
.image-inner:before,
.image-inner:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
}
.image-wrapper:before {
  bottom: 0;
  left: 0;
  border-left: 5px double #CC0000;
  border-bottom: 5px double #CC0000;
}
.image-wrapper:after {
  right: 0;
  top: 0;
  border-right: 5px double#CC0000;
  border-top: 5px double #CC0000;
}
.image-inner:before {
  bottom: -15px;
  right: -15px;
  border-right:8px double #CC0000;
  border-bottom: 8px double #CC0000;
}
.image-inner:after {
  top: -15px;
  left: -15px;
  border-left: 5px double #CC0000;
  border-top: 5px double #CC0000;
}</style>

Эффект для рамки 2. 

<div class="transform-border">
<img height="320" src="адрес вашего изображения" width="320" />
</div>
<style>
* {box-sizing: border-box;}
.transform-border {
  position: relative;
  max-width: 400px;
  margin: 50px auto;
  transform: perspective(3000px) rotateY(29deg);
}
.transform-border img {
  display: block;
  width: 100%;
  box-shadow: -12px 11px 1px #f2f2f2;
}
.transform-border:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: -22px;
  top: 22px;
  background: #cccccc;
  z-index: -1;
}</style>

Эффект для рамки 3.

<div class="dbl-border">
<div class="image-wrapper">
<img src="адрес вашего изображения" height="320" width="231" />
  </div>
</div>
<style>
* {box-sizing: border-box;}
.dbl-border {
  position: relative;
  display: table;
  margin: 50px auto;
}
.dbl-border img {display: block;}
.dbl-border:before,
.dbl-border:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 2px solid #FF9999;
}
.dbl-border:before {
  top: -15px;
  left: -15px;
}
.dbl-border:after {
  right: -15px;
  bottom: -15px;
}
.image-wrapper {
  position: relative;
  z-index: 2;
  padding: 5px;
  background: white;
  box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.1);
}</style>

Вставьте нужные URL адреса ваших картинок. Попробуйте изменить цвет и ширину рамочек меняя значения border. Практически многие свойства можно заменить и создать свою уникальную рамку для фото.

Если пропустили вот здесь ещё другие варианты

Эффект радуги для рамки
Анимированная пунктирная рамка

Спасибо всем за внимание и до встречи. 

Получайте новые сообщения с блога прямо на почту

Введите Ваш email