Красочная форма и CSS3

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

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

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

Что такое CSS3?

CSS3 является новым поколением CSS, что в настоящее время в стадии разработки. В данный момент только некоторые браузеры могут работать с CSS3, такие как Google Chrome (4,0) Mozilla Firefox (3.6) Safari (4.0). Опере имеет лучший уровень поддержки CSS3 (кроме градиентного фона) в версии 10.50 Beta. Internet Explorer также заявил, что они улучшили поддержку CSS3 с версии 9, однако лишь время покажет, насколько это верно. Так, что же мы можем сделать с помощью CSS3? CSS3 позволяет без картинок сделать: тени, градиенты, круглые углы, анимации, создавать красивые эффекты и другое. В результате уменьшается время загрузки страницы.

Шаг №1.

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


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

Каждое поле внутри имеет свой класс, а три первых поля имеют еще и id. Функционально, но скучно. Шаг №2

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


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

И вот, что получилось:

Не так уж и плохо!

Шаг №3.

Теперь давайте создадим тень.

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

box-shadow создает тень вокруг нашей формы.

horizontal offset – размещает тень слева направо. Если Вы установите значение 2px, то тень будет смещена в право на 2px.

Vertical offset – смешает вверх и вниз.

Blur – показывает затемнение тени. Минимальное значение 0.

Вот как это записываеться:


 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 – до сих пор этот параметр использовался только в Опере

-webkit-box-shadow – используется в браузерах Chrome и Safari.

-moz-box-shadow – используется в Firefox, Camino, Flock и SeaMonkey.

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

Также можно заметить, что в box-shadow мы используем RGBA. RGBA позволяет нам создавать прозрачность.

Сам синтаксис выглядит так :

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

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

Наша форма теперь имеет такой вид:

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

Шаг №4

С тенью, надеюсь, все понятно. Теперь перейдем к градиенту.

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

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

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

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

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

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

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

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

Для того чтобы использовать простой градиент – от черного к белому, нужно написать так:

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

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

Вот, что должно получиться:

Первое, что мы сейчас должны сделать – это ограничить высоту градиента. Если мы этого не сделает, то градиент растянется на все поле:

Вод там мы ограничим высоту градиента до 20px в Webkit и Firefox:


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

И вот что у нас получилось:

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

Для того чтобы это сделать, нам понадобиться три значения градиента (белый-черный-белый).


 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 мы используем значение не в пикселях, а в процентах. Так как пиксели не поддерживаются. Но благодаря знаниям математики по курсу школьной программы, мы можем рассчитать, что 4% от 25px является 1px.

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

Тонкая белая линия будет выглядеть так:

Сейчас давайте изменим черный цвет на более светлый. Возьмем, например, светло-серый (#EEEEEE).

Сейчас давайте сделаем более темную тень при наведении или выборе поля. Для этого просто увеличим значение с 10% до 15%:


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

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


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

Шаг №5

Теперь мы должны позаботиться о браузерах, которые еще не поддерживают или частично поддерживают CSS3, такие как IE и Опера. Мы хотим добиться того, чтобы во всех браузерах было отображено одинаково. Для этого просто сделайте скриншот того, что у Вас получилось и сохранить небольшую часть градиента в виде изображения.

Теперь будем использовать это изображение в виде фона. Браузеры которые поддерживают CSS3 будут просто игнорировать это изображение.


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

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

P.S. Вот так у меня выглядит в различных браузерах:

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

Opera (10.50b):

Internet Explorer (8):

Весь 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;
 }
 

Понравился урок? Добавьте его к себе в закладки.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *