От автора: Экспериментальная полноэкранная навигация, раскрывающаяся по форме окружности и анимированная с помощью CSS и jQuery.

Недавно я тестировала новое приложение Ping для iOS. Так вот эффект, который происходил при нажатии на кружок для переключения страницы, был настолько классным, что я попробовала создать нечто похожее на CSS и jQuery. Результат получился довольно впечатляющим, поэтому мы решили опубликовать пример такого эффекта на сайте CodyHouse 🙂 Эта навигация является экспериментальной, хотя поддерживается всеми основными браузерами – мы использовали Velocity.js – и я уверена, что вы, друзья, найдете для этой навигации креативное применение!

Читать далее →

От автора: Элементы формы! Сколько мучений доставляет их оформление, не так ли? Так и хочется заменить их все какой-нибудь своей разметкой и CSS. Но проблема кроется в том, что весь набор элементов div и span будет бесполезен с семантической точки зрения, и у него будут отсутствовать те поведенческие свойства, которые делают доступным стандартный элемент input с типом radio.

Читать далее →

От автора: Небольшая коллекция вдохновляющих стилей и эффектов для всплывающих при наведении подсказок. Используя CSS трансформации, скругления углов и SVG, мы можем создать интересные современные всплывающие подсказки (tooltips).

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

Читать далее →

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

Читать далее →

От автора: Данная обучающая статья о том, как воссоздать эффект предзагрузки страницы, увиденный на сайте Fontface Ninja. Мы собираемся использовать CSS анимацию, 3D трансформации и SVG.

Читать далее →

От автора: Привлекающий внимание эффект заливки для ваших иконок способен превратить простую страницу в классную и динамичную.

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

Читать далее →

От автора: Отзывчивый слайдер-карусель, отображающий выбранные отзывы клиентов, созданный при помощи CSS и jQuery.

Сладер-карусель с отзывами является стратегически важным разделом сайта. Это маркетинговый инструмент, основная цель которого – сообщить пользователям, что «этот продукт/услуга уже был опробован. И он является хорошим. Верьте нам!». Сегодня мы поделимся с вами способом создания простого отзывчивого модуля для отзывов клиентов, который можно легко встроить в ваш дизайн. Кроме этого мы предусмотрели вариант, когда пользователям захочется посмотреть больше отзывов. Для этого мы добавили кнопку, при нажатии на которую, с классным CSS3 переходом, открывается модальное окно со всеми отзывами.

Читать далее →

От автора: В своей статье Создание эффективной формы для пожертвований Брэд Фрост (Brad Frost) рекомендует использовать кнопки вместо переключателей c типом radio, цитируя твит Люка Роблевски (Luke Wroblewski). Я не согласился, а Брэд ответил, что у него другая точка зрения. После того как к обсуждению присоединилось больше людей, демо-пример был обновлен. И в нем уже стали использовать radio переключатели, но я считаю, что можно сделать еще лучше. Я собираюсь продемонстрировать, что простой хороший семантический HTML + CSS могут дать нам очень многое.

Читать далее →

От автора: Веб-браузеры позволяют вам изменить внешний вид многих элементов на странице с помощью CSS. Но при отрисовке некоторых элементов на странице, браузеры упорно не хотят изменять их оформление. Например, такие элементы формы, как выпадающие списки (select), радиокнопки (radio) и чекбоксы (checkbox) имеют свой определенный внешний вид в каждой операционной системе, и браузеры стараются навязать этот вид для веб-форм.

Читать далее →

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

Фиксированная навигация с эффектом плавной прокрутки, созданной при помощи jQuery. В создании этого эффекта нет ничего необычного, но этот прием пригодится вам для создания дополнительного меню, позволяющего быстро перемещаться по контенту страницы. Сейчас данный эффект можно увидеть на многих сайтах. Хорошим примером, который мне запомнился, является сайт Disqus For Websites. Удачным решением является анимация логотипа и двух кнопок с «призывом к действию» (call-to-action) при появлении фиксированной навигации.

Читать далее →