Стилизация формы при помощи CSS3

В этом уроке я расскажу, как, используя CSS3, сделать веб-форму более приятной на вид. Урок включает:

Необходимо базовое понимание работы в CSS, хотя я постараюсь облегчить для всех эту задачу.

Вот так будет выглядеть ваша форма после выполнения всех инструкций:

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

Распакуйте файл и откройте html, чтобы видеть структуру формы.

Глядя на код формы, вы можете видеть, что он содержит 3 поля ввода. Текст, который появляется над каждым полем ввода, называется меткой, и после него идет разрыв строки так, что активное поле появляется под ним, как вы можете видеть на изображении внизу. Каждое поле ввода имеет свой собственный уникальный ID (идентификатор), который мы будем использовать, чтобы придать каждому полю особый стиль. Обратите внимание, что поле с меткой «Ваши комментарии» (выделено зеленым) — не поле ввода, а текстовое поле.

Форма, показанная ниже – это форма по умолчанию, отображаемая Firefox. Теперь начнем применять стили:

Закругляем углы.

Используя CSS3, вы можете создавать прямоугольники с закругленными углами без использования рисунков. Код для создания закругленных границ несложен, однако не все браузеры его поддерживают. В настоящее время его не поддерживает только IE. Может, когда-нибудь будет поддерживать, но не сейчас.

Добавьте код, показанный на рисунке внизу, для закругления углов. Я использовал радиус 6 пикселей. Также установил фоновым цветом светло-серый и добавил границу темно-серого цвета шириной 1 пиксель.

Если вы начинающий, постарайтесь написать код вручную – это предпочтительнее копи-паста, потому что таким образом вы будете учиться гораздо быстрее, что, разумеется, полезнее для вас.

 and background color*/
 border-radius: 6px; 
 -webkit-border-radius: 6px; 
 border: 1px solid #DADADA;
 background: #F9F9F9; 
 } input, textarea { 
 /*Borders

Обратите внимание, я использовал три строки кода для создания закругленных углов. Это потому, что код для закругления углов еще не стал стандартным для всех браузеров. Префикс -moz- используется Мозиллой, а -webkit-

такими браузерами, как Safari и ему подобными. Первая строка, не содержащая префикса, относится ко всему коду и, возможно, станет стандартной в будущем. Firefox 4 и Opera 10 уже ее поддерживают.

Стили, показанные на рисунке выше, применяются к тэгам <input> и <textarea>. Вы можете применить стили к нескольким тэгам, классам и идентификаторам, разделяя их запятой, как сделал я (см. рисунок выше).

Будьте осторожны. Если у вас несколько форм на странице, стили будут применены ко всем формам, если вы не укажете разные классы для тэга <input> в каждой форме. Кнопки «Отправить» так же, как тэги <input>, влияют на стили других кнопок, если вы не добавили идентификаторы или классы. Я не включил кнопки «Отправить» в этот урок, поэтому у нас не будет таких проблем. Чтобы узнать больше о радиусе рамки, используйте быстрый поиск Google.

Добавление тени.

Тени в CSS – еще одна особенность, которую поддерживают не все браузеры. Опять же, из всех наиболее широко используемых браузеров, ее не поддерживает только IE.

Так же, как с закруглением углов, я использую три строки кода. Помните, мы еще работаем со стилями input и textarea.

Добавьте следующий код к кодам рамок:

Объяснение

box-shadow — опция, которая придает тень или внутреннюю тень всем элементам блока. Как я уже сказал, она не поддерживается IE. Первые 2 значения используются для компенсации тени, а третье определяет размытие. Последнее значение – для цвета тени. У вас два варианта для установки цвета тени: свойство RGBA или свойство hex.

Я использовал RGBA, потому что его опции позволяют мне так же добавлять прозрачность. RGB определяется красным, зеленым и синим цветами. Их значения могут меняться от 0 до 255. Прозрачность может изменяться от 0 до 1. 0 – прозрачный, 1 – полностью непрозрачный.

В моем примере я использовал внутреннюю тень с 2 пикселями смещения по осям X и Y, черный цвет и прозрачность 15%.

На рисунке ниже еще примеры:

Стилизация текста.

Если вы попытаетесь что-нибудь ввести в поле формы сейчас, то получите нечто похожее на рисунок ниже:

Лично мне это не очень нравится. Текст слишком черный, и шрифт не самый симпатичный. Просто изменяя цвет и шрифт, можно сделать вид формы гораздо приятнее.

Мы работаем с теми же полями — input и textarea, потому что нам нужен один и тот же стиль для поля ввода и для текстовой области. Добавьте следующий код к вашему CSS файлу:

 /*Font styles*/ 
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
 color: #747474;  
 font-size: 16px;  
 font-style: italic;

Сравните до и после:

Вы можете также стилизовать подписи к каждому полю ввода посредством тэга <label>. Итак, создаем новое правило как на картинке внизу:

Размер.

Нетрудно заметить, что поле ввода требуется увеличить в высоту и немного в длину, потому что текст доходит почти до границ. Добавьте следующие строки кода для input и textarea:

/*Spacings*/ 
 margin-top: 5px; 
 height: 24px; 
 line-height: 24px; 
 padding: 5px; 
 width: 300px;  
 outline: none;

Вот так выглядит форма, до и после:

После добавления кода вы увидите, что высота текстового поля уменьшилась. Это потому, что стили были применены одновременно к <input> и <textarea>, но мы скоро это исправим.

В настоящий момент у вас должен быть такой код применительно к полям ввода и текстовым полям:

 input, textarea {  
 /*Borders and background color*/
 border-radius: 6px; 
 -webkit-border-radius: 6px;  
 border: 1px solid #DADADA;  
 background: #F9F9F9; 
 
 /* Shadows*/ 
 box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .15);  
 -moz-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.15);  
 -webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .15); 
 
 /*Font styles*/ 
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
 color: #747474;  
 font-size: 16px;  
 font-style: italic; 
 
 /*Spacings*/ 
 margin-top: 5px; 
 height: 24px;  
 line-height: 24px;  
 padding: 5px;  
 width: 300px;  
 }  
 
 form label {  
 font-family: Georgia, "Times New Roman", Times, serif;  
 font-size: 18px;  
 color: #5D5D5D;  
 }

