Стилизация элемента ввода с помощью 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

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

3 комментария

  1. ZEXEL26/03/2011
  2. nextanz08/01/2011
    • Николай08/01/2011

Добавить коментарий

три × четыре =