» »

Подборка CSS3 эффектов на изображения для uCoz


Подборка CSS3 эффектов на изображения для uCoz

Если вы решили на своем сайте сделать эффект на картинке, то можете выбрать на Подборка CSS3 эффектов на изображения для uCoz, где представлено не там много, но отличного решение, которое вам должно понравиться. В этом материале я вам хочу предоставить хорошую подборку эффектов при наведение на изображения которые работают при помощи CSS3. Эффекты хорошо срасять ваш портал и вы сможете выбрать себе один из которых вам понравится а может и все захотите забрать.

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

Установка: CSS3 эффектов при наведении на изображения

Для установки в первую очередь мы прописываем стили которые относятся ко всем из девяти эффектов. И для этого воспользуйтесь стилями которые я указал чуть ниже и вставьте в стили вашего сайта в самый низ и сохраните.

Основные стили эффектов
Код
/*Основные стили эффектов*/
#gallery a:nth-child(3n+2) {
  margin: 0 25px 25px 25px;
}

#gallery a img {
  display: block;
  -webkit-transition: all 0.5s;
}

#gallery a img:hover {
  -webkit-filter: none;  
}

#gallery a img.brightness:hover {
  -webkit-filter: brightness(0);
}

Вторым действием пропишем классы своей картинке на которой должен стоят тот или иной эффект. Прописать класс стоит вот таким образом!

Находим у вас код который отвечает за вывод изображения, у меня вот так.

Код
<a href="$ENTRY_URL$"><img src="$IMG_URL1$"/></a>

Для начало мы его заключим классом gallery и для этого делаем вот так !

Код
<div id="gallery"><a href="$ENTRY_URL$"><img src="$IMG_URL1$"/></a></div>

В целом всё готово нам остаётся выбрать тот эффект который нам понравился и для этого прописываем класс уже самой картинки и выглядеть должно вот так !

Код
<div id="gallery"><a href="$ENTRY_URL$"><img src="$IMG_URL1$" class="blur"/></a></div>


И в стилях сайта прописываем вот это:
Код
.blur {-webkit-filter: blur(3px);}

В данный момент эффект прописан blur то есть у вас будет мутная картинка а при наведение оно будет становится чётким.

Но давайте я вам выложу стили для выбора .

Стили фильтров
Код
/*Стили фильтров*/
.saturate {-webkit-filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px);}
.invert {-webkit-filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);}
.opacity {-webkit-filter: opacity(50%);}

Вот и всё выбирайте нужный вам эффект и настраивайте своё изображения.
05.10.2015 Просмотров: 554 Комментарий: (10)

Поделиться в социальных сетях

Материал разместил

Комментарий: 10
Brung
Brung 06.10.2015 00:441
0
Эти эффекты будут только смотреться красиво в модуле фотоальбом, больше не где их не вижу, хотя могу и ошибаться.
AnTron
AnTron 06.10.2015 01:002
0
А что вы думаете, только одни коды или статьи основная тематика. Фотоальбомы, очень много сайтов, это как раздача обои для рабочего сайта или те же фоны, все что есть на сайте в картинках.
Kosten
Kosten 06.10.2015 01:063
0
Есть безусловно, и скажу даже много, но только редко кто ставит эффекты, так как там большой возможно размер по пикселям.
Kosten
Kosten 06.10.2015 01:124
0
Вообще не понимаю зачем они нужны, вы явно сайт только лишнем эффектом грузите, а они явно не мало весят. И от этого уже зависит, как быстро будет открываться следующее страница.
DALMATIN
DALMATIN 06.10.2015 02:085
0
Это не скрипт а стили и по этому не будет грузить сайт!
Kosten
Kosten 06.10.2015 02:246
0
Спасибо, что поправил.
Kosten
Kosten 06.10.2015 02:247
0
Значит ставим, там где вам нужно!
Brung
Brung 06.10.2015 02:258
0
А вид материалов и комментариев, можно установить.
DALMATIN
DALMATIN 06.10.2015 02:279
0
На любое изображение!
Kosten
Kosten 06.10.2015 02:2710
0
Но а почему бы и нет, но надо для верности спросить у DALMATIN, он с ними работал.
avatar