40 CSS3 jQuery красивостей для ваших новых проектов
Много функциональных красивых решений для вдохновения или использования при разработке веб-проектов. В заметке: различные меню, слайдеры, вкладки, всплывающие подсказки, полноценное решение для оформления портфолио и многое другое.
1. CSS текстовый эффект
Плагин для реализации сменяющихся слов с различными анимированными эффектами. CSS эффект подойдет для реализации промо-сайтов и анимированных баннеров.
Демо
2. CSS3 вертикальные и горизонтальные вкладки (табы)
Реализация разбиения содержимого страницы на вкладки (табы) с использованием анимированных CSS3 эффектов. Четыре варианта исполнения: горизонтальные и вертикальные табы с различными анимированными эффектами.
3. Адаптивный jQuery слайдер на основе плагина IMPRESS.JS
Классный слайдер с имитацией 3D эффекта при пролистывании слайдов. При увеличении/уменьшении размера экрана — изменяется размер шрифта, изображений и всех элементов на слайде, что гарантирует корректное отображение при любом расширении экрана. Предусмотрена автоматическая прокрутка.
Демо
4. jQuery CSS плагин «Responsive Horizontal Layout»
jQuery решение для создания удобной навигации по разделам документа без перезагрузки страницы. Каждый раздел отображается в отдельном блоке с вертикальной прокруткой, а переход между ними можно осуществить как с помощью клика мыши, так и воспользовавшись заглавием (при большом расширении экранов содержание заглавие отображается с левой стороны, при просмотре сайта на малом экране — сверху документа).
Демо
5. HTML5 CSS3 стильная форма авторизации и регистрации
Переключатель между формами авторизации и регистрации с проверкой заполнения полей. Для того, чтобы переключиться на форму регистрации на демонстрационной странице нажмите на ссылку «Join us» снизу формы
Демо
6. Плагин «Content Navigator» с применением CSS3
Реализация навигации по содержимому в виде Список категорий → Список разделов → Содержимое раздела. Навигация сопровождается различными JS эффектами.
Демо
7. CSS3 слайд-шоу с Parallax эффектом
Пролистывание слайдов осуществляется с Parallax эффектом (движение слоев с различной скоростью, в совокупности создают 3D эффект). Размер слайдера изменяется пропорционально изменению размера окна браузера.
Демо
8. Аудио слайд-шоу с использованием jQuery плагина jPlayer
Слайд-шоу с музыкальным сопровождением. Есть возможность ставить на паузу или проматывать музыкальную композицию.
Демо
9. Parallax эффект при прокручивании страницы с помощью jQuery и CSS
jQuery решение для реализации 3D эффекта при прокрутке страницы.
Демо
10. jQuery плагин для загрузки файлов на сервер «File Upload»
Функциональное свежее решение для загрузки файлов на сервер. Возможна загрузка нескольких файлов одновременно.
11. Своеобразное меню на jQuery и CSS
При выборе пункта меню область с его содержимым раскрывается поверх.
12. Горизонтальное анимированное jQuery меню
Выпадающее горизонтальное меню с интересным jQuery эффектом появления вложенных пунктов.
13. «TimeLine» плагин для хронологического отображения выполненных работ в портфолио
Обалденный jQuery CSS плагин, будет очень полезным дополнением для сайта любой веб-студии или фрилансера. С его помощью можно наглядно отобразить примеры выполненных работ с разбивкой по времени. Внизу отображается сама временная шкала, а сверху выполненные работы. Для перехода между работами можно использовать как шкалу, так и стрелки влево/вправо.
14. Галерея «TouchTouch», оптимизированная для просмотра с мобильных устройств
15. CSS3 слайдер изображений «Cycle Slider»
16. CSS галерея изображений в стиле аккордеон
При клике на название выезжает изображение с описанием. Используется только CSS3.
Демо
17. Классные яркие всплывающие подсказки jQuery и CSS3
Всплывающие jQuery подсказки в 7 стилевых оформлениях. Легко подключить и использовать в своих проектах.
18. «jPages» галерея изображений с миниатюрами
Если изображений в галерее больше 5, то появляются стрелки влево/вправо для навигации по фотографиям.
19. «Dark Menu» выпадающее CSS меню
20. Стильное выпадающее CSS3 меню
Демо
21. «PlusSlider» слайдер
Слайдами могут быть не только изображения, но и другой HTML контент.
Демо
22. jQuery плагин «Real Shadow»
Плагин для создания фотореалистичных теней.
23. HTML5 CSS3 аудио плеер для сайта
Демо
24. jQuery карусель «Rcarousel»
25. jQuery слайдер/слайд-шоу «Rhinoslider»
Свежая реализация слайдера.
Демо
26. Перенос текста «Bacon»
Необычный эффект переноса текста на странице на новую строчку по кривой или заданной линии с определенным шагом смещения.
Демо
27. Текстовый эффект «slabText»
Плагин автоматически рассчитывает размер шрифта для каждого слова таким образом, чтобы весь текст занимал одинаковую область по ширине, вне зависимости от количества слов в строке.
Демо
28. Выбор вида отображения блоков с использованием CSS3
Четыре вида отображения блоков: изображение с описанием в три колонки, изображение с описанием в одну колонку, только изображения, только текстовое описание. Для переключения вида отображения блоков необходимо воспользоваться пиктограммами сверху.
29. CSS3 всплывающие подписи при наведении курсора на блок
При наведении курсора на изображение с имитацией 3D эффекта всплывает текстовое описание.
30. Стильные всплывающие модальные окна
Модальные окна с использованием CSS3.
31. Карусель с использованием jQuery
32. Интересное меню для навигации по одностраничным сайтам
Меню выполнено в трех различных стилевых оформлениях.
33. Оригинальное субменю с использованием jQuery
34. Галерея изображений «Thumba»
Демо
35. Всплывающие подсказки jQuery CSS3
36. Меню-слайдер на jQuery
Гибрид меню и слайдера: при наведении курсора на пункт сменяются слайды с описанием пункта, при клике — переход на выбранную страницу из меню.
37. Цветное jQuery меню
Демо
38. Анимированные кнопки социальных сетей
Анимированные кнопки социальных сетей со всплывающими подсказками при наведении.
Демо