Сегодня я хочу поделиться с вами простым эффектом для форм, а именно: как улучшить обязательные поля в форме. Многие веб-формы выполнены в минималистичном стиле, то есть только набор самых необходимых данных для пользователей. Например, в форме регистрации вы не хотите, чтобы ваш потенциальный клиент заполнял слишком много полей, так как это может привести к тому, что пльзователь откажется от регистрации. Но есть и много других форм с дополнительной информацией, где пользователь готов или ему необходимо заполнить дополнительные поля. Это может быть форма заказа или объявление на сайте.
На этом уроке мы создадим аудио-плеер из Impressionist UI от Владимира Кудинова. Мы будем использовать CSS3 для оформления плеера и "MediaElement.js" для создания функциональности. MediaElement.js - это HTML5 аудио и видео плеер, который также работает в старых браузерах, используя Flash и Silverlight, чтобы имитировать HTML5 MediaElement API.
На этом уроке мы создадим слайд-шоу с эффектом параллакса при помощи некоторых свойств CSS3. Мы будем использовать радио-кнопки и родственные комбинаторы (sibling combinators) для управления слайдами. Там будет два фона и идея состоит в изменении местоположения фона и положения слайдера с использованием переходов (transitions) для того, чтобы создать эффект параллакса.
Графика используется в демо от: 5Milli (Global Vector Map) и WeGraphics (Free Vector Infographic Kit).
Пожалуйста, обратите внимание: итоговый результат этого урока будет работать как задумано только в браузерах, которые поддерживают соответствующие свойства CSS. Также смотрите пример создания эффекта параллакса при помощи CSS3 и jQuery.
Для понимания работы данного слайдера необходимы базовые знания CSS, особенно, что касается CSS3 переходов и анимации. Используя эти возможности CSS3, мы покажем как сделать функциональный слайдер для изображений.
