40 CSS 3 и 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. 
Урок по созданию галереи [in English].

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. Анимированные кнопки социальных сетей

Анимированные кнопки социальных сетей со всплывающими подсказками при наведении.

39. Вкладки на jQuery

40. Многоуровневое выпадающее CSS3 меню в стиле MS Office