Стилизация HTML5-форм с помощью CSS3

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

#redemption {width: 100%;

Font-family: ‘ColaborateThinRegular’; font-weight: 400;

}

#redemption hgroup {margin-bottom: 20px;

}

#redemption div {width: 100%; margin-bottom: 15px; float: left;

}

#redemption span#range {float: left; font-size: 3em; width: 100%; color: red; clear: both; text-align: center;

}

#howYouRateThis,#yearOfCrime {

Text-align: right;

}

#redemption legend {font-style: italic; color: #434242; font-size: 0.8em; margin-bottom: 20px; float: left; width: 100%;

}

#redemption fieldset {border: 1px dotted #cccccc; padding: 2%; margin-bottom: 20px;

}

#redemption label {width: 40%; float: left;

}

#redemption input {height: 20px; font-size: 1em; width: 40%; float: right;

}

#redemption textarea {height: 60px; font-size: 1em; width: 40%; float: right;

}

#redemption input#submit {text-decoration: none; height: 34px;

Font: 1.25em /* 36pxx16 */ ‘BebasNeueRegular’;

Background-color: #b01c20;

Border-radius: 8px;

Color: white;

Float: right;

Margin-bottom: 10px;

Background: linear-gradient (top, rgb (241,92,96) 0%, rgb (176,28,32) 100%); margin-top: 10px;

Box-shadow: 5px 5px 5px hsla (0, 0%, 26.6667%, 0.8); text-shadow: 0px 1px black; border: 1px solid #bfbfbf;

}

. polyfill-important. input-range, polyfill-important. step-controls {float: right;

. polyfill-important. step-controls {margin-right: — 20px! important;

}

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

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

#redemption fieldset {border: 1px dotted #cccccc; padding: 2%; margin-bottom: 20px; background: #ffffff;

Background: linear-gradient (top, #ffffff 77%,#f2f2f2 100%); border-radius: 4px;

Box-shadow: 2px 2px 5px hsla (0, 0%, 16.6667%, 0.3);

}

Мы использовали border-radius и background для задания фонового градиента, а также добавили объявление box-shadow для обеспечения небольшой тени, отбрасываемой блочным элементом.

Как и во многих приводившихся ранее примерах, я не стал включать версии CSS3-объявлений с префиксами поставщиков.

На рисунке 8.25 показано, как результат будет выглядеть в браузере Chrome.

Для формы заданы фоновый градиент и небольшая тень

КОМБИНИРОВАНИЕ РАЗНЫХ ФОРМАТОВ ЗНАЧЕНИИ ЦВЕТОВ.

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

Пока все хорошо. Но наши текстовые поля ввода все равно выглядят несколько уныло. Добавим для них немного CSS3-кода:

Input, textarea, select {border: 1px solid #bfbfbf; padding: 0.2em; font-size: 1.1em; line-height: 1.2em; background: #ffffff;

Background: linear-gradient (top, #ffffff 0%,#ededed 8%,#ffffff 100%); border-radius: 4px;

Box-shadow: 2px 2px 5px hsla (0, 0%, 16.6667%, 0.1);

}

Опять-таки здесь у нас есть свойство background для задания фонового градиента, border-radius для незначительного скругление углов и box-shadow для обеспечения небольшой тени, отбрасываемой блочным элементом. На рисунке 8.26 показано, как результат будет выглядеть в браузере Chrome.

У полей появились градиентный фон, скругленные углы и небольшая тень.

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

Input: not ([type="range"]), textarea, select{

/* стили */

}

Я использовал псевдоселектор: not, благодаря которому указал, что не хочу, чтобы правило применялось к полям ввода с атрибутом type="range". Снова взглянем на нашу страницу в браузере Chrome (рисунок 8.27).

К ползунку теперь не применяются стили, установленные для полей.

Отлично! Именно к такому результату я и стремился, а благодаря CSS3 можно с легкостью не только добавлять соответствующие стили, но и предотвращать их применение к элементам, для которых эти стили будут нежелательными.

Псевдоселекторы классов CSS3, специфичные для форм. Наряду со всеми интересными CSS3-инструментами, о которых мы уже говорили, существует несколько специфичных для форм псевдоселекторов:

Q input: required — предназначен для полей, обязательных для заполнения;

О input: focus: invalid — используется для полей с установленным фокусом, в которых введено недопустимое значение;

Q input: focus: valid — применяется для полей с установленным фокусом, в которых введено допустимое значение.

Итак, используем эти псевдоселекторы при создании трех дополнительных правил стилей, как показано в следующих примерах кода:

Input: required {border: 1px solid rgba (253, 8, 8, 0.29);

}

Input: focus: invalid {background: url (‘…/img/cross. png’) no-repeat right; padding-right: 3px;

}

Input: focus: valid {background: url (‘…/img/tick. png’) no-repeat right; padding-right: 3px;

}

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

На рисунке 8.28 показано, как все будет выглядеть в браузере (Firefox 9), когда страница загрузится.

Форма, стилизованная с использованием псевдоселекторов.

Теперь, если мы установим фокус (щелкнем кнопкой мыши) на одном из обязательных для заполнения полей, появится красный крестик (поскольку мы еще не ввели допустимое значение) (рисунок 8.29).

При установке фокуса в поле ввода появляется красный крестик

При вводе допустимого значения в поле появляется зеленый флажок.

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

Если мы пойдем дальше и введем допустимое значение, то изображение красного крестика сменится на изображение зеленого флажка (рисунок 8.30).

Резюме..

В этой главе мы научились использовать немало новых HTML5-атрибутов форм. Они дают нам возможность сделать формы более удобными в применении, чем когда-либо прежде, а вводимые в них данные — более соответствующими определенным критериям. Кроме того, мы можем сделать так, что разметка, в которой применяются эти новые HTML5-атрибуты, и со временем не потеряет актуальности. Для этого можно прибегнуть к условной загрузке JavaScript-сценариев, являющихся полизаполнениями, чтобы для всех пользователей был доступен схожий набор элементов форм независимо от функционала их браузеров.

Мы подходим к завершению нашего путешествия в мир адаптивного веб-дизайна с использованием HTML5 и CSS3. Мы охватили множество теоретических аспектов при рассмотрении практического примера в виде сайта And the winner isn’t. Однако при реализации адаптивных веб-дизайнов в реальном мире часто возникают дополнительные трудности. Как уместить множество навигационных ссылок на небольшом экране? Как обеспечить загрузку дополнительных файлов только в тех браузерах, которые в них нуждаются? В последней главе мы рассмотрим большинство из таких распространенных проблем (и их решения), возникающих при реализации адаптивных веб-дизайнов, созданных с применением HTML5 и CSS3. Мы также снова поговорим о наиболее оптимальных способах устранения некоторых недостатков распространенных устаревших браузеров.