Главная  »  Web-дизайн   »   Красивая и элегантная форма поиска для UCOZ сайтов с версткой на HTML5 и CSS3

Красивая и элегантная форма поиска для UCOZ сайтов с версткой на HTML5 и CSS3

Здравствуйте друзья. Давненько не писал, так как был чуток занят дизайном сайта. Как вы могли заметить на сайте поменялась шапка и появились красивые, глянцевые, разноцветные кнопки меню. Вариант шапки несколько раз менялся мною. От одного варианта отказался из за того, что он отказывался правильно отображаться на мониторах с разрешением 1024:768px от второго в силу того что изображения много весили и сайт грузился медленно, от третьего потому что он мне просто не понравился smile и т.д. В итоге оставил то, что вы видите. Да,
скромно… Зато «шапка» «резиновая» (правильно без искажений отображается на мониторах с маленькими разрешениями) и грузится не медленнее старой.

Кроме этих новинок на сайте появилась элегантная форма поиска, которая заменила UCOZовскую форму. Новая форма сверстана на HTML5 и CSS3. Её с помощью стилей можно оформить под себя, под свой сайт. У меня на сайте эту форму поиска вы можете увидеть справа в табах сайдбара (JQuery — скрипт для вкладок (табов) в блоках. [реализация на Ucoz]) во второй вкладке.
В этой статье я поделюсь с вами тем, как установить на UCOZ сайт такую же форму поиска.
Поехали…
И так… Данная форма поиска сверстана с использованием таких передовых технологий верстки как HTML5 и CSS3.
Поэтому некоторые старые браузеры некорректно её отображают.

Минусы верстки формы поиска на HTML5 и CSS3.

  • Internet Explorer 9 и ниже — не видит текст по умолчанию (атрибут placeholder)
  • Internet Explorer 8 и ниже — не видит внутренних теней и круглых углов
  • Internet Explorer 7 — не поддерживает свойство box-sizing, поэтому для него ширину формы придется указать отдельно.
  • Internet Explorer 6 — ни что, Mozilla Firefox — ВСЁ! 🙂

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

Интегрирование формы поиска в CMS Ucoz.

HTML-код формы поиска.

Code
  
<form action=»» method=»» class=»search»>
  <input name=»» placeholder=»поиск» class=»input» type=»search»>
  <input name=»» value=»» class=»submit» type=»submit»>
</form>


Это скажем так «каркас» формы, который можно использовать на любых CMS. Но чтобы эта форма работала нужно её интегрировать в вашу CMS. В моём случае CMS это UCOZ. Чтобы она работала необходимо вставить между пустых ковычек (это form action=»» method=»» и name=»», value=»» можно оставить пустым) специальные коды. У каждой CMS они свои.

HTML-код формы поиска для сайтов на CMS UCOZ:

Code


  <form action=»/search/» method=»get» class=»search»>
  <input name=»q» placeholder=»поиск» class=»input» type=»search»>
  <input name=»sfSbm» value=»» class=»submit» type=»submit»>
</form>


Как видите из кода, в form action прописываем UCOZовский скрипт поиска /search/, в method указываем Get (для других CMS method указывается post), а в name пишем q и sfSbm.

CSS стили для формы поиска.

Code


.search {
  width: 35%;
  position: relative;
}

.search input {
  border: none;
}

.search .input {
  width: 100%;
  padding: 8px 37px 9px 15px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3);
  border-radius: 20px;
  background: #EEE;
  font: 13px Tahoma, Arial, sans-serif;
  color: #555;
  outline: none;
}

.search .input:focus {
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.4);
  background: #E8E8E8;
  color: #333;
}

.search .submit {
  position: absolute;
  top: 0;
  right: 0;
  width: 37px;
  height: 100%;
  cursor: pointer;
  background: url(https://lh4.googleusercontent.com/-b-5aBxcxarY/UAfFW9lVyjI/AAAAAAAABUg/gQtEXuPuIds/s13/go.png) 50% no-repeat;
  opacity: 0.5;
}

.search .submit:hover {
  opacity: 0.8;
}

input[type=»search»] {
  -webkit-appearance: none;
}


Это стили для всех нормальных браузеров smile типа firefox, opera и chrome. А для Internet Explorer ниже 9-ой версии задаем отдельные стили.

CSS-стили для IE ниже 9-й версии.

Code


*+html .search {
  width: 28%;
  padding: 0 52px 0 0;
}
.search .input {
  border: 1px solid #DFDFDF;
  border-top: 1px solid #B3B3B3;
  padding-top: 7px;
  background-bottom: 8px;
}
.search .input:focus {
  border: 1px solid #CFCFCF;
  border-top: 1px solid #999;
}
.search .submit {
  filter: alpha(opacity=50);
}
.search .submit:hover {
  filter: alpha(opacity=80);  


Вот и все.

Послесловие:
Данная форма поиска думаю украсит любой сайт с любым дизайном т.к. цветовое оформление и размеры этой формы легко поддаются изменениям с помощью CSS стилей. До новых встреч.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Очень рекомендую прочитать:

  1. Конвертер компьютерных величин. Единицы измерения объёма информации.
  2. JQuery — скрипт для вкладок (табов) в блоках. [реализация на Ucoz]
  3. В Windows 7 каждая новая папка открывается в новом окне. Как исправить?
  4. Как удалить стартовую страницу apeha.ru из Internet Explorer?

Красивая и элегантная форма поиска для UCOZ сайтов с версткой на HTML5 и CSS3: 7 комментариев

  • Ольга

    «Доброе время суток! Спасибо за статью! Возник вопрос, как вы знаете у uCoz есть некая заморочка с поиском по разным модулям, в частности меня интересует модуль "Интернет-магазин". Насколько я знаю данный и подобные ему поиски работают во всех модулях кроме ИМ! Как настроить данный код, чтобы работало и в ИМ?? Очень наболевший вопрос, если в курсе напишите!»

    Ответить ↓
  • Морис

    Ольга, Если ваш сайт хорошо индексируется в google можно установить поиск от Google на свой сайт через систему пользовательского поиска

    Ответить ↓

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

Ваш e-mail не будет опубликован.