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

Про рамки для фотографий я уже писала. Посмотреть статьи о других рамках можно тут и тут.

Но мимо этого оформления, о котором пойдёт речь в сегодняшней статье, пройти не смогла. Выглядят картинки в этих рамочках непривычно и очень красиво. Установить их можно в статье, оформив картинку или в боковой панели, подвале, как гаджет. Кроме этого, рамками можно оформить красивую страницу "Обо мне".

Увидела код рамок на сайте https://pcvector.net

Рваные рамки

Код:

<div class="container">

  <div class="card">

    <div class="image image1"></div>

    </div>

  </div>

<svg>

  <filter id="wavy1">

    <feturbulence basefrequency="0.2" numoctaves="5" seed="1" x="0" y="0"></feturbulence>

    <fedisplacementmap in="SourceGraphic" scale="20">

  </fedisplacementmap></filter>

</svg>

<style>

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

.container {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

}

.container .card {

  position: relative;

  width: 280px;

  height: 350px;

  margin: 30px;

}

.container .card .image {

  position: relative;

  width: 100%;

  height: 100%;

  background-size: cover;

  transform: translate(10px, 10px);

}

.container .card:before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 255px;

  height: 325px;

  border: 25px solid #fff;

  z-index: 1;

  background: linear-gradient(145deg, #ffffff, #e6e6e6);

  box-shadow: 7px 7px 21px #bdbdbd, -7px -7px 21px #ffffff;

  background: transparent;

}

