—»     —»   Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику
  Раздел: Тематические обзоры   Нет комментариев  

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику



jQuery- и CSS3-эффекты наведения курсора на графику теперь упростили нам задачу наложения шикарных эффектов на ваши веб-страницы. Посредством jQuery всё стало гораздо проще, и сейчас даже новичку под силу качественно и профессионально сконструировать образец веб-дизайна с роскошными эффектами наведения курсора. jQuery это, по сути, межплатформенная javascript-библиотека, облегчающая жизнь HTML-программистам и очень популярная среди разработчиков.

В данной подборке для вас собраны бесплатные jQuery/CSS3-эффекты наведения курсора на графические объекты. В веб-дизайне все эти эффекты творят чудеса. Так что, не стесняйтесь, выбирайте то, что нравится вам больше всего. Делитесь с нами мнениями в разделе комментариев внизу. Приятного просмотра!

01. Эффект наведения курсора с определённой стороны средствами CSS3 и jQuery

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Узнайте, как создать эффект наведения курсора с определённой стороны средствами CSS3 и jQuery. Суть в том, чтобы вставить скользящую накладку со стороны наведения курсора.

02. CSS3-эффекты наведения курсора в пособии по построению веб-символов

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Мы покажем вам, как внедрять новые CSS-эффекты наведения курсора - добавим веб-символам CSS-свойства переходности изображений.

03. Иконки социальных сетей с CSS3-эффектами наведения курсора

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Мы сконструировали новый объёмный CSS3-эффект наведения курсора для социально-сетевых иконок. Плоды наших усилий можно, как всегда, увидеть на сайте Dabblet. Задействуются CSS3-переходы, средства трансформации и 3D-свойства.

04. Анимированный "отворяемый" шрифт

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Пособие по построению анимированного объёмного шрифта с любопытным эффектом "отворения" за счёт псевдо-элементов, CSS-трансформаций и переходов. Идейной базой послужил проект Edenspiekermann "Отворяемый шрифт" (Open Type), весьма оригинальный способ отображения букв и возможность поэкспериментировать.

05. Увеличительное стекло для масштабирования картинок средствами jQuery и CSS3

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Освойте построение реалистичной лупы средствами jQuery и CSS3. Наведите курсор на картинку, чтобы увидеть её в действии.

06. Подсветка и предпросмотр изображений средствами jQuery

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

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

07. CSS3-эффекты наведения курсора в оформлении ресторанного меню

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

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

08. Оригинальные эффекты наведения курсора средствами CSS3

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

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

09. Эффекты наведения курсора в виде простых иконок

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Эффекты наведения курсора в виде комплекта простых круглых иконок за счёт CSS-переходов и анимации вам на заметку.

10. Эффект наведения курсора в SVG-контурах

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

В данном пособии мы воспроизведём эффект наведения курсора с сайта The Christmas Experiments. Контуры построим средствами SVG, а анимацию при наведении курсора обеспечим средствами Snap.svg.

11. 3D-эффект наведения курсора для пиктограмм и изображений

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Простое упражнение на построение трёхмерной CSS3-конструкции с превращением графики в реалистичный 3D-параллелепипед с красивой тенью при наведении курсора.

12. Простые, но шикарные CSS3-эффекты пограничных переходов

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Потрясающие эффекты пограничных переходов. Изначально сконструированы ksk1015. По сути, азы CSS3-кодировки, а результат замечательный.

13. Построение простого меню навигации с эффектами переходов при наведении курсора

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Одна из моих первых CSS3-разработок. Простое меню навигации с эффектами переходов при наведении курсора.

14. Примеры анимации и переходов с псевдо-элементами

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Творческие упражнения в построении любопытных эффектов с применением анимации и переходов на псевдо-элементах.

15. jQuery-эффект наведения курсора в пособии по построению скользящих слоёв

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

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

16. CSS3-эффект наведения курсора в пособии по построению круговых изображений

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

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

17. Построение эффекта перекатывания при наведении курсора средствами CSS3-анимации

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

В данном пособии мы задействуем CSS3-анимацию и переходы, чтобы заставить кнопку "следуйте за мной в Twitter" перекатываться при наведении курсора.

18. jQuery-увеличитель AnythingZoomer

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

19. CSS3-эффект отображения описаний в накладном слое

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Пособие по построению эффекта проявления накладного слоя для отображения подробных сведений об объекте или изображении. Эффект задаётся исключительно средствами CSS за счёт сочетания псевдо-класса :checked с селектором сестринского элемента.

20. CSS-управляемые кнопки с подсказками, всплывающими при наведении курсора

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

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

21. Удобные и практичные jQuery-подсказки к изображениям

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Контекстные окна подсказок с эффектами снижения и усиления резкости отображаются при наведении пользователем курсора на пиктограммы. Скрипт пригодится вам на вашем веб-сайте.

22. jQuery-модуль отображения эффекта наведения курсора на изображения Adipoli

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Задать эффект наведения курсора на изображения очень легко. Поместите приведённые ниже данные в ваш заглавный тег.

23. Эффект сложенной бумаги

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

По сути, пробный образец jQuery-модуля, позволяющего вам разворачивать элементы для отображения дополнительного контента почти так же, как бумажный лист. Способ разворачивания и количество шагов процесса можно задавать самим.

24. Эффекты отображения надписей при наведении курсора

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Пособие по построению изящных и современных надписей, отображаемых наведением курсора.

25. Flat Folio

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Простая плоская тема оформления портфолио, которая не подведёт. Увидел тему оформления в подобном стиле и решил её воссоздать. Добавил немного animate.css от Дэна Идена (Dan Eden) и эффект наведения курсора.

26. Кнопки в оригинальном оформлении

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Кнопки в оригинальном современном оформлении и эффекты вам на заметку.

27. Отображение текста при наведении курсора: Треугольник-накладка, надвигаемый на уголок

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

28. Плоский логотип с эффектом наведения курсора

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

29. Симпатичные CSS- и jQuery-эффекты наведения курсора

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Заметка-пособие по построению симпатичных эффектов наведения курсора на ваши изображения средствами jQuery и CSS.

30. Анимированная схема наличия полезных навыков средствами Raphael

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

В данном пособии мы покажем вам, как строить схемы с помощью Raphael – компактной javascript-библиотеки, отлично подходящей для работы с векторной графикой.

31. Реалистичный эффект наведения курсора

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

32. Построение эффекта пограничной анимации средствами SVG и CSS

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

На веб-сайте Карла Филипа Бреннера (Carl Philipe Brenner) встречается весьма оригинальная и изящная анимация, поэтому сегодня мы попробуем рассмотреть способ воссоздания эффекта пограничной анимации наложением CSS-переходов на SVG-контуры.

33. Slim

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

Наведите курсор на эмблему. Затем нажмите и удерживайте кнопку мыши.

34. CSS-кнопка

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику

35. Плитки с анимацией

Чудесная коллекция бесплатных jQuery- и CSS3-эффектов наведения курсора на графику
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, CSS
Опубликовал Design FactoRy   Прочитано (раз): 11405   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031