Подборка 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%);} Вот и всё выбирайте нужный вам эффект и настраивайте своё изображения. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 10 | |
|
| |