.container .card:nth-of-type(1)::before {

  filter: url(#wavy1);

}

.image1 {

  background-image: url("https://i.yapx.ru/CU2R0.jpg");

}svg {

  width: 0;

  height: 0;

}

.container .card .info {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  padding: 50px 30px 30px 30px;

  transform: translate(10px, 10px);

  text-align: center;

  background-color: rgba(0, 0, 0, 0.5);

  color: #fff;

  line-height: 1.4;

  font-size: 20px;

  opacity: 0;

  transition-duration: 1s;

}

.container .card:hover .info {

  opacity: 1;

}</style>

Красным выделила адрес картинки, поменяйте на свою картинку. 

Вторая рамка — тройная

Код:

<div class="container">

  <div class="card">

    <div class="image image1"></div>

  </div>

  <div class="card">

    <div class="image image2"></div>

  </div>

  <div class="card">

    <div class="image image3"></div>

  </div>

</div>

<svg>

  <filter id="wavy1">

    <feturbulence x="0" y="0" baseFrequency="0.2" numOctaves="5" seed="1"></feturbulence>

    <feDisplacementMap in="SourceGraphic" scale="20" />

  </filter>

</svg>

<svg>

  <filter id="wavy2">

    <feturbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="1"></feturbulence>

    <feDisplacementMap in="SourceGraphic" scale="20" />

  </filter>

</svg>

<svg>

  <filter id="wavy3">

    <feturbulence x="0" y="0" baseFrequency="0.1" numOctaves="5" seed="1"></feturbulence>

    <feDisplacementMap in="SourceGraphic" scale="20" />

  </filter>

</svg>

<style>

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

.container {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

}

.container .card {

  position: relative;

  width: 280px;

  height: 350px;

  margin: 30px;

}

.container .card:nth-of-type(2) {

  transform: rotate(5deg);

}

.container .card .image {

  position: relative;

  width: 100%;

  height: 100%;

  background-size: cover;

  transform: translate(10px, 10px);

}

.container .card:before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 255px;

  height: 325px;

  border: 25px solid #fff;

  z-index: 1;

  background: linear-gradient(145deg, #ffffff, #e6e6e6);

  box-shadow: 7px 7px 21px #bdbdbd, -7px -7px 21px #ffffff;

  background: transparent;

}

.container .card:nth-of-type(1)::before {

  filter: url(#wavy1);

}

.container .card:nth-of-type(2)::before {

  filter: url(#wavy2);

}

.container .card:nth-of-type(3)::before {

  filter: url(#wavy3);

}

.image1 {

  background-image: url("https://i.yapx.ru/GdIMY.jpg");

}

.image2 {

  background-image: url("https://i.yapx.ru/GdIM0.jpg");

}

.image3 {

  background-image: url("https://i.yapx.ru/GdIM8.jpg");

}

svg {

  width: 0;

  height: 0;

}

.container .card .info {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  padding: 50px 30px 30px 30px;

  transform: translate(10px, 10px);

  text-align: center;

  background-color: rgba(0, 0, 0, 0.5);

  color: #fff;

  line-height: 1.4;

  font-size: 20px;

  opacity: 0;

  transition-duration: 1s;

}

.container .card:hover .info {

  opacity: 1;

}</style>

Красным в коде выделила адреса картинок, меняйте на свои картинки. 

Третья рамка — тройная с текстом, который появляется при наведении курсора мыши на первую картинку.

Код:

<div class="container">

  <div class="card">

    <div class="image image1"></div>

    <div class="info">

      <h4>Дорогие кошки</h4>

      <p>Одни из самых редких пород кошек: Маргай, Као-мани, Саванна </p>

    </div>

  </div>

  <div class="card">

    <div class="image image2"></div>

  </div>

  <div class="card">

    <div class="image image3"></div>

  </div>

</div>

<svg>

  <filter id="wavy1">

    <feturbulence basefrequency="0.2" numoctaves="5" seed="1" x="0" y="0"></feturbulence>

    <fedisplacementmap in="SourceGraphic" scale="20">

  </fedisplacementmap></filter>

</svg>

<svg>

  <filter id="wavy2">

    <feturbulence basefrequency="0.02" numoctaves="5" seed="1" x="0" y="0"></feturbulence>

    <fedisplacementmap in="SourceGraphic" scale="20">

  </fedisplacementmap></filter>

</svg>

<svg>

  <filter id="wavy3">

    <feturbulence basefrequency="0.1" numoctaves="5" seed="1" x="0" y="0"></feturbulence>

    <fedisplacementmap in="SourceGraphic" scale="20">

  </fedisplacementmap></filter>

</svg>

<style>

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

} 

.container {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

}

.container .card {

  position: relative;

  width: 280px;

  height: 350px;

  margin: 30px;

}

.container .card:nth-of-type(2) {

  transform: rotate(5deg);

}

.container .card .image {

  position: relative;

  width: 100%;

  height: 100%;

  background-size: cover;

  transform: translate(10px, 10px);

}

.container .card:before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 255px;

  height: 325px;

  border: 25px solid #fff;

  z-index: 1;

  background: linear-gradient(145deg, #ffffff, #e6e6e6);

  box-shadow: 7px 7px 21px #bdbdbd, -7px -7px 21px #ffffff;

  background: transparent;

}

.container .card:nth-of-type(1)::before {

  filter: url(#wavy1);

}

.container .card:nth-of-type(2)::before {

  filter: url(#wavy2);

}

.container .card:nth-of-type(3)::before {

  filter: url(#wavy3);

}

.image1 {

  background-image: url("https://i.yapx.ru/KzzuC.jpg");

}

.image2 {

  background-image: url("https://i.yapx.ru/Kz1Q4.jpg");

}

.image3 {

  background-image: url("https://i.yapx.ru/KzzuJ.jpg");

}

svg {

  width: 0;

  height: 0;

}

.container .card .info {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  padding: 50px 30px 30px 30px;

  transform: translate(10px, 10px);

  text-align: center;

  background-color: rgba(0, 0, 0, 0.5);

  color: #fff;

  line-height: 1.4;

  font-size: 20px;

  opacity: 0;

  transition-duration: 1s;

}

.container .card:hover .info {

  opacity: 1;

}</style>

Синим выделила текст, который можно поменять на свой. А красным - адреса картинок, поменяйте на свои картинки.