Войти
Freeweber

Материалы для вебмастеров

» » » 40 CSS 3 и Jquery красивостей для сайта

40 CSS 3 и Jquery красивостей для сайта

1. CSS текстовый эффект

CSS текстовый эффект

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

2. CSS3 вертикальные и горизонтальные вкладки (табы)

CSS3 вертикальные и горизонтальные вкладки (табы)

Реализация разбиения содержимого страницы на вкладки (табы) с использованием анимированных CSS3 эффектов. Четыре варианта исполнения: горизонтальные и вертикальные табы с различными анимированными эффектами.

3. Адаптивный jQuery слайдер на основе плагина IMPRESS.JS

Адаптивный jQuery слайдер

Классный слайдер с имитацией 3D эффекта при пролистывании слайдов. При увеличении/уменьшении размера экрана — изменяется размер шрифта, изображений и всех элементов на слайде, что гарантирует корректное отображение при любом расширении экрана. Предусмотрена автоматическая прокрутка.

4. jQuery CSS плагин «Responsive Horizontal Layout»

jQuery CSS плагин «Responsive Horizontal Layout»

jQuery решение для создания удобной навигации по разделам документа без перезагрузки страницы. Каждый раздел отображается в отдельном блоке с вертикальной прокруткой, а переход между ними можно осуществить как с помощью клика мыши, так и воспользовавшись заглавием (при большом расширении экранов содержание заглавие отображается с левой стороны, при просмотре сайта на малом экране — сверху документа).

5. HTML5 CSS3 стильная форма авторизации и регистрации

HTML5 CSS3 стильная форма авторизации и регистрации

Переключатель между формами авторизации и регистрации с проверкой заполнения полей. Для того, чтобы переключиться на форму регистрации на демонстрационной странице нажмите на ссылку «Join us» снизу формы

6. Плагин «Content Navigator» с применением CSS3

Плагин «Content Navigator» с применением CSS3

Реализация навигации по содержимому в виде Список категорий → Список разделов → Содержимое раздела. Навигация сопровождается различными JS эффектами.

7. CSS3 слайд-шоу с Parallax эффектом

CSS3 слайд-шоу с Parallax эффектом

Пролистывание слайдов осуществляется с Parallax эффектом (движение слоев с различной скоростью, в совокупности создают 3D эффект). Размер слайдера изменяется пропорционально изменению размера окна браузера.

8. Аудио слайд-шоу с использованием jQuery плагина jPlayer

Аудио слайд-шоу с использованием jQuery плагина jPlayer

Слайд-шоу с музыкальным сопровождением. Есть возможность ставить на паузу или проматывать музыкальную композицию.

9. Parallax эффект при прокручивании страницы с помощью jQuery и CSS

Parallax эффект при прокручивании страницы с помощью jQuery и CSS

jQuery решение для реализации 3D эффекта при прокрутке страницы. Вы также можете подробнее почитать по-русски.

10. jQuery плагин для загрузки файлов на сервер «File Upload»

jQuery плагин для загрузки файлов на сервер «File Upload»

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

11. Своеобразное меню на jQuery и CSS

Своеборазное меню на jQuery и CSS

При выборе пункта меню область с его содержимым раскрывается поверх.

12. Горизонтальное анимированное jQuery меню

Горизонтальное анимированное jQuery меню

Выпадающее горизонтальное меню с интересным jQuery эффектом появления вложенных пунктов.

13. «TimeLine» плагин для хронологического отображения выполненных работ в портфолио

«TimeLine» плагин для хронологического отображения выполненных работ в портфолио

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

14. Галерея «TouchTouch», оптимизированная для просмотра с мобильных устройств

Галерея оптимизированная для просмотра с мобильных устройств «TouchTouch»

15. CSS3 слайдер изображений «Cycle Slider»

CSS3 слайдер изображений

16. CSS галерея изображений в стиле аккордеон

CSS галерея изображений в стиле аккордеон

При клике на название выезжает изображение с описанием. Используется только CSS3. 
Урок по созданию галереи [in English].

17. Классные яркие всплывающие подсказки jQuery и CSS3

CSS3 слайдер изображений

Всплывающие jQuery подсказки в 7 стилевых оформлениях. Легко подключить и использовать в своих проектах.

18. «jPages» галерея изображений с миниатюрами

«jPages» галерея изображений с миниатюрами

Если изображений в галерее больше 5, то появляются стрелки влево/вправо для навигации по фотографиям.

19. «Dark Menu» выпадающее CSS меню

«Dark Menu» выпадающее CSS меню

20. Стильное выпадающее CSS3 меню

Стильное выпадающее CSS3 меню

21. «PlusSlider» слайдер

«PlusSlider» слайдер

Слайдами могут быть не только изображения, но и другой HTML контент.

22. jQuery плагин «Real Shadow»

jQuery плагин «Real Shadow»

Плагин для создания фотореалистичных теней.

23. HTML5 CSS3 аудио плеер для сайта

HTML5 CSS3 аудио плеер для сайта

24. jQuery карусель «Rcarousel»

jQuery карусель «Rcarousel»

25. jQuery слайдер/слайд-шоу «Rhinoslider»

jQuery слайдер/слайд-шоу «Rhinoslider»

Свежая реализация слайдера.

26. Перенос текста «Bacon»

Текстовый эффект переноса текста

Необычный эффект переноса текста на странице на новую строчку по кривой или заданной линии с определенным шагом смещения.

27. Текстовый эффект «slabText»

Текстовый эффект «slabText»

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

28. Выбор вида отображения блоков с использованием CSS3

Выбор вида отображения блоков с использованем CSS3

Четыре вида отображения блоков: изображение с описанием в три колонки, изображение с описанием в одну колонку, только изображения, только текстовое описание. Для переключения вида отображения блоков необходимо воспользоваться пиктограммами сверху.

29. CSS3 всплывающие подписи при наведении курсора на блок

CSS3 всплывающие подписи при наведении курсора на блок

При наведении курсора на изображение с имитацией 3D эффекта всплывает текстовое описание. 

30. Стильные всплывающие модальные окна

Стильные высплывающие модальные окна

Модальные окна с использованием CSS3.

31. Карусель с использованием jQuery

Карусель с использованием jQyery

32. Интересное меню для навигации по одностраничным сайтам

Интересное меню для навигации по одностраничным сайтам

Меню выполнено в трех различных стилевых оформлениях.

33. Оригинальное субменю с использованием jQuery

Оригинальное субменю с использованием jQuery

34. Галерея изображений «Thumba»

Галерея изображений

35. Всплывающие подсказки jQuery CSS3

Всплывающие подсказки

36. Меню-слайдер на jQuery

Меню-слайдер на jQuery

Гибрид меню и слайдера: при наведении курсора на пункт сменяются слайды с описанием пункта, при клике — переход на выбранную страницу из меню.

37. Цветное jQuery меню

Анимированное цветное меню

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

Анимированные кнопки социальных сетей

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

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

Вкладки на jQuery

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

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



22.05.2013
Просмотров: 21 195
Похожие статьи:

Комментарии: