Как я и обещал друзья,я начал писать еще один учебник или(статью). © zarnakoom Рассказ начну с того что, все мы добавляем в свои статьи какие либо фотографии, изображения для того что бы статья лучше выглядела.И для того что бы пользователь зашедший к нам, на на наш веб ресурс мог понять о чем идет речь в какой либо статье по картинке, не вникая даже в смысл статьи. Это очень удобно, но по мимо того когда мы пишем для наших сайтов, какие то материалы не всегда так получается что на изображениях которые мы добавляли в статью видно все нюансы данных изображений. © zarnakoom И для того что бы пользователи зашедшие к нам на веб ресурс, не мучились я решил сегодня с вами дорогие читатели поделиться виджетом увеличения картинок.Но а виджет не простой, но и он не золотой)он с подсветкою красивой, розовой и немного шубутной. © zarnakoom В том плане что он при наведении на него указателя мыши, немного поворачивается. А вот собственно его скрипт установки:
Откройте Ваш аккаунт Blogger,
Нажмите на шаблон
нажмите на Изменить HTML. Теперь нужно зажать CTRL+F , и найти следующий код ]]></b:skin> .
Теперь вставьть нижеуказанный код вставляем перед ]]></b:skin>
/* Post Image Shadow Effect by http://www.zarnakoom.blogspot.com */
.post img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px #FF0000;
-moz-box-shadow: 0 0 20px #FF0000;
box-shadow: 0 0 20px #FF0000;
}
Так же вы можете поменять цвет подсветки, на любой вам нужный просто поменяйте те три строчки ( #FF0000 ) что я отметил маркером на любой другой цвет. Цвет можно выбрать любой, у меня на блоге в разделе ссылка Инструменты , там есть генератор Цветовое колесо там можно выбрать любой цвет. © zarnakoom
И если у кого не сработает оборачиваем его стили вот так:
<style>
* Post Image Shadow Effect by www.showmedreams.blogspot.com */
.post img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px #FF0000;
-moz-box-shadow: 0 0 20px #FF0000;
box-shadow: 0 0 20px #FF0000;
}</style>
0 коммент. :