Нам кажется, что вы уже встречали в интернете навигационные меню в виде лава-лампы (разработанные при помощи jQuery-плагинов). Сегодня мы хотим научить вас создавать такой же эффект посредством чистого кода CSS3 (без использования js). Сегодня мы воспользуемся переходами в CSS3 (для анимации элементов). Итак, если вы готовы, мы можем приступать.

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

Навигационные меню в веб-дизайне должны быть максимально доступными и простыми. Можно просто создать неупорядоченный список, выстроить его по левому краю страницы и готово! Так как сегодня мы наблюдаем стремительное внедрение адаптивных дизайнов, разработчикам и дизайнерам приходится сталкиваться с новыми испытаниями.

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

Сегодня мы немного поэкспериментируем со смежным и родственным комбинатором и псевдо-классом :checked. Используя скрытые поля ввода и ярлыки, мы создадим гармошку для анимации областей с контентом посредством лишь кода CSS.

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

В нашем сегодняшнем руководстве мы будем разрабатывать красивое разноцветное и кросс-браузерное CSS3-меню со скользящим (будем использовать переходы CSS3) переключателем цветов на CSS3. Меню будет основано на UL-LI.

PageScroller – это привлекательный jQuery-плагин для создания прокручивающихся веб-страниц. Очень гибкий плагин, который без труда можно интегрировать в любую веб-страницу. Также стоит отметить, что он в автоматическом режиме создает навигацию, располагающуюся в боковых панелях или в верхней части страницы. Клик по пункту навигации плавно перенесет пользователя к соответствующему разделу.

Сегодня мы хотим поделиться с вами экспериментальной 3D-галереей, в которой используются трехмерные трансформации, представленные в CSS3.

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

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

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

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