В данной подборке для вас собраны бесплатные jQuery/CSS3-эффекты наведения курсора на графические объекты. В веб-дизайне все эти эффекты творят чудеса. Так что, не стесняйтесь, выбирайте то, что нравится вам больше всего. Делитесь с нами мнениями в разделе комментариев внизу. Приятного просмотра!
01. Эффект наведения курсора с определённой стороны средствами CSS3 и jQuery
Узнайте, как создать эффект наведения курсора с определённой стороны средствами CSS3 и jQuery. Суть в том, чтобы вставить скользящую накладку со стороны наведения курсора.
02. CSS3-эффекты наведения курсора в пособии по построению веб-символов
Мы покажем вам, как внедрять новые CSS-эффекты наведения курсора - добавим веб-символам CSS-свойства переходности изображений.
03. Иконки социальных сетей с CSS3-эффектами наведения курсора
Мы сконструировали новый объёмный CSS3-эффект наведения курсора для социально-сетевых иконок. Плоды наших усилий можно, как всегда, увидеть на сайте Dabblet. Задействуются CSS3-переходы, средства трансформации и 3D-свойства.
04. Анимированный "отворяемый" шрифт
Пособие по построению анимированного объёмного шрифта с любопытным эффектом "отворения" за счёт псевдо-элементов, CSS-трансформаций и переходов. Идейной базой послужил проект Edenspiekermann "Отворяемый шрифт" (Open Type), весьма оригинальный способ отображения букв и возможность поэкспериментировать.
05. Увеличительное стекло для масштабирования картинок средствами jQuery и CSS3
Освойте построение реалистичной лупы средствами jQuery и CSS3. Наведите курсор на картинку, чтобы увидеть её в действии.
06. Подсветка и предпросмотр изображений средствами jQuery
В данном пособии мы покажем вам, как обеспечить подсветку и предпросмотр изображений, внедрённых в заметки или размещённых на странице. Удобный способ дать пользователям крупнее увидеть иллюстрирующую определённый контекст графику.
07. CSS3-эффекты наведения курсора в оформлении ресторанного меню
Покажем вам, как конструировать CSS3-эффекты наведения курсора с помощью CSS-свойств на примере образца дизайна, пригодного для построения специализированных веб-сайтов ресторанов, ресурсов о еде, продуктах и т. п. В данном пособии рассматривается построение красивой графики с видимым и скрытым текстом за счёт использования только CSS-переходов и тени от рамочных модулей.
08. Оригинальные эффекты наведения курсора средствами CSS3
Возможности CSS3 огромны, и в данном пособии мы рассмотрим весьма необычный способ их применения. Сконструируем несколько вариантов эффекта наведения курсора для пиктограмм с помощью CSS3-переходов. При наведении курсора на пиктограмму будет отображаться её описание, в каждом случае по-разному.
09. Эффекты наведения курсора в виде простых иконок
Эффекты наведения курсора в виде комплекта простых круглых иконок за счёт CSS-переходов и анимации вам на заметку.
10. Эффект наведения курсора в SVG-контурах
В данном пособии мы воспроизведём эффект наведения курсора с сайта The Christmas Experiments. Контуры построим средствами SVG, а анимацию при наведении курсора обеспечим средствами Snap.svg.
11. 3D-эффект наведения курсора для пиктограмм и изображений
Простое упражнение на построение трёхмерной CSS3-конструкции с превращением графики в реалистичный 3D-параллелепипед с красивой тенью при наведении курсора.
12. Простые, но шикарные CSS3-эффекты пограничных переходов
Потрясающие эффекты пограничных переходов. Изначально сконструированы ksk1015. По сути, азы CSS3-кодировки, а результат замечательный.
13. Построение простого меню навигации с эффектами переходов при наведении курсора
Одна из моих первых CSS3-разработок. Простое меню навигации с эффектами переходов при наведении курсора.
14. Примеры анимации и переходов с псевдо-элементами
Творческие упражнения в построении любопытных эффектов с применением анимации и переходов на псевдо-элементах.
15. jQuery-эффект наведения курсора в пособии по построению скользящих слоёв
В данном пособии мы предложим вам очень оригинальный способ совмещения скольжения слоёв с jQuery-эффектом наведения курсора. При наведении курсора на скользящий слой анимированная графика управляется движением мыши в пределах всего охвата её порта, координаты смещения изображения определяются CSS-стилями, по-разному задаваемыми нами в примере.
16. CSS3-эффект наведения курсора в пособии по построению круговых изображений
В данном пособии мы покажем вам новые CSS3-эффекты наведения курсора на примере круглого изображения, подвергаемого анимационным манипуляциям - ваши веб-заготовки для интерфейсов станут лучше.
17. Построение эффекта перекатывания при наведении курсора средствами CSS3-анимации
В данном пособии мы задействуем CSS3-анимацию и переходы, чтобы заставить кнопку "следуйте за мной в Twitter" перекатываться при наведении курсора.
18. jQuery-увеличитель AnythingZoomer
19. CSS3-эффект отображения описаний в накладном слое
Пособие по построению эффекта проявления накладного слоя для отображения подробных сведений об объекте или изображении. Эффект задаётся исключительно средствами CSS за счёт сочетания псевдо-класса :checked с селектором сестринского элемента.
20. CSS-управляемые кнопки с подсказками, всплывающими при наведении курсора
Вот вам ещё социально-сетевые кнопки для будущих проектов, смастерил их сегодня и предлагаю их лишь в качестве примера, а вы пользуйтесь ими по вашему усмотрению. Как выглядит эффект отображения всплывающих подсказок, вы, наверное, видите на картинке, а рассмотреть кнопку в действии можно, запустив демо-ролик.
21. Удобные и практичные jQuery-подсказки к изображениям
Контекстные окна подсказок с эффектами снижения и усиления резкости отображаются при наведении пользователем курсора на пиктограммы. Скрипт пригодится вам на вашем веб-сайте.
22. jQuery-модуль отображения эффекта наведения курсора на изображения Adipoli
Задать эффект наведения курсора на изображения очень легко. Поместите приведённые ниже данные в ваш заглавный тег.
23. Эффект сложенной бумаги
По сути, пробный образец jQuery-модуля, позволяющего вам разворачивать элементы для отображения дополнительного контента почти так же, как бумажный лист. Способ разворачивания и количество шагов процесса можно задавать самим.
24. Эффекты отображения надписей при наведении курсора
Пособие по построению изящных и современных надписей, отображаемых наведением курсора.
25. Flat Folio
Простая плоская тема оформления портфолио, которая не подведёт. Увидел тему оформления в подобном стиле и решил её воссоздать. Добавил немного animate.css от Дэна Идена (Dan Eden) и эффект наведения курсора.
26. Кнопки в оригинальном оформлении
Кнопки в оригинальном современном оформлении и эффекты вам на заметку.
27. Отображение текста при наведении курсора: Треугольник-накладка, надвигаемый на уголок
28. Плоский логотип с эффектом наведения курсора
29. Симпатичные CSS- и jQuery-эффекты наведения курсора
Заметка-пособие по построению симпатичных эффектов наведения курсора на ваши изображения средствами jQuery и CSS.
30. Анимированная схема наличия полезных навыков средствами Raphael
В данном пособии мы покажем вам, как строить схемы с помощью Raphael – компактной javascript-библиотеки, отлично подходящей для работы с векторной графикой.
31. Реалистичный эффект наведения курсора
32. Построение эффекта пограничной анимации средствами SVG и CSS
На веб-сайте Карла Филипа Бреннера (Carl Philipe Brenner) встречается весьма оригинальная и изящная анимация, поэтому сегодня мы попробуем рассмотреть способ воссоздания эффекта пограничной анимации наложением CSS-переходов на SVG-контуры.
33. Slim
Наведите курсор на эмблему. Затем нажмите и удерживайте кнопку мыши.
34. CSS-кнопка
35. Плитки с анимацией
