Наш опрос
Любите ли вы участвовать в опросах?
Всего ответов: 30
Случайный анекдот
46 Срочно сдам квартиру на 5-7 лет, в зависимости от решения суда…
Статистика
Онлайн всего: 14
Гостей: 14
Пользователей: 0

» Сегодня нас посетили:
» Зарег. на сайте
Всего: 3476
Новых за месяц: 1
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
» Из них
Администраторов: 1
Модераторов: 3
С активностью: 176
Авторизованных: 3296

   Форма поиска для юкоз



Клевая форма поиска для вашего сайта, подойдет для любого дизайна и проста в установке.

Установка:
Файл архива закачайте в папку img файл менеджера.
По месту, где хотите видеть форму поиска ставим:
Код
<div id="wrap-search">
  <div id="search">
  <form class="form-search" method="get" action="/search" target="_blank">
  <input src="/img/search.png" type="image">
  <input name="q" value="поиск" onfocus="this.value='';" onblur="this.value='поиск';" onmouseover="this.value='';" onmouseout="this.value='поиск';" type="text">
  </form>
  </div>
  </div>


В css ставим этот код:
Код
#wrap-search {
  margin: 0 auto;
  width: 100px;
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
  text-indent: 0px;}

  #wrap-search br { display: none; }

  #wrap-search #search {
  background: -moz-linear-gradient(center bottom , #9B9B9B 0%, #A9A9A9 50%, #CACACA 50%, #D3D3D3 2550%);
  background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9B9B9B),color-stop(0.5, #A9A9A9),color-stop(0.5, #CACACA),color-stop(25.5, #D3D3D3));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9B9B9B', EndColorStr='#CACACA');
  border-radius: 5px;
  padding: 4px;
  }

  #wrap-search:hover { width:200px; }

  .form-search {
  background: -webkit-gradient(linear, 0 bottom, 0 top, from(#EBEBEB), to(#BCBCBC));
  background: -moz-linear-gradient(-90deg, #BCBCBC, #EBEBEB);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#BCBCBC');
  border: 1px solid #747474;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;
  height: 32px;
  position: relative;
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
  }

  .form-search input[type='text'] {
  background: none;
  border: none;
  color:#6E7074;
  height: 34px;
  line-height: 34px;
  padding: 0 27px 0 6px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  text-shadow: 0 1px 0 #FFF;
  }

  #wrap-search:hover input[type='text'] { color:#597C84; }

  #wrap-search:hover .form-search {
  background: -moz-linear-gradient(-90deg, #9CC2CA, #DFECEF);
  background: -webkit-gradient(linear, 0 bottom, 0 top, from(#DFECEF), to(#9CC2CA));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DFECEF', EndColorStr='#9CC2CA');
  box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
  color: #25464D;
  }

  .form-search input[type='image'] {
  height: 32px;
  opacity: .5;
  filter:alpha(opacity=50);
  position: absolute;
  right: 0px;
  top: 0px;
  width: 32px;
  }

  .form-search input[type='image']:hover {
  opacity: 1;
  filter:alpha(opacity=100);
  }


Скачать архив 1,14 кб Html редактор
Автор: Prosvetekvator
Просмотров: 11433
04.05.2013


Другие статьи почитайка;)
Поделись ссылкой на форумах
Ссылка:
BB-code:
HTML:


« Пред. Форма поиска для юкоз След. »


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа

Мини-чат
Топ пользователей
Новое на форуме








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