вход

Стилизация элемента ввода с помощью CSS3

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

Потребности и основы.

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

Эффекты Photoshop против свойств CSS3

В приведенном выше примере, изображение построено только с помощью некоторых техник Photoshop: color gradient, stroke и drop shadow. Вместо того, чтобы тратить время на создание изображений в Photoshop, можно быстро и легко стилизовать их, используя только CSS. Для замены техник Photoshop мы можем использовать свойства CSS3 :
  • Градиент : Color Gradient заменяем на -webkit-gradient или -moz-linear-gradient.
  • Границы : Stroke заменяем на свойство border.
  • Тень : Drop Shadow заменяем на -webkit-box-shadow, -moz-box-shadow или box-shadow property.
  • Углы : rounded corner заменяем на -webkit-boder-radius, -moz-border-radius или boder-radius.

Стилизуем шаг за шагом

Сначала мы создаем элемент ввода по умолчанию, используя HTML.
<input name="sample" type="text" size="40" />
Добавляем немного стилей для текстового эффекта: padding, font-size, и text-shadow:
input {
	padding: 5px;
	font-size: 15px;
	text-shadow: 0px 1px 0px #fff;
}
Зальем фон элемента input линейным градиентом. Начальный цвет назначим черный(#bcbcbe) и закончим белым (#ffffff).
input {
	padding: 5px;
	font-size: 15px;
	text-shadow: 0px 1px 0px #fff;
	outline: none;
	background: -webkit-gradient(linear, left top, left bottom, from(#bcbcbe), to(#ffffff));
	background: -moz-linear-gradient(top,  #bcbcbe,  #ffffff);
}
Сделаем обводу со скруглёнными краями. Радиус скругления установим 3 пикселя, а толщину лини в 1 пиксель. Цвет границы назначим серый (#717171).
input {
	padding: 5px;
	font-size: 15px;
	text-shadow: 0px 1px 0px #fff;
	outline: none;
	background: -webkit-gradient(linear, left top, left bottom, from(#bcbcbe), to(#ffffff));
	background: -moz-linear-gradient(top,  #bcbcbe,  #ffffff);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #717171;
}
Теперь добавим эффект падающей тени, установим свойство box-shadow в 1 пиксель вправо и 1 пиксель вниз, 0 для размытия тени и цвет самой тени как белый (# FFFFFF).
input {
	padding: 5px;
	font-size: 15px;
	text-shadow: 0px 1px 0px #fff;
	outline: none;
	background: -webkit-gradient(linear, left top, left bottom, from(#bcbcbe), to(#ffffff));
	background: -moz-linear-gradient(top,  #bcbcbe,  #ffffff);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #717171;
	-webkit-box-shadow: 1px 1px 0px #efefef;
	-moz-box-shadow: 1px 1px 0px #efefef;
	box-shadow:  1px 1px 0px #efefef;
}
Если фокус установлен на элементе ввода, то мы можем добавить эффект свечения, подобно тому как это сделано в Safari. Зададим свойство box-shadow, со сдвигом в 0 пикселей слева и 0 пикселей вниз, размытие в 5 пикселей и цвет тени светло-синий (#007eff). Это позволит заменить эффект внешнего свечения выполненный в Photoshop.
input:focus {
	-webkit-box-shadow: 0px 0px 5px #007eff;
	-moz-box-shadow: 0px 0px 5px #007eff;
	box-shadow: 0px 0px 5px #007eff;
}

Заключение

Мы стилизовали элемент ввода и сделали его таким же, как если бы мы использовали графическое изображение в качестве фона. Теперь, создавая форму с полями ввода, Вы можете использовать преимущества CSS3 чтобы заменить фоновые изображения. На этом всё, и спасибо за чтение! ;) Посмотреть пример скачать пример

Stylize Input Element Using CSS3


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

Статья → Стилизация элемента ввода с помощью CSS3

  1. nextanz:

    То что доктор прописал, спасибо :)
    Кстати в демке определилась кривая кодировка, браузер Google Chrome 8.0.552.224

  2. Николай:

    @nextanz
    Спасибо, поправил.

  3. Очень красивая стилизация.
    Сейчас разрабатываю сайт на css3, с такими обводками будет отлично смотреться.

Оставить комментарий

Статья → Стилизация элемента ввода с помощью CSS3

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.