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

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

Про рамки для фотографий я уже писала. Посмотреть статьи о других рамках можно тут и тут.
Но мимо этого оформления, о котором пойдёт речь в сегодняшней статье, пройти не смогла. Выглядят картинки в этих рамочках непривычно и очень красиво. Установить их можно в статье, оформив картинку или в боковой панели, подвале, как гаджет. Кроме этого, рамками можно оформить красивую страницу "Обо мне".
Увидела код рамок на сайте 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>
Синим выделила текст, который можно поменять на свой. А красным - адреса картинок, поменяйте на свои картинки.

Ваши комментарии:

Комментарии со спамом удаляются.