Изображения в винтажном стиле на CSS

Всем, доброго времени суток. Сегодня я опять про оформление картинок в блоге. Предлагаю вариант, как с помощью CSS сделать изображения в винтажном (старинном) стиле.
Сразу же оговорюсь, что в старых версиях Internet Explorer  этот эффект может не корректно отображаться.

Само изображение можно размещать или слева, или справа от текста. Посмотрите сразу на само оформление.


Вот так это выглядит. Эффект старины. При наведение на картинку курсора, она меняется. В самом коде можно будет этот вариант убрать, если хотите оставить только винтажный стиль.

Код для этого.

<style>
.vintage img {
padding:0;
float:left;
}
.vintage {
border:3px 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(0,255,0, 0.5);
background-image:url(адрес вашего изображения );
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>

<div class="vintage" style="clear: both;">
<img border="0" height="300" src="адрес вашего изображения " width="200" />
</div>

То что в коде выделено синим цветом это ширина и цвет рамки. На ваше усмотрение.
Красным - цвет изображения в формате RGB. Загляните, пожалуйста, в этот учебник, чтобы подобрать свои. В моём случае это вариант с зелёным эффектом. Предложу вам некоторые другие.

Синий - RGBA (0,0,255, 0,5);     Голубой - RGBA (0255255, 0.5);
Красный-RGBA (255,0,0, 0,5);   Фиолетовый- RGBA (255,0,240, 0,5);

В двух местах кода, выделенного зелёным цветом, введите адрес самого изображения.

И как я уже говорила выше, если не хотите, чтобы при наведении курсора менялся вид картинки, уберите из кода вот этот участок.

.vintage:hover:before {
background: none;
box-shadow:none;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}

Готовый код вставляем при написании сообщения, в режим HTML. Или установите первую его часть, заключённую в теги <style>тут весь код</style>, но уже без них в шаблоне блога перед строкой ]]></b:skin.

Вот такой ретро стиль изображений в блоге можно сделать не прибегая к помощи специальных программ. Эффект на чистом CSS.

• Как сделать качающуюся картинку.
• Красивые эффекты для изображений в блоге.

На этом заканчиваю. Спасибо. что заглядываете в мои шпаргалки. Удачи всем.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email