Дизайн симпатичной веб-формы с помощью CSS3

Дизайн симпатичной веб-формы с помощью CSS3

Наш конечный результат:

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

Следуя этому уроку, вы не только сделаете легкую и красивую форму, но вы также узнаете и осмыслите новые CSS3 методы, такие как box-shadow, gradients, opaque colors, и rounded corners.

CSS3?

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

Opera имеет больший уровень поддержки CSS3 (кроме фоновых градиентов) в своей следующей версии (10,50 Beta).

Internet Explorer также заявил, что они улучшили поддержку CSS3 с версии 9, однако только время покажет, насколько это верно.

Вещи, которые вы можете сделать с CSS3 (тени, градиенты, закругленные углы, анимации и т.д.), все это служит цели создания красивых эффектов без необходимости интегрировать изображения или сценарии, в результате - более быструю загрузку.

Шаг 1: HTML

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

Code

<form class="form">

  <p class="name">
  <input type="text" name="name" id="name" />
  <label for="name">Name</label>
  </p>

  <p class="email">
  <input type="text" name="email" id="email" />
  <label for="email">E-mail</label>
  </p>

  <p class="web">
  <input type="text" name="web" id="web" />
  <label for="web">Website</label>
  </p>

  <p class="text">
  <textarea name="text"></textarea>
  </p>

  <p class="submit">
  <input type="submit" value="Send" />
  </p>

</form>

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

Как это выглядит без каких-либо стилей?

Функционально, но скучно. Начнем облагораживать эту форму.

Шаг 2: Основные Стили

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

Code

input, textarea {
  padding: 9px;
  border: solid 1px #E5E5E5;
  outline: 0;
  font: normal 13px/100% Verdana, Tahoma, sans-serif;
  width: 200px;
  background: #FFFFFF;
  }

textarea {
  width: 400px;
  max-width: 400px;
  height: 150px;
  line-height: 150%;
  }

input:hover, textarea:hover,
input:focus, textarea:focus {
  border-color: #C9C9C9;
  }

.form label {
  margin-left: 10px;
  color: #999999;
  }

.submit input {
  width: auto;
  padding: 9px 15px;
  background: #617798;
  border: 0;
  font-size: 14px;
  color: #FFFFFF;
  }

Как выглядит результат наших усилий на этом этапе?

Не так уж плохо. Теперь давайте начнем наши усовершенствования с более продвинутым CSS3.

Шаг 3: Box-shadow

Box-shadow, дословно: создает тень вокруг коробки.

Синтаксис для box-shadow довольно прост:

Code

box-shadow: <color> <horizontal offset> <vertical offset> <blur>;

Horizontal offset размещает тень слева направо. Если вы установите его в "2px", тень будет на 2 пикселя вправо. Vertical offset то же самое, но смещение вверх / вниз.

Blur - просто степень размытия тени, где 0 является минимальным значением.

Вот как наше свойство box-shadow будет представлено:

Code

input, textarea {
  box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  }

Здесь у нас есть три строки, которые выглядят одинаково.

box-shadow чистый CSS3 , в настоящий момент используется только в Opera.
-webkit-box-shadow для браузеров, использующих движок Webkit, таких как Chrome и Safari.
-moz-box-shadow для браузеров, использующих движок Gecko от Mozilla , таких как Firefox, Camino, Flock и Seamonkey.

До того времени, как CSS3 станет стандартом, вам придется использовать все три метода. Internet Explorer имеет свой собственный, странный способ ведения дел, и хотя это позволяет сделать тени, это не будет выглядеть так, как мы этого хотим.

Вы не могли не заметить, что используется не обычный цвет RGB, это происходит потому, что мы используем два CSS3 метода в одной строке: box-shadow и RGBA.

RGBA (Red Green Blue Alpha), попросту говоря, цвет с непрозрачностью.

Синтаксис для RGBA заключается в следующем:

Code

rgba(<red>,<green>,<blue>,<opacity>);

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

Таким образом, сделаем наши box-shadow с 10% (0,1) непрозрачностью, без горизонтального и вертикального смещения, и с размытием в 8 пикселей. Это будет выглядеть следующим образом:

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

Шаг 4: фоновый градиент

В то время как синтаксис для box-shadow легко понять, с градиентами дело посложнее. С CSS3 градиентами вы можете создавать разные удивительные формы - от доски для дротиков до радуги, и поэтому, как вы понимаете, здесь более сложный синтаксис. К счастью, нам не нужно создавать код радуги сегодня, нам просто необходим прямолинейный градиент.

Синтаксис для Webkit:

Code

-webkit-gradient( linear, <start>, <end>, from(<color>), to(<color>) )

Синтаксис для Gecko:

Code

-moz-linear-gradient(<start> <angle>, <color>, <color>)

Как видите, методы сильно отличаются, так что это потребует некоторого объяснения.

