Google+ Followers

Будь в курсе событий!

03.07.2013

Старинное оформление картинок на blogger blogspot

Leave a Comment


Привет Всем моим читателям. Вот появилось немного времени, которое я быстро конвертирую на время уделенное блогу. Сидя перед мониторм и делая очередное задание. Ко мне пришла «Эврика»  и я решила открыть серию постов: Оформление картинок на blogspot. Где я хочу собрать всевозможные скрипты по оформлению картинок как русских вебмастеров работающих с HTML, CSS так и зарубежных.

Я уже писала один пост об интересном решении  для картинок. Который может украсить ваш блог. Сегодня я решила продолжить данную тему.  Я нашла очень интересное оформление, возможно кому-то оно будет по душе.
Вставьте код перед b:skin>


.vintage img {padding:0;float:left;}.vintage {border:10px solid #000;position: relative;float: left; /* Change to right if you want the images to be aligned to the right */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); /* sepia */background-image:url(http://2.bp.blogspot.com/-Qva8IVtO25k/UFejhDww-zI/AAAAAAAADAY/RnlCb7JO0xs/s000/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;}

Что бы заработал данный эффект на ваших картинках нужно поместить код в картинки в этот «контейнер»


 
URL of the image" />
На картинке я попыталась показать как это примерно будет выглядеть


На этом пожалуй все. Па-па

Система Orphus

Пожалуйста не забывайте нажать

0 коммент. :

© 2012-2017 Cash's from program