CSS3 для веб-дизайнеров

Как и в других примерах этой книги, мы используем множественные фоны уже сегодня. Мы двигаемся вперед, пользуясь CSS3-свойством, которое уверенно поддерживается в Safari, Chrome, Firefox и Opera, равно как и в IE9 Beta. Вместо того чтобы пугаться этой неповсеместной поддержки и дожидаться ее, мы решаем применять это свойство для некритического визуального эффекта (параллакса на фоне).

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

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

6. Улучшенные формы

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

По умолчанию сами элементы форм могут очень сильно различаться внешне – в зависимости от операционной системы и браузера, в котором открыт сайт. Почему бы не использовать эту разницу, применяя рабочие фрагменты CSS3, чтобы улучшить пользовательский опыт?

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

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

Эта глава также дает возможность поговорить о трех аспектах CSS3, которых мы до сих пор не касались:

1) новые мощные селекторы;

2) CSS-градиенты;

3) CSS-анимации.

Мы вновь обратимся к сайту-примеру с Луной как к отправной точке, чтобы поговорить о том, как формы и CSS3 могут сочетаться новыми и необычными способами. Будем работать с формой регистрации «Оповещение о новых предметах», расположенной справа сбоку (рис. 6.01).

^{Рис. 6.01. Простая форма, где посетитель может подписаться на обновления о том, что на Луне оставили новые вещи}

Разметка для простой формы регистрации

В терминах HTML эта небольшая форма очень проста: всего лишь несколько полей ввода, подписи к ним и кнопка «подписаться».

<form action="/" id="thing-alerts">
 <fieldset>
 <label for="alerts-name">Your Name</label>
 <input type="text" id="alerts-name" />
 </fieldset>

 <fieldset>
 <label for="alerts-email">Your Email</label>
 <input type="text» id="alerts-email" />
 </fieldset>

 <fieldset>
 <input type="submit" value="Subscribe" />
 </fieldset>
</form>

На рис. 6.02 форма показана так, как она выглядит со стилями по умолчанию, которые выставляет браузер (в этом примере – Safari).

^{Рис. 6.02. Форма,} открытая в Safari; без стилей

Стили для полей и подписей

Первые фрагменты CSS, которые мы добавим, чтобы начать построение этой формы, будут обрабатывать элементы fieldset и label – лишь немного пространства между строками.

#thing-alerts fieldset {
 margin: 0 0 10px 0;
 }

#thing-alerts label {
 display: block;
 font-weight: bold;
 line-height: 1.4;
 color: #666;
 color: rgba(0, 0, 0, 0.6);
 text-shadow: 0 1px 1px #fff;
 }

Глядя на рис. 6.03, можно увидеть, что мы добавили отступ в 10px под каждой строкой fieldset и задали подписям свойство display: block, чтобы они отображались на отдельной строке. Мы также выставили черному тексту непрозрачность в 60% и указали запасной серый цвет для тех браузеров, которые пока не поддерживают RGBA. Мы также добавили небольшую белую подсветку свойством text-shadow, чтобы текст выглядел так, будто бы он вставлен на фон.

^{Рис. 6.03. К элементам fieldset и label применены стили}

Теперь у нас есть хороший интервал в 10px между элементами fieldset, но из-за поля внутри серого блока нам не нужен отступ в 10px под последней строкой (содержащей кнопку «подписаться»).

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

Вместо добавления class="last" к последнему элементу почему бы не воспользоваться CSS3-псевдоклассом: last-child, чтобы убрать отступ снизу, не трогая разметку:

#thing-alerts fieldset {
 margin: 0 0 10px 0;
 }

#thing-alerts fieldset label {
 display: block;
 font-weight: bold;
 line-height: 1.4;
 color: #666;
 color: rgba(0, 0, 0, 0.6);
 text-shadow: 0 1px 1px #fff;
 }

#thing-alerts fieldset: last-child {
 margin: 0;
 }

Помните, что :last-child не поддерживается в IE8 и ниже, но для небольших визуальных изменений, подобных этому, такое решение намного лучше, чем дополнительный класс в разметке.

На рис. 6.04 показано, что мы успели сделать: теперь нижний отступ на последнем элементе fieldset убран с помощью псевдокласса :last-child.