Красивый поиск по сайту


Красивый поиск по сайту

2910
8.8 из 10
Проголосовало: 7









Поиск очень стильный и подойдёт к любому шаблону.
При навождении на него он будет раздвигаться, как это показано на экране.
УСТАНОВКА
вставляем куда вам нужно

Quote


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

</style>

<div id="wrap-search">
<div id="search">
<form class="form-search" method="get" action="/search" target="_blank">
<input src="http://more-kino.at.ua/_ph/1/2/862330529.png" type="image">
<input name="q" value="поиск" onfocus="this.value='';" onblur="this.value='поиск';" onmouseover="this.value='';" onmouseout="this.value='поиск';" type="text">
</form>
</div>
</div>

Автор публикации: Загрузка
Загрузка
Admin8738, это его n материал
Источник: http://скрипт создан администраторами сайта more-kino.at.ua
  • Всего комментариев: 8

Supermenыч
0
Supermenыч написал: Написано 25 Февраля 2012 в 18:18
Комментарий №8
есть конешно баги: когда наводишь мышку оно раздвигается ты пишешь, но когда отводишь мышку оно снова сдвигается хотя есть текст в форме, ну и всё smile

Voker
0
Voker написал: Написано 24 Февраля 2012 в 19:56
Комментарий №3
Где в нем ширина настраеваеться? dry

Admin8738
0
Admin8738 написал: Написано 24 Февраля 2012 в 20:06
Комментарий №4
Вроде здесь
height: 32px;
opacity: .5;

Voker
0
Voker написал: Написано 24 Февраля 2012 в 20:09
Комментарий №5
сомневаюсь там более 200 рх ширина а не 32рх!

Admin8738
0
Admin8738 написал: Написано 24 Февраля 2012 в 20:12
Комментарий №6
это значит #wrap-search:hover { width:200px; }

Voker
0
Voker написал: Написано 24 Февраля 2012 в 21:50
Комментарий №7
мда как я такое не заметил cry

Admin8738
0
Admin8738 написал: Написано 24 Февраля 2012 в 19:36
Комментарий №2
Cпс

Kelin
+2
Kelin написал: Написано 24 Февраля 2012 в 19:31
Комментарий №1
Неплохо)
Только вот голубой градиент так себе, ну да ладно, перекрасить легко happy

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 7
    Гостей: 6
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: