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

На этом уроке мы создадим слайд-шоу с эффектом параллакса при помощи некоторых свойств CSS3. Мы будем использовать радио-кнопки и родственные комбинаторы (sibling combinators) для управления слайдами. Там будет два фона и идея состоит в изменении местоположения фона и положения слайдера с использованием переходов (transitions) для того, чтобы создать эффект параллакса.

Графика используется в демо от: 5Milli (Global Vector Map) и WeGraphics (Free Vector Infographic Kit).

Пожалуйста, обратите внимание: итоговый результат этого урока будет работать как задумано только в браузерах, которые поддерживают соответствующие свойства CSS. Также смотрите пример создания эффекта параллакса при помощи CSS3 и jQuery.

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

Модуль CSS3 Grid Layout — это один из самых интересных, на мой взгляд, модулей в семействе CSS3. Официальная история модуля в виде черновика спецификации насчитывает сегодня чуть менее года. О предварительном анонсе еще с названием CSS Grid Alignment на TPAC 2010 Владимир Юнев писал еще в декабре 2010. Надо также отметить, что с чуть другим названием и несколько отличным синтаксисом, но с той же сутью, он был заявлен в качестве WD еще в 2007г. Сегодня работы по доводке модуля идут полным ходом, предварительная реализация уже есть в Internet Explorer 10 и есть надежда, что поддержка новых возможностей также появится в будущих версиях других популярных браузеров.

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

Пожалуйста, обратите внимание: результат этого урока будет работать только в браузерах, поддерживающих CSS анимацию.

Итак, давайте начнем! В уроке мы рассмотрим пример из Demo 2.