Винтажное оформление картинки на Блоггер

Нашла идею оформления картинки на сайте в винтажном стиле на сайте http://widgets-tricks.blogspot.com. Оформление подойдёт не для каждого сайта, а вот блоги о рукоделии, фотографии, красоте и моде и тому подобное, отлично подойдёт. 

Картинки оформляются в винтажном стиле не все разом, а только те, которые вам нужны.

Вид картинки будет такой:

Можно оформить винтажный стиль другим цветом, например:

В коде смена цвета прописана кодом rgba. Что бы подбирать для себя оттенок для оформления можно воспользоваться конвертером цвета https://colorscheme.ru/color-converter.html

1. В окошке выбираем нужный формат цвета, в нашем случае rgba
2. В каждом окошке меняете цифры, пока не найдёте нужный вам цвет, в последнем окошке — насыщенность цвета. Её выставить лучше поменьше, иначе фотографии будут очень тёмные.
3. В окошке 3 смотрим какой получается цвет

Можно сделать проще — найти нужный вам цвет и ввести в окошко.

1. Вводим цвет
2. Смотрим код 
3. Смотрим, как выглядит цвет

Код оформления

Заходим в шаблон блога — Тема-Изменить HTML , находим в шаблоне тег </head> и выше него вставляем код:

<style>

.vintage img {

padding:0;

float:left;

}

.vintage {

border:10px solid #000;

position: relative;

float: left; 

margin-right: 20px;

margin-bottom: 20px;

}

.vintage:before {

content: "";

display: block;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

background-color: rgba(255,102,0, 0.6); 

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9qvqVNMdh4wFbPOMrzZ9B35ch41Tx-wjvrKSbld_5HFe2yHhAeV2rMYMV9MQUsKVwrF1TnzKiBghdUPy8Ub8MSlcVwiG7cEGFBvzb4WIQFaLDjxcC0-bBl38Gajlx6t5nN4MONOxgb1g/s0/grunge.png);

background-size: cover;

box-shadow: inset 0 0 50px #000, inset 0 0 50px #000, inset 0 0 50px #000;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

transition: all .1s;

}

.vintage:hover:before {

background: none;

box-shadow:none;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

transition: all .1s;

}

</style>

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

Картинка расположена слева, что бы сделать по центру или справа поменяйте в коде left, на right (право) или center (центр)

Если вам не нужен ховер-эффект — при наведении на картинку мыши, она становится обычной, то удалите в коде участок, выделенный синим.

Что бы код заработал, при написании статьи, в режиме HTML (в новом редакторе нажмите на значок < > ) добавьте код:

<div class="vintage" style="clear:both;">

<img border="0" src="url (адрес) вашей картинки" />

</div>

Урл картинки — адрес расположения картинки. Это может быть картинка с фото хостинга или загружаете картинку на сайт и копируете её ссылку. 

1. Загружаем как обычно картинку
2. Переходим в режим HTML
3. Копируем ссылку, картинку удаляем, ссылку добавляем в код.

Посмотреть как смотрится винтажное оформление можно на тестовом блоге.