Как создать поисковую форму средствами CSS3

Автор: Павел Карабило
18.03.2011

В этом небольшом и несложном уроке мы покажем и расскажем вам как можно сделать красивую и удобную форму для поиска используя средства HTML5 и CSS3. Сразу отметим, что полученный в конце статьи результат будет наиболее корректно отображаться в современных браузерах (FireFox 3.6, Chrome 10 и иже с ними). Используя принципы прогрессивного улучшения мы сделаем так, что в устаревших браузерах полученный результат будет смотреться не так ярко, но, тем не менее, не утратит общий смысл и функциональность.

Демо

Итак, поехали. Для начала напишем HTML-код для формы:

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="windows-1251" />
    </head>
    <body>
      <div id="search_panel">
        <form action="" method="post">
          <input type="text" placeholder="Что ищем?" />
          <input type="submit" value="Поиск" />
        </form>
      </div>
    </body>
  </html>

Вот что у нас пока что получилось:

В первой строчке мы указали тип документа - . Данный тип говорит о том, что мы собираемся использовать возможности HTML5 – новой спецификации языка гипертекстовой разметки. Далее мы указываем используемую кодировку символов при помощи тега .

В теле документа находится, собственно сама форма, состоящая из текстового поля и кнопки для отправки запроса. Форма находится внутри блока, которому назначен уникальный идентификатор. Позиционируя данный блок на странице, мы будем задавать позицию для самой формы. Текстовое поле задается при помощи тега input с атрибутом type="text". Атрибут placeholder="Что ищем?" может показаться непривычным для тех, кто знаком только с html 4.01 и xhtml – данный атрибут задает текст, который будет находиться в текстовом поле до тех пор, пока пользователь не выделит его. Как только текстовое поле получит фокус, надпись «Что ищем?» исчезнет, и появится тогда, когда пользователь кликнет по любому другому месту на странице. В старых браузерах, не поддерживающих этот HTML5-атрибут текст появляться не будет, поле будет пустым. На скриншоте можно видеть, что в браузере Mozilla этот атрибут не поддерживается

Дальше, нам необходимо назначить стили для элементов, расположенных на странице. Для этого внутри тега <head> вносим тэг style:

<head>
 <meta charset="windows-1251" />
 <style type="text/css">


 </style>
</head>

Прописывать стили начнем с блока-оболочки:

div#search_panel {
 width: 600px;
 margin: 200px auto;
 border-bottom: 1px solid #666;
 border-top: 1px solid #999;
 border-left: 1px solid #888;
 border-right: 1px solid #888;
 height: 40px;
 padding: 10px;
}

Сначала мы жестко задаем ширину width: 600px; а также отступы блока от краев страницы: margin: 200px auto; Таким образом, div будет отцентрирован горизонтально (левый правый и отступ установлены в auto), и отступать от верхнего края страницы на 200 пикселей. Далее, мы задаем границы для блока – как можно заметить, для верха, низа, и боков блока заданы разные цвета границ – таким образом можно получить градиент на краях блока. Последние две строчки задают высоту блока и внутренние поля соответственно.

Следующим шагом будет добавление CSS3-свойств к свойствам блока-оболочки:

div#search_panel {
width: 600px;
margin: 200px auto;
border: 1px solid #666;
border-top: 1px solid #999;
border-left: 1px solid #888;
border-right: 1px solid #888;
height: 40px;
padding: 10px;
  /*CSS3-свойства */
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  background-color: #999;
  background-image: -moz-linear-gradient(top , #bbb, #999 50%, #666 51%, #777);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb), color-stop(.5, #999), color-stop(.5, #666), to(#777));
  -moz-box-shadow: 0px 0px 2px #eee inset, 0px 3px 10px #555;
  -webkit-box-shadow: 0px 0px 2px #eee inset, 0px 3px 10px #555;
  box-shadow: 0px 0px 2px #eee inset, 0px 3px 10px #555;
}

Создание CSS3 поисковой панели

Первые три свойства создают закругленные углы. На самом деле, это все одно свойство border-radius, написанное с разными префиксами – чтобы работало во всех браузерах, которые это свойство поддерживают. Радиус скругления мы задаем в половину общей высоты элемента, таким образом делаем бока блока плавно скругленными. Следующие три свойства создают на элементе цветовой градиент. Вернее, не совсем так – первое свойство background-color: #999; обеспечивает неполную обратную совместимость, так называемый “fallback” – таким образом мы убеждаемся, что в старых браузерах фон блока будет монотонным, темно-серого цвета. Далее, мы задаем два свойства для разных браузеров – Mozilla Firefox (приставка –moz) и браузеров на движке webkit. Синтаксис данного свойства следующий:

