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

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

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


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

винтажный стиль на CSS

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

<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


4 комментария:

  1. И страничка, как живая станет). Моя копилка пополняется благодаря Вам.

    ОтветитьУдалить
  2. Люди добрые! Помогите, кто-нибудь!!! Ничего не понимаю, но очень нужен блог. я его завела, но он не дает мне возможность просмотреть. Наверное, что-то накуролесила! Что-же делать... Хоть плачь...

    ОтветитьУдалить
    Ответы
    1. Оксана, поподробнее пожалуйста опишите проблему. Что значит просмотреть. Дайте адрес блога.

      Удалить

Пользовательский поиск
Foto Saya
My Photo