Как да създадете ефект на задържане в чист CSS, който е свързан с посоката на курсора. Оригинални ефекти при задържане на мишката за изображения, използващи чист CSS3

Много често на уебсайтове може да срещнете промени или бутони при задържане. Специален псевдоклас: hover в CSS ви позволява да изпълните задачата. Днес ще разгледаме някои техники, които ни позволяват да направим този трик, а по-долу ще публикуваме списък с най-интересните от тях (с кратки описания/обяснения). Ще разделим всички опции на:

Тези групи са много произволни, т.к много примери се припокриват и са универсални, тоест могат да бъдат намерени при проектиране на различни обекти.

Ефектът на задържане в CSS стиловете се добавя отдясно на елемента, както следва:

a: задържане (цвят: червен;)

a:hover ( цвят: червен; )

Най-често механизмът се използва специално за връзки, за да се промени цвета им или да се добави/премахне подчертаване. Въпреки това може да се посочи и за други блокове, бутони, текстове или да се използва при създаване.

бутон: задържане (фон: rgba (0, 0, 0, 0); цвят: червен; .my-picture: задържане (непрозрачност: 0,5; филтър: алфа(непрозрачност= 50) ;)

button:hover (фон: rgba(0,0,0,0); цвят: червен; ) .my-picture:hover (непрозрачност: 0,5; филтър: alpha(opacity=50); )

Съвременните браузъри еднакво правилно възприемат ефекта на CSS hover при задържане, въпреки че в по-старите версии на IE 6 и по-долу той работи само за връзки. Освен това някои източници казаха, че това трябва да бъде посочено в кода.

Между другото, когато задавате стилове на връзката, селекторите могат да се използват допълнително: връзка - за страници, които все още не са посетени, :visited - за тези, където вече сте били + :active определя текущия активен адрес. Важно е да поставите ефекта на задържане в CSS след :link и :visited, ако съществуват.

Да преминем от теория към практика. По-долу има списък полезни материалии фрагменти - следвайте връзките, за да видите източниците.

Ефекти при задържане на мишката за бутони и връзки

Както казахме по-горе, това е най-популярната категория обекти на сайта, където се намира тази техника. Ето няколко варианта по темата.

Прости примери за бутони

Съливан Бътънс

Номерът е, че когато задържите курсора на мишката върху различни бутони, освен че се променя цвета на фона, той също се стартира малка анимацияс икони (всяка със собствена).

CSS икони при задържане

Избор от 5 прости опцииизпълнение на задачата. Във всички случаи се използват допълнителни икони, които се появяват отдясно/вляво на текста или го заместват.

Ефекти при задържане на бутон

В сравнение с предишния пример, тези 12 тригерни функции изглеждат много по-интересни: както визуално, така и от гледна точка на код. Не и без JS.

Няколко функции, които ви позволяват да направите нещо по-необичайно, отколкото с основното свойство за украса на текст. Фонът на бутона е допълнително изпълнен с различни визуални ефекти.

Информация за Hover

Функционалността на подсказките в момента се поддържа във всички браузъри, но можете да я персонализирате, за да отговаря на вашите нужди. В настоящия пример псевдокласът се задейства за тага dfn, което изглежда стилно. Кодът е доста компактен HTML + CSS.

Бутон за мана

Един от най оригинални опцииефект на зависване в блокове - при зависване все едно се пълни с течност. Изпълнението използва CSS, HTML и SVG. За определени теми на уебсайтове този фрагмент определено ще бъде божи дар.

Ефекти при задържане на мишката за изображения

15 основни техники

Въпреки факта, че статията е публикувана доста отдавна, методите все още работят правилно. Тук вероятно са събрани всички възможни стандартни трансформации за графики: няколко вида увеличение, ротация, размазване, черно-бяло, прозрачност, филтри, блясък и т.н. Много полезен материал.

Красиви изображения с ефекти на курсора

Селекция от 30 приятни и плавни действия при задържане на курсора на мишката над картина. Благодарение на прости визуални манипулации под формата на увеличение и добавяне на линии се създава добро комплексно впечатление. На места заглавието е увеличено и краткото описание е стегнато. Чудесен вариант за портфолио.

Barberpole Hover Animation

Анимацията не е сложна на пръв поглед, но в крайна сметка изглежда много готина и необичайна.

CSS ефекти при задържане на мишката с откриване на посока

Отлична селекция от фрагменти и кодове по темата можете да намерите в статията от css-tricks.com. Всички тези примери са обединени от факта, че по време на работа се определя местоположението и посоката на движение на курсора. Това от своя страна ви позволява да създадете доста оригинални реакции, когато задържите курсора на мишката над елементите на страницата:

В много трудни решения Javascript и jQuery за ефекти при задържане на мишката ви позволяват значително да разнообразите и подобрите резултата.

Посока Aware Hover Доброта

Direction Aware Tiles, използвайки clip-path Чист CSS

Намерете останалите трикове в оригиналната статия.

Аниматизъм

Тази разработка включва повече от 100 прости начини„анимация“ на изображения или обекти при задържане. С помощта на тези функции можете да реализирате различен външен вид на бутони, заглавия, текстове, социални иконии така нататък. Има опции с промяна на дисплея на картини и полупрозрачни фонови наслагвания.

Връзката съдържа 7 CSS3 ефекта на заглавието на курсора - когато, когато задържи курсора на мишката върху изображение, потребителят ще види информационен блок със заглавие, Кратко описаниеи връзка за следване. Това не означава, че примерите са много оригинални, но определено ще помогнат за разнообразяване на проект със статично съдържание.

CSS Hover библиотеки

Hover.css

Проектът, просто наречен Hover.css, съдържа колекция от CSS3 ефекти за връзки, бутони, блокове и т.н. Можеш да използваш готов коди/или добавете свои собствени модификации към него. Тук има много интересни неща: 2D/3D трансформации, работа с фонове и рамки, сенки, икони. Решението се предлага във формати CSS, LESS и Sass.

Imagehover.css

Друга библиотека, която задава ефекти при задържане на курсора на мишката за снимки - в безплатна версияще намерите 44 опции за трансформация (премиум комплектът съдържа 5 пъти повече). LESS и SCSS също се поддържат тук, този файл тежи само 19kb. Сайтът има страница, демонстрираща всички работещи примери. Предлага се много уникални чипове, които не бяха споменати по-горе.

Проектът включва повече от 30 различни техники за кръгли и квадратни предмети. Всички те са доста оригинални, практически няма прости „едноелементни“ действия под формата на редовно увеличение / излитане. Задачата за чист CSS 3 + HTML (плюс включени Scss файлове). Отлична съвместимост с Bootstrap 3, налична документация.

Обща сума.Надяваме се, че тези CSS ефекти при задържане на мишката върху изображения, блокове, връзки и други елементи на страницата са ви помогнали да разберете тази тема. Можете да внедрите най-успешните решения, според вас, на вашите уебсайтове - било то свързване на пълноценна библиотека или просто интегриране на малка версия на кода.

Ако знаете нещо повече интересни функциии фрагменти, изпратете URL адреси към тях в коментарите. И ние ще добавим към статията в бъдеще.

Идеята за разделяне на представянето на информация от кода, който я създава и обработва, стана коренно нова. Беше силно решениепо едно време, но тази точка не беше напълно призната тогава. Когато програмирането се отдели от отделния компютър, но не стана победител в локална мрежаили една зона на домейн и веднага се разпространи навсякъде, едва тогава стана очевидно, че представянето на информация (по отношение на дизайна) и работата с нея (по отношение на кода) са две страни на една и съща равнина.

Три аспекта на разработката на уебсайт

От формална гледна точка има три основни компонента (в различни синтактични форми), които изграждат уебсайт: PHP код, JavaScript код и описания CSS стилове. Изобщо няма значение какво име или версия на този или онзи компонент се използва, какво HTML версияизползвано маркиране и каква версия на браузъра е инсталирана. Съвместимостта не е на голяма почит в днешно време, защото във всеки момент от време е уместно: какво е кодирано и какво от това, което е кодирано, може да бъде показано и изпълнено.

Ако по-рано езиците се караха за идеи, днес създателите на стандарти в областта на интернет технологиите и браузърите предпочитат да се борят напразно.

Лично и обществено

Има много средства, чрез които интернет е достъпен (компютри, лаптопи, таблети, смартфони), а също така има много браузъри. Няма гаранция, че едно устройство ще покаже сайта във формата, в която разработчикът го е създал. Усилията на последните не винаги постигат целта и осигуряват на уеб дизайна едно разнообразие, тоест единството на показване на същността, където и да се разкрива пред посетителя.

Като разделяте личното и общественото, като използвате само това, което работи в последното, можете да постигнете забележим успех в дизайна. Красотата, артистичният момент и уеб дизайнът са съдбата на съответните специалисти и таланти. CSS е код, макар и много уникален. Неговата грижа е да опише стилове (опции за показване на информация). С появата мобилни устройства CSS беше зареден с реално кодиране под формата на медийни заявки. Така че възможността за повторен брак между дизайна и кода не е толкова нереалистична, колкото можеше да изглежда само преди няколко години.

Когато разработва CSS стилове, разработчикът разчита на личния си доказан опит и на тези CSS дизайни, които работят на повечето браузъри и удовлетворяват по-голямата част от посетителите на сайта. Трябва да използвате първото колкото е възможно повече и второто възможно най-малко, тогава има много по-голям шанс да получите резултат, който работи почти винаги и навсякъде.

Първо правило: надявайте се на стандарта, но не правете грешка сами

CSS: hover е, когато мишката "влиза" в елемент от страницата. Когато мишката щракне върху елемент, той става активен, но когато курсорът се премести встрани, той може отново да се промени и да се покаже в активно състояние. “:hover”, “active” и “visited” са най-популярните псевдо-класове при описване на стилове.

Много е удобно в кода на сайта да не се притеснявате за такива малки неща като преместване на мишката върху елементи. Чрез предоставяне на две описания в таблицата с описание на стила:

цвят на фона: зелен;

Получаваме го, когато задържите курсора на мишката върху елемента автоматична промянаоцветяване на текста от черно на бяло и промяна на фона на този елемент на зелен. Псевдокласовете могат да бъдат приложени към всеки елемент и да постигнат голямо разнообразие от визуални ефекти.

Второ правило: когато се доверявате на стандарти, фокусирайте се върху вашия код

Всичко би било наред, ако напредъкът остане на нивото на компютрите и лаптопите, оборудвани с мишки, и напредъкът клетъчни комуникациине доведе до появата на смартфони, таблети и други мобилни устройства, към които свързването на такова устройство е много проблематично.

От друга страна, само на джаджи, оборудвани със специален сензорен екран, става възможно да се манипулират пръстите директно върху тъч скрийн, както вече стана обичайно за смартфони, таблети и подобни устройства.

Яжте значителна разлика and:hover изобщо не работи тук, както бихме искали. Не можете да направите това без код и използването на медийни заявки не решава всички проблеми.

Съвместимостта е твърде скъпа в днешното време информационен свят, следователно, за да се гарантира правилната функционалност на сайта в него установени изискванияза уеб дизайн и внедряване на функционалност, за предпочитане е да се съсредоточите върху минимално необходимите случаи на употреба: CSS курсор, CSS фокус, CSS активен (посетен). Колкото повече код (както в браузъра, така и на сървъра) контролира уеб дизайна, толкова по-добре. Програмата е контрол, по-добре е този контрол да не се предава на сегашните стандарти, от които често не знаеш какво да очакваш.

Бутони и други елементи на страницата

CSS при насочване на мишката върху бутона е прекрасно решение, но като цяло всеки елемент на страницата е „бутон“. Сайтът трябва преди всичко да е жив и ако това не е включено в кода, ако задачата е да се създаде сайт, който да се развива адекватно на областта на приложение и да действа, като взема предвид поведението на посетителя, то поне с помощта на CSS стилове можете да добавите жизненост към елементите на страницата.

Използването на ефекти при задържане е удобно. С тяхна помощ можете лесно да добавите живот към страниците, но кодът не знае какво прави мишката на екрана, ако няма възможност да проследи нейното движение. От тази гледна точка, тоест когато кодът контролира движението на мишката (= движение на пръста на смартфон), той може самостоятелно да подчертае елемента или да го трансформира. Това няма нищо общо с псевдо-класовете, но дава пълен контрол на кода върху външния вид на страницата, позволявайки тя да бъде адекватно показвана на различни устройствав различни браузъри.

Клопки в таблиците със стилове

Невъзможно е да се каже, че стандартите в областта на описването на CSS стилове не знаят какво правят, но също така е невъзможно да се каже, че те взаимодействат напълно с други стандарти в областта на интернет програмирането.

Стиловете и псевдокласовете могат да бъдат описани на етапа на кодиране на страницата, в момента, когато сървърът генерира страницата и в динамика: вече в браузъра можете лесно да създадете нов стили промените съществуващия.

Използването на AJAX, когато не е необходимо да се регенерира страницата, за да се покаже реакция на действието на посетителя, а по-скоро промяната на нейния елемент или няколко елемента добавя малко „подправка“. „Приятелството“ на кодовете - това, което вече е в браузъра (JavaScript) и това, което е на сървъра (PHP) - е част от автора на сайта (програмиста).

Не само показването на неговите елементи на страницата, но и по-нататъшното им възприемане от кода значително зависи от това как се изпълнява алгоритъмът за това взаимодействие. Просто казано, псевдокласовете (в частност) са много добри за статични условия, нещо като за ветроходна яхта в чисто море с лек вятър- всичко е очевидно, достъпно и управляемо. Ако времето се промени, или вятърът се усили, или посетител предизвика извънредна ситуация, можете бързо да ударите рифа и да загубите посетителя.

Стандарт и неговата емулация

Ховърът може да бъде емулиран чрез JavaScript чрез използване на събитията onmouseover и onmouseout. Често това е мястото, където всичко свършва. От гледна точка на здравия разум, когато става въпрос за създаване на наистина работещ уебсайт, по-добре е да държите контрола в собствените си ръце, отколкото да го предоставите на митични стандарти, които се променят извън волята и желанието на разработчика.

Понякога можете да прочетете нещо като " тази възможносте наличен дори в IE“, но по-често можете да прочетете кои стилови описания се възприемат от определен браузър. Много по-рядко можете да научите как JavaScript се различава в определени браузъри.

Оценявайки натрупания опит, възхищавайки се на възможностите на Chrome и Opera, критикувайки бавността и инертността на браузъра от производителя (незабравимият IE програмист от Microsoft, скъп на сърцето на всеки програмист: „Добрият стар Internet ExplorerСамо мързеливите не се скараха. Или някой, който знае как да играе Клондайк само на компютър,”- цитат от неизвестен интернет автор), трябва да се придържате към златната среда: използвайте това, което работи навсякъде и винаги.

Хората се нуждаят от средства за работа; когато имат нужда от тръпка, те обикновено отиват в деловодството или театъра, но не и в интернет.

Емулация и контрол

Преди това, когато програмирането стъпваше на крака, беше обичайно да слушате по-възрастните и да пишете правилно. В днешно време има твърде много старейшини, всичко се променя твърде бързо и ако слушате всички, няма да ви стигне времето дори за много проста работа, към минимално функционален уебсайт.

Програмирането е преди всичко контрол и в случаите, когато стандартът определя правилата пристрастно или може да се очаква рязка промяна в правилото, неговото премахване и появата на ново, най-доброто решениеВинаги не е било да се вземат решения, а да се реализира необходимата функционалност на сайта с минимално възможен, но реално работещ код.

Първо, за тези, които все още не са напълно в темата или изобщо не са в темата, ще обясня накратко какво представляват ефектите на задържане. Това различни видовеефекти (изскачащи надписи, подсказки, плавни преходи, трансформация, завъртане, уголемяване, изместване и т.н. и т.н.), приложени към елементите на уебсайта при задържане на мишката върху тях. Тези ефекти могат да бъдат реализирани с помощта на различни jQuery добавки, и в чист CSS3.
Днес съм подготвил голяма селекция от оригинални ефекти при задържане на мишката за изображения, създадени с помощта на CSS3, без свързване на javascript библиотеки. Няма да говоря за предимствата и недостатъците на внедряването на ефекти на курсора в чист CSS3, това е друга тема, просто погледнете примерите и, ако е необходимо, използвайте този, който харесвате на уебсайта си. Всички ефекти, представени в прегледа, са снабдени с демонстрационен пример и подробна документация с изходни кодове. Ръководствата са предимно на буржоазен език, но всичко е повече или по-малко интуитивно.

Бих искал незабавно да обърна внимание на факта, че всички тези примери ще работят правилно само в съвременни браузъри, които поддържат CSS3 свойства.

За да не разваля цялостната картина, не изкривих имената на ефектите с машинен превод (с изключение на някои), оставих оригиналните заглавия, както ги нарече разработчикът.

Много интересен ефект при задържане на мишката върху миниатюрни изображения, използване на фини линии в дизайна и типографията. Няколко различни вида ефекти за появата на надписи на изображения, меки и ненатрапчиви 3D трансформации и плавни преходи на псевдоелементи. Работи само в модерни браузъри.

iHover е впечатляваща колекция от чисти CSS3 hover ефекти, с поддръжка на Bootstrap 3. Изграден върху Scss CSS(файл), лесно модифициран от променливи. Кодът е модулен, няма нужда да включвате целия файл. 30+ различни ефектив една опаковка. Всичко е доста добре документирано и ефектите са много лесни за използване. Всичко, което трябва да направите, е да изградите правилно HTML маркирането и да се свържете CSS файлда работиш.

Създава някои прости, но стилни ефекти при задържане на мишката за надписи на изображения. Идеята е да задържите курсора на мишката върху миниатюрите, за да изскочат бутоните за заглавието, името на автора и контакта. За някои ефекти се използват 3D визуални трансформации.

Много прост ефект на преход, без никакви специални звънци и свирки, напълно кръгло изображение в рамка, трансформира се чрез промяна на фокуса при задържане и това е всичко.

Ефекти при задържане на мишката за миниатюри с помощта на CSS3

Разработчикът позиционира работата си като пример за галерия с изображения с ефекти на преход, когато анотации (надписи) се появяват върху миниатюрите. Декларирана уверена подкрепа модерни браузъри, включително IE 9+. Разбира се, трудно е да го наречем пълноценна галерия, но ефектът от появата на подписи е доста интересен.

Следващ набор CSS правила, за да създадете впечатляващи ефекти на трансформация, когато задържите курсора на мишката върху идеално кръгли миниатюри. Пакетът съдържа 7 вида CSS3 преходи, много подробна документация за конфигурация и употреба. Ефектите се поддържат от всички съвременни браузъри.

Завъртане на миниатюри при задържане

Прост ефект на въртене на кръгли миниатюри, когато задържите курсора на мишката върху тях, приблизително същият можете да видите в моя блог, в съобщенията на публикации на главната страница. Реализирано с няколко реда css код.

Буквално преведено: „Секси ефект, когато задържите курсора на мишката върху изображения.“ Разбира се, едва ли ще забележите нещо толкова секси в този ефект, освен ако нямате развихрено въображение, но ефектът е интересен по свой начин и си заслужава вниманието.

Пет различни ефекта за изображения, когато задържите курсора на мишката върху тях. Изскачащи подписи в три варианта, завеси под формата на промяна на степента на прозрачност и въртене с хоризонтално движение.

4 вида анимационни ефекти за надписи на изображения, реализирани изключително чрез CSS3. Различни позиции при появяване и ефекти на преход, съвсем стандартен дизайн. За да разберете как работи анимацията, разгледайте източникНе намерих никакви демонстрационни страници или отделна документация.

Миниатюрни галерии, подредени в решетка с различни ефекти за изява на подписи, ротация, развитие, изскачане и др. Документацията за употреба и конфигурация е доста оскъдна, но ако наистина искате, можете да я разберете.

Този ефект не е нищо особено, банална промяна в яркостта на изображенията при задържане, освен че са добавени анимационни елементи. Ще трябва сами да разберете подробностите за внедряването, като изложите изходния код на демонстрацията.

Още един набор от 10 ефекта на курсора за изображения, различни модификации на миниатюри при задържане, уголемяване, завъртане, завъртане, затъмняване и др.

Ефект на анимация на границата

Различните рамкови анимационни ефекти около изображенията изглеждат доста привлекателни, има подробно ръководство за настройка и използване.

Оригинални ефекти при задържанена CSS3, използван за ефективния външен вид на надписи на миниатюри на изображения при задържане. Наборът от CSS правила включва 10 различни ефекта, които можете да използвате индивидуално различни снимки. Ефектите са наистина впечатляващи, особено като се има предвид, че всичко е направено с помощта на CSS3. Подробно ръководство, ще ви помогне да разберете какво е какво.

Идеята е да се създаде SVG, който е фонова форма за някакъв текст и се превръща в друга форма при задържане на мишката. По този начин можете да направите много различни варианти, в примера са показани три вида ефекти на прехода. Достойнство използвайки SVGе, че можем да променим размера на формуляра, за да съответства на размера на родителския контейнер.

Плъзгащи се изображения

Същността този ефекте, че изображението се мести нагоре и надолу, за да се покаже надписът. Ако работите със стиловите параметри, мисля, че можете да постигнете някои доста хубави ефекти, но по подразбиране всичко изглежда много просто.

С този ефект всичко е просто, надписите за снимки се плъзгат горе вдясно или долу вляво, под формата на лента с полупрозрачен тъмен фон, всичко е много просто преформатирано с помощта на css свойства.

Интересно решение: миниатюрите са представени в затъмнена форма; когато задържите курсора на мишката върху тях, изображенията се появяват и подписът изскача на светъл фон.

Надписът за изображението се появява от ъгъла и се разширява диагонално през цялата област на изображението.

Някои по-интересни решения за прилагане на изскачащи надписи за миниатюри на изображения. В онлайн редактора можете да експериментирате с параметрите и да постигнете по-впечатляващи резултати.

Набор от красиви ефекти при задържане на мишката върху миниатюри, различни видове външен вид и дизайн на надписи за снимки. Тънките линии в контраст с леко затъмнен фон създават лесни за четене информационни блокове.

Причудливи форми и ефект на увеличение, съчетани с анимиран ефект от появата на надписи за миниатюри на изображения.

Прекрасни ефекти от наслагване на икони върху миниатюри на изображения в различни варианти на външен вид. Примерът използва символ (+), очертан в кръг с радиус на границата: в CSS можете също да използвате шрифтове за икони, за да направите изскачащия панел по-информативен.

6 Надписи за снимки

6 Опции за показване на надписи на изскачащи изображения при задържане на мишката с помощта на CSS3. Подробен урокотносно внедряването и конфигурацията, достъпни източници за изтегляне.

Как да създадете някои фини и модерни ефекти при задържане на надписи.

Научете как да създадете някои прости, но стилни ефекти при задържане на мишката за надписи на изображения. Идеята е да има решетка от фигури и да се приложи ефект на задържане върху елементите, който ще разкрие надпис със заглавие, автор и бутон за връзка.

CSS3 Hover Effect, съобразен с посоката, с jQuery

Създайте ефект при задържане на курсора на мишката с помощта на CSS3 и jQuery.

Научете как да създадете ефект при задържане на курсора, като използвате CSS3 и jQuery. Идеята е малко наслагване да се плъзга върху някои миниатюри от посоката, от която идваме с мишката.

Ефекти на курсора на кръг с CSS преходи

Урок за това как да създавате различни ефекти на курсора върху кръгове с CSS преходи и 3D ротации

Този комплект CSS бутони се състои от някои прости, креативни и фини стилове и ефекти, които да ви вдъхновят. Ефектите могат да се видят при задържане на мишката върху някои бутони и щракване върху други. Най-често се използват CSS преходи, но също и CSS анимации и за някои бутони се използва малко JavaScript за добавяне/премахване на класове ефекти.

Ефекти при задържане на икона

Набор от прости ефекти на курсора на мишката върху кръгла икона с CSS преходи и анимации за ваше вдъхновение.

Ето колекция от прости ефекти при задържане на икона. Създайте фин и стилен ефект, като използвате CSS преходи и анимации върху котвите и техните псевдоелементи.

Първо, за тези, които все още не са напълно в темата или изобщо не са в темата, ще обясня накратко какво е това. Това са различни видове ефекти (изскачащи надписи, подсказки, плавни преходи, трансформация, завъртане, уголемяване, изместване и т.н. и т.н.), прилагани към елементите на уебсайта върху тях с курсора на мишката. Те могат да бъдат реализирани или с помощта на различни плъгини jQuery, или в чист .
Днес съм подготвил голяма селекция от оригинални ефекти при задържане на мишката за изображения, създадени с помощта на CSS3, без свързване на javascript библиотеки. Няма да говоря за предимствата и недостатъците на внедряването на ефекти на курсора в чист CSS3, това е друга тема, просто погледнете примерите и, ако е необходимо, използвайте този, който харесвате на уебсайта си. Всички ефекти, представени в прегледа, са снабдени с демонстрационен пример и подробна документация с изходни кодове. Ръководствата са предимно на буржоазен език, но всичко е повече или по-малко интуитивно.

iHover е впечатляваща колекция от чисти CSS3 ефекти на задържане, с поддръжка на Bootstrap 3. Изграден върху Scss CSS (файл), лесно модифициран с променливи. Кодът е модулен, няма нужда да включвате целия файл. 30+ различни ефекта в един пакет. Всичко е доста добре документирано и ефектите са много лесни за използване. Всичко, което трябва да направите, е да създадете правилно HTML маркирането и да включите CSS файла в работата си.

Ефекти при задържане на мишката за миниатюри с помощта на CSS3

Разработчикът позиционира работата си като пример за галерия с изображения с ефекти на преход, когато анотации (надписи) се появяват върху миниатюрите. Декларира се уверена поддръжка от модерни браузъри, включително IE 9+. Разбира се, трудно е да го наречем пълноценна галерия, но ефектът от появата на подписи е доста интересен.

Друг набор от CSS правила за създаване на впечатляващи ефекти на трансформация, когато задържите курсора на мишката върху перфектно кръгли миниатюри. Пакетът съдържа 7 вида CSS3 преходи, много подробна документация за конфигурация и употреба. Ефектите се поддържат от всички съвременни браузъри.