background-image: -moz-linear-gradient(top , #bbb, #999 50%, #666 51%, #777);

Значение -moz-linear-gradient больше похоже на обычную javascript-функцию, которая принимает несколько параметров. Первый параметр top говорит о том, что градиент должен быть вертикальным. Далее идет набор цветовых составляющих градиента, заданных по порядку сверху-вниз. В верхней части блока градиент начинается с светло-серого цвета #bbb, который плавно темнеет к центру блока - #999 50%. Далее следует резкий переход на темно-серый цвет #666 51%, который плавно светлеет к нижней части блока - #777.

Синтаксис для браузеров на движке webkit немного сложнее -

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb), color-stop(.5, #999), color-stop(.5, #666), to(#777));

Однако, несмотря на увеличенное количество текста, принцип остается тем же – тип градиента linear (линейный) передается в качестве первого параметра, далее следует определение направление градиента в виде «откуда, куда» - left top, left bottom, после чего следует тот же набор цветовых составляющих градиента, что и ранее, только оформленных немного иначе.

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

box-shadow: 0px 0px 2px #eee inset, 0px 3px 10px #555;

Таким образом, элемент будет иметь две тени – одну внутреннюю, практически белую, толщиной в 2 пикселя, вторую – темную, наружную, расположенную снизу элемента (хотя, правильней будет сказать – смещенную на 3 пикселя вниз), толщиной 10 пикселей.

Итак, с блоком-оболочкой разобрались. Далее пишем стили для элементов формы поиска, начнем с текстового поля:

 
input#query {
 display: block;
 float: left;
 padding: 0 0 0 15px;
 height: 40px;
 width: 485px;
 border: 1px solid #fff;
 border-right: none;
 background-color: #ddd;
 -moz-box-shadow: 0px 0px 5px #333 inset;
 -webkit-box-shadow: 0px 0px 5px #333 inset;
 box-shadow: 0px 0px 5px #333 inset;
 -moz-border-radius:  20px 0 0 20px ;
 -webkit-border-bottom-left-radius: 20px;
 -webkit-border-top-left-radius: 20px;
 border-radius:  20px 0 0 20px;
 font: 32px Arial, Helvetica, sans-serif;
 color: #aaa;
}

Создание CSS3 поисковой панели

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

padding: 0 0 0 15px;

Все внутренние поля, кроме левого имеют значение 0. После этого, мы задаем высоту и ширину элемента. Далее идет определение границы текстового поля – в 1 пиксель, белого цвета. Правая граница у элемента отсутствует, кроме этого, скругленные края заданы только для левой стороны элемента:

 -moz-border-radius:  20px 0 0 20px ;
 -webkit-border-bottom-left-radius: 20px;
 -webkit-border-top-left-radius: 20px;
 border-radius:  20px 0 0 20px;

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

Далее, стилизируем кнопку:

input#submit {
 display: block;
 float: left;
 width: 115px;
 height: 42px;
 background: #fff;
 border-bottom: 1px solid #aaa;
 border-right: 1px solid #bbb;
 border-left: 1px solid #bbb;
 border-top: 1px solid #ddd;
 background-color: #d4e8ec;
 background-image: -moz-linear-gradient(center top, #fff, #d4e8ec 50%, #A4E1ED 51%, #d4e8ec);
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(.5, #d4e8ec), color-stop(.5, #A4E1ED), to(#d4e8ec));
 margin-left: -20px;
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;
 border-radius: 20px;
 -moz-box-shadow: 0px 0px 2px #007FB5 inset;
 -moz-box-shadow: 0px 0px 2px #007FB5 inset;
 box-shadow: 0px 0px 2px #007FB5 inset;
 font: bold 24px Arial, Helvetica, sans-serif;
 color: #fff;
 text-shadow: 0px 0px 1px #000;
}

Создание CSS3 поисковой панели

Используемые свойства стилей для кнопки практически не отличаются от стилей для двух предыдущих элементов, изменена только цветовая гамма для градиента, а также задано свойство text-shadow, которое задает темную тень для текста на кнопке толщиной в 1 пиксель. Кроме того, кнопка имеет отрицательное значение левого отступа, таким образом мы смещаем ее влево на 20 пикселей.

Ну и, в конце концов, добавляем немного интерактивности при помощи CSS. Для начала определим стили для текстового поля, в тот момент, когда над ним находится курсор. Делается это при помощи псевдо-класса :hover :

input#query:hover {
 background-color: #e8e8e8;
}

Как видите, текстовое поле только меняет цвет на немного более светлый. Таким же образом задаем стили для кнопки:

input#submit:hover {
 -moz-box-shadow: 0px 0px 2px #007FB5 inset;
 -moz-box-shadow: 0px 0px 2px #007FB5 inset;
 box-shadow: 0px 0px 2px #007FB5 inset;
 background-color: #94d1ED;
 background-image: -moz-linear-gradient(center top, #fff, #c4d8ec 50%, #94d1ED 51%, #c4d8ec);
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(.5, #c4d8ec), color-stop(.5, #94d1ED), to(#c4d8ec));
}

При помощи псевдокласса :focus задаем стили для текстового поля в тот момент, когда оно получает фокус:

input#query:focus {
 background-color: #f5f5f5;
 -moz-box-shadow: 0px 0px 2px #666 inset;
 -webkit-box-shadow: 0px 0px 2px #666 inset;
 box-shadow: 0px 0px 2px #666 inset;
 color: #666;
 outline: none;
}

Поле изменяет текст, внутреннюю тень, кроме этого, меняется цвет шрифта на более темный. Свойство outline: none; предназначено для браузера Google Chrome, который имеет «вредную привычку» добавлять текстовым полям оранжевую границу в тот момент, когда на них находится фокус.

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

Вот как форма выглядит в браузере Internet Explorer 7, который не поддерживает CSS3:

Создание CSS3 поисковой панели

В браузере Opera, который поддерживает часть CSS3-свойств форма выглядит так (обратите внимание на отсутствие градиентов):

Создание CSS3 поисковой панели



 Вернуться назад  | Вернуться в блог

Другие записи:

HTML и CSS:

17.08.2010 - Фоновое изображение на всю страницу

Дизайн

JavaScript

Flash

Другое

Комментарии:

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