Добавление рисунков в вашу форму.

Вы можете добавить рисунки в ваши поля ввода, чтобы сделать их более привлекательными. Это легко сделать, но вы должны убедиться, что каждое поле имеет свой уникальный идентификатор. Я уже присвоил идентификаторы полям ввода, поэтому сейчас вам можно не беспокоиться

Вы можете создать правило для каждого ID и установить фоновое изображение для него. Для этого у вас уже должны быть загружены файлы с рисунками. Если еще нет, то скачайте рисунок приблизительно 16х16 png и загрузите его в ту же папку, в которой лежит CSS файл.

Здесь строки кода, который я использовал для добавления небольшого рисунка в поле <Name>:

input#name { 
	background: #F9F9F9 url(business.png) no-repeat;
	background-position: 10px;
	padding-left: 35px;
}

Вот результат:

Теперь повторим шаги изменения ID и изображения:

	input#email {
			background: #F9F9F9 url(mail.png) no-repeat; 
			background-position: 10px; 
			padding-left: 35px;	 
		} 

		input#website { 
			background: #F9F9F9 url(link.png) no-repeat;
			background-position: 10px; 
			padding-left: 35px;	
		}

Результат:

Теперь давайте займемся текстовым полем. Как вы можете видеть, оно более узкое, чем поле ввода, потому что мы добавили 35 пикселей для заполнения, и еще нужно добавить высоты.

Для того, чтобы изменить размеры текстового поля, используем атрибуты «height» и «width». Увеличим ширину до 330 пикселей:

 textarea {  
	 		height: 150px; 
	  		width: 330px; 
	  }

Теперь ширина такая же, как ширина поля ввода, как можно видеть на скриншоте ниже:

Подробнее…

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

Для того, чтобы этого не произошло, вам нужно добавить следующую строку кода в правило для полей input и textarea:

outline: none;

Добавление эффекта наведения.

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

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

form #website:hover, #email:hover, #name:hover {
		background-color: #F1F8F8; 
	}

Когда пользователь наводит курсор на одно из трех полей, добавляется нежный светло-голубой оттенок. Я использовал при этом псевдовыделение.

Теперь, в заключение, я покажу вам разницу между Firefox 4 и Internet Explorer 8. Как вы можете видеть, закругленные углы и тени не отображаются в Internet Explorer 8.

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