Webkit градиентам требуется начальная точка (X и Y), конечная точка (X и Y), от цвета к цвету. Угол определяется тем, где начало и конец, и градиент будет окрашен от "начального цвета" (from) к "конечному цвету" (to).

Gecko градиенты, с другой стороны, требуют только начальную точку (Y), и по крайней мере два цвета. Если вы хотите сделать градиент сверху вниз (90 градусов), то вам не нужно присваивать значение угла.

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

Code

background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#FFFFFF));
background: -moz-linear-gradient(top, #000000, #FFFFFF);

И это будет выглядеть так:

(Я пока буду использовать черный цвет для демонстрации, а в конце переключусь на реальный цвет, который мы будем использовать для формы.)

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

Так, мы ограничиваем фоновый градиент в 25px в Webkit и Firefox:

Code

input, textarea {
  background: -webkit-gradient(linear, left top, left 25, from(#000000), to(#FFFFFF));
  background: -moz-linear-gradient(top, #000000, #FFFFFF 25px);
  }

Для Webkit, вместо установки конечной точки "left bottom", мы устанавливаем его в "left 25", указав тем самым, что градиент закончится в точке, отстоящей от верха на 25 пикселов.

Для Gecko, мы делаем то же самое, просто добавляя значение "25px" для конечного цвета.

И результат:

Второе, что нам нужно сделать, это создать тонкую белую линию в верхней части градиента, чтобы создать тонкое зрительное впечатление, что поле приподнято. Насколько важным может быть один пиксель? Взгляните на эту статью: Adding Depth with Pixel Perfect Line Work.

Для создания этого нам понадобится три точки в градиенте. В предыдущем примере наш градиент имел две точки: верхнюю и нижнюю (черный → белый). Здесь мы добавим дополнительную точку между ними (белый → черный → белый).

Для иллюстрации:

Как мы это сделаем?

Code

input, textarea {
  background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #000000), to(#FFFFFF));
  background: -moz-linear-gradient(top, #FFFFFF, #000000 1px, #FFFFFF 25px);
  }

В Webkit мы используем функцию color-stop, но, к сожалению, она не поддерживает значения в пикселях, только в процентах. Но благодаря изучению математики в школе мы рассчитываем, что 4% от 25px будет 1px.

Для Gecko мы просто добавляем третий цвет между первыми двумя и даем ему значение в "1px" , указывая, что он должен закончиться после 1 пикселя сверху.

Тонкая белая линия:

Теперь, давайте изменим черный цвет (# 000000) на более подходящий светло-серый (# EEEEEE):

Осталось доработать немного деталей.

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

Code

input:hover, textarea:hover,
input:focus, textarea:focus {
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}

Это просто, увеличим значение с 10% до 15%, но толщину оставим неизменной.

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

Code

.submit input {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  }

Стандартное значение границы радиуса (border-radius: 5px;) намеренно опущено, так как у Opera, кажется, есть некоторые проблемы с ним.

Результат:

Шаг 5: Другие браузеры

Теперь нам нужно позаботиться о браузерах, которые не поддерживают CSS3 (например IE), или которые лишь частично делают это (Opera).

Мы хотим, чтобы в разных вариантах (CSS3 и обычном), всё выглядело одинаково, насколько это возможно, и проще всего вернуться к старому способу: изображениям.

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

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

Code

input, textarea {
background: #FFFFFF url('bg_form.png') left top repeat-x;
}

И теперь все готово! Наслаждайтесь своей формой и я надеюсь, вы узнали что-то новое.

Заключительный просмотр

Chrome (4.0), Firefox (3.6), Safari (4,0):

Опера (10.50b):

Internet Explorer (8):

Полный CSS

Code

input, textarea {
  padding: 9px;
  border: solid 1px #E5E5E5;
  outline: 0;
  font: normal 13px/100% Verdana, Tahoma, sans-serif;
  width: 200px;
  background: #FFFFFF url('bg_form.png') left top repeat-x;
  background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
  background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
  box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  }

textarea {
  width: 400px;
  max-width: 400px;
  height: 150px;
  line-height: 150%;
  }

input:hover, textarea:hover,
input:focus, textarea:focus {
  border-color: #C9C9C9;
  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
  }

.form label {
  margin-left: 10px;
  color: #999999;
  }

.submit input {
  width: auto;
  padding: 9px 15px;
  background: #617798;
  border: 0;
  font-size: 14px;
  color: #FFFFFF;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  }

Заключение

Вот и все, что нужно сделать! С минимальными усилиями и силой CSS3, мы превратили обычную и простую форму в нечто прекрасное. Большое спасибо за чтение, и не стесняйтесь задавать любые вопросы, которые у вас возможно возникли, ниже.

Источник
Перевод и описание: PS-Studio.Info

Ссылка:

BB-код:

HTML-код:

Ещё по теме:

Всего комментариев: 2