4 834 Скрипты / Menu & Nav

Breadcrumbs на CSS

Хлебные крошки сделанные с помощью CSS3 - breadcrumbs. Иерархическая структура навигации позволяющая пользователю определить, как глубоко он находится в структуре сайта.

Breadcrumbs на CSS
3 013 Скрипты / Slider

Эффект шторок для изображений

Сегодня сделаем на чистом CSS3 смену изображений через эффект шторок - раздвигающихся панелей. Идея заключается в использовании фоновых изображений для панелей и их анимации при клике по <label>.

Эффект шторок для изображений
2 595 Скрипты / Menu & Nav

CSS3 меню

Аккуратненькое и стильное меню на css3. Впрочем его элементы можно использовать и как кнопки для сайта.

CSS3 меню
17 345 Скрипты / Layout

Скошенные элементы на CSS3

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

Скошенные элементы на CSS3
3 334 Скрипты / Layout

Размытость элементов

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

Размытость элементов
9 728 Скрипты / Animation

Последовательность анимаций на CSS3

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

Последовательность анимаций на CSS3
6 186 Скрипты / Loading

Прелоадер на CSS3

Сделаем CSS3 анимацию, которую можно будет использовать в качестве прелоадера, статуса загрузки чего-либо. Работает в Firefox, Chrome и Safari.

Прелоадер на CSS3
2 917 Скрипты / Menu & Nav

Размытое меню с переходами на CSS3

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

Размытое меню с переходами на CSS3