Необычное оформление картинок на Блоггер

Предлагаю посмотреть интересное оформление изображений в статье. Если не нравится обычный дизайн или хочется что-то новое, всегда выручит CSS. Ещё про картинки можно посмотреть по ссылкам:
https://inshabashka.blogspot.com/2019/08/hover-ehffekty-css-dlya-kartinok-na-blogger.html
https://inshabashka.blogspot.com/2019/08/ehffekty-izobrazhenij-na-css.html

Красивые и необычные

Поляроид

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

<div class="polaroid">
<img src="ваша картинка" /></div>
<style>.polaroid {
 position: relative;
 width: 220px;
}

.polaroid img {
 border: 10px solid #fff;
 border-bottom: 45px solid #fff;
 -webkit-box-shadow: 3px 3px 3px #777;
 -moz-box-shadow: 3px 3px 3px #777;
 box-shadow: 3px 3px 3px #777;
}</style>

Или вот такой:

Поляроид — вариант 2 

Посмотреть урок создания оформления можно по адресу: 

http://thenewcode.com/548/Develop-A-Polaroid-Photograph-With-CSS-Transitions

Посмотреть
Код:

<div id="polaroid-2">
</div>
<style>
 * {
  box-sizing: border-box;
}
div#polaroid-2 {
  margin: 0 auto;
  border: 25px solid #e3e4d3;
  border-bottom-width: 50px;
  transition: 3s box-shadow ease-in;
  box-shadow: 0 0 200px 200px rgba(29, 25, 4, 1) inset, 0 0 3px 6px rgba(0, 0, 0, 0.07);
  width: 50%;
  max-width: 500px;
  padding-top: 30%;
  background-image: url(ваша картинка);
  filter: sepia(50%);
}
div#polaroid-2:hover {
  box-shadow: 0 0 100px 0 rgba(29, 25, 4, 0.8) inset, 0 0 3px 6px rgba(0, 0, 0, 0.07);
  filter: sepia(20%);
}
@media all and (max-width: 700px) {
  div#polaroid-2 {
    width: 80%;
    padding-top: 70%;
  }
}</style>

Красным выделила цвет рамки.
Наведите на картинку курсор и фотография проявится.

Паспарту

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

Код:

<img alt="название картинки" class="mat" src="адрес картинки" />
<style>
img.mat {
  width: 50%;
  height: auto;
  display: block;
  margin: 4rem auto;
  padding: 10%;
  background-color: #1e4acd;
  background-image: url('адрес картинки гранжевой текстуры');
  background-repeat: no-repeat;
  background-size: cover;
  border: 6px double #895ef6;
  box-shadow: 0 0 0 50px rgba(244, 240, 236, 0.4) inset, 0 0 0 11px rgb(180, 130, 90), 0 0 30px rgba(0, 0, 0, 0.8) inset;
  outline: 6px solid #333;
  outline-offset: 0px;
}
</style>

Красным выделила процентные размеры картинки, больше процент, больше размер.
Синим процентный размер второй картинки — гранжевой текстуры
Гранжевую текстуру можно заменить любой другой, найти текстуры можно на сайтах с темами работы с Фотошопом и другими редакторами или в фото банках. Вот несколько адресов:
https://3djungle.ru/textures/
https://www.textures.com/
https://www.aduvan.ru
и многие другие
Оранжевым выделила цвета рамки, меняйте на свои.
Зелёным отметила в коде размеры рамок.
Для примера я по-новому оформила картинки, для наглядности - в ярких тонах:

Виньетка

Виньетирование — затемнение у изображения уголков.

Код:

<div class="vignette">
    <img src="ваша картинка">
</div>
<style>
{box-sizing: border-box;}
.vignette {
  width: 400px;
  margin: 50px auto 0;
  position: relative;
}
.vignette img{
  border-radius: 50%;
  max-width: 100%;
  height: auto;
  display: block;
}
.vignette:after  {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(50% 50%, hsla(0, 0%, 100%, 0) 50%, #F1EBDF 100%);
}</style>

Последнее оформление, но не менее интересное

Секционное

Картинка делится на равные или наоборот, разного размера части. Такое оформление не подходит для портретов (хотя и не всегда, бывает портрет разделённый на разного размера секторы выглядит привлекательно).
Код:

<div class="pict-container">
<div class="pict">
<img alt="описание картинки" src="картинка" />
<span></span>
<span></span>
<span></span>
</div>
</div>
<style>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.pict-container{
  max-width: 400px;
  margin: 15px auto;
}
.pict{
  padding-bottom: 50%;
  position: relative;
}
.pict > img{
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
}
.pict:before{
  content: '';
  position: absolute; top: 50%; left: 0;
  width: 100%;
  height: 10px;
  margin-top: -5px;
  background: #fff;
  z-index: 1;
}
.pict > span{
   position: absolute; top: 0; left: 25%;
   width: 10px; 
   height: 100%; 
   margin-left: -5px;
   background: #fff; 
}
.pict > span:nth-of-type(2){left: 50%;}
.pict > span:nth-of-type(3){left: 75%;}</style>