Авторизация \|\| вход на сайт
Забыли пароль? Забыли логин?

Главная uaWebmaster УрокиДелаем красивую форму комментариев в CSS 3

Делаем красивую форму комментариев в CSS 3

10 Марта 2010
Раздел Веб-мастеру

Благодаря свойствам CSS, таким как градиенты и тени, теперь довольно легко превратить скучную веб-форму во что-то более привлекательное. И все это с минимальными усилиями. В сегодняшнем уроке, мы покажем вам, как сделать веб-форму для комментариев на сайте.

Конечный результат

1_form_final

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

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

Что такое CCS3?

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

Опера будет полноценно поддерживать CSS3 (кроме градиентов фона) в следующей версии (10.50 Beta).

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

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

Шаг 1: HTML

<form class="form">
 
<p class="name">
<input type="text" />
<label for="name">Name</label>
</p>
 
<p class="email">
<input type="text" />
<label for="email">E-mail</label>
</p>
 
<p class="web">
<input type="text" />
<label for="web">Website</label>
</p>
 
<p class="text">
<textarea name="text"></textarea>
</p>
 
<p class="submit">
<input type="submit" value="Send" />
</p>
 
</form>

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

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;
}

Смотрим, как выглядит форма с использованием указанного выше CSS:

2_form_basic

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

Шаг 3: Тень полей формы (box-shadow)

Ну тут все ясно, создаем тень вокруг полей формы.

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

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

Горизонтальное смещение (horizontal offset ) слева направо. Если вы установите ее в 2px, то тень будет сместиться на 2 пикселя вправо. Вертикальное смещение (vertical offset) точно также, но сверху вниз.

Blur это эффект придающий тени, где 0 это минимальное значение.

Вот так будет выглядеть наш box-shadow:

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;
}

В указанном выше input, мы видим одинаковые параметры для box-shadow, а именно:

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

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

В формах мы используем графический стандарт RGBA (Red Green Blue Alpha), попросту говоря, цвет с эффектом прозрачности.

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

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

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

3_form_shadow

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

Шаг 4: Градиент фона

Создаем прямой линейный градиент.
Синтаксис для Webkit:

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

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

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

Как вы видите, методы совершенно разные, поэтому немного поясним.

Webkit градиенты требуют начальной точки (X и Y), конечной точки (X и Y). Угол определяется тем, где начало и конец, а градиент будет окрашен от «цвета» к «цвету».

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

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

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

background: -moz-linear-gradient(top, #000000, #FFFFFF);

И это будет выглядеть следующим образом:

4_gradient_white-black

Теперь поочередно делаем остальные формы:

5_gradient_full-height

Код с градиентом 25px в Webkit и Firefox:

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

И результат:

6_gradient_limited-height

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

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

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

7_gradient_stop-illustration

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

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);
}

8_gradient_stop

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

9_form_gradient

Для начала, мы создадим более темную тень на полях при наведении:

input:hover, textarea:hover,
input:focus, textarea:focus {
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}(/code}
Увеличиваем с 10% до 15%.
<img style="margin: 5px; border: 5px solid #dcdcdc;" alt="10_form_shadow-hover" src="/images/stories/news/2010/03/10_form_shadow-hover.png" height="166" width="319" />
Последнее, что нам надо сделать, это закругленные углы для кнопки:
{code}.submit input {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

Результат:

11_form_button

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

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

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

12_form_photoshop1

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

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

И теперь все готово! Наслаждайтесь вашей формой.

Конечный результат

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

13_form_final

Opera (10.50b):

14_form_final-opera

Internet Explorer (8):

15_form_final-ie

Полный CSS

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;
}