Четверг, 23.11.2017, 06:52
Скрипты для Ucoz
Карта сайта
Главная | Красивый поиск по сайту - Скрипты для Ucoz



Книги для вебмастера
Новые сообщения Участники Правила форума Поиск Лента новостей
Страница 1 из 11
Скрипты для Ucoz » Всё для Ucoz » Скрипты для Ucoz » Красивый поиск по сайту
Красивый поиск по сайту
AninewДата: Вторник, 08.05.2012, 17:04 | Сообщение # 1
Рядовой
Группа: Пользователи
Пол:
Награды: 1
Репутация: 2
Сообщений: 2
Поиск очень стильный и подойдёт к любому шаблону.
При навождении на него он будет раздвигаться, как это показано на экране.



УСТАНОВКА
Это в:
Панель управления --- управление дизайном --- таблица стилей Css в самы низ:
Quote

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

красным выделил длину поля ввода, можно изменить значение

Это сама форма поиска, вставляем в блок или куда Вам нужно:

Code

<div id="wrap-search">        
<div id="search">        
<form class="form-search" method="get" action="/search" target="_blank">
<input src="http://ssilki.at.ua/image/Forum/paznoe/0154b88f49a9.png" type="image">        
<input name="q" value="поиск" onfocus="this.value='';" onblur="this.value='поиск';" onmouseover="this.value='';" onmouseout="this.value='поиск';" type="text">        
</form>        
</div>        
</div>
 
Скрипты для Ucoz » Всё для Ucoz » Скрипты для Ucoz » Красивый поиск по сайту
Страница 1 из 11
Поиск:

Яндекс.Метрика
Copyright Глюк Рекордс © 2017

Создать бесплатный сайт с uCoz