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

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

Нашла идею оформления картинки на сайте в винтажном стиле на сайте 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. Копируем ссылку, картинку удаляем, ссылку добавляем в код.
Посмотреть как смотрится винтажное оформление можно на тестовом блоге.

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

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