ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Темный поиск по сайту раздвижной для uCoz

Темный поиск по сайту раздвижной для uCoz

Темный поиск по сайту раздвижной для uCoz
Безусловно на каждом сайте есть свой внутренний поиск по сайту и конструктор uCoz не исключение, где вы можете поставить темный дизайн. Плюс к этому он идет с эффектом, которые работают на чистых стилях. Это по клику он автоматически по правую и левую сторону раздвигается и становиться шире. Это можно поставить его в шапку интернет портала. Так как он по своей стилистике заметен, то и на темном фоне он отлично будет смотреться и на светлом аналогично.

Проверяя его на тестовом сайте, а это на работоспособность, то скажу, что он отлично работает. Вы можете его сами настроить, так как выставить под себя или свой цвет стили. Но и зам эффект, а это по клику чтоб он был больше, где надпись "поиск" будет сохраняться, пока вы сами не начнете писать знаки, сто она исчезнет. Также можно попробовать установить в бок сайта, только сразу ширину выставить. чтоб за него не заходил при увеличение.

Приступаем к установке:

Здесь по вашему усмотрению ставим, там где вам нужно.

Код
<div align="center">
<form class="form-search" method="get" action="/search">
<input type="text" name="q" placeholder="поиск" value=""></form>
</div>

CSS:

Код
.form-search {
display: inline-block;
background: -moz-linear-gradient(#424242, #2d2c2c 50%, #313131 50%, #2b2b2b);
background: -ms-linear-gradient(#424242, #2d2c2c 50%, #313131 50%, #2b2b2b);
background: -o-linear-gradient(#424242, #2d2c2c 50%, #313131 50%, #2b2b2b);
background: -webkit-linear-gradient(#424242, #2d2c2c 50%, #313131 50%, #2b2b2b);
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
padding: 4px;
}

.form-search input {
width: 130px;
height: 32px;
line-height: 32px;
font: 11px Helvetica, Arial, sans-serif;
color: #6E7074;
text-shadow: 0 1px 0 #000;
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
padding: 0 30px 0 6px;
background-image: -moz-linear-gradient(#2b2b2b, #313030);
background-image: -ms-linear-gradient(#2b2b2b, #313030);
background-image: -o-linear-gradient(#2b2b2b, #313030);
background-image: -webkit-linear-gradient(#2b2b2b, #313030);
background-repeat: no-repeat;
background-position: 100% 50%, 100% 100%;
border: 1px solid #272626;
-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px #575555, 0 1px 0 #272727;
-moz-box-shadow: inset 0 1px 1px #575555, 0 1px 0 #272727;
box-shadow: inset 0 1px 1px #575555, 0 1px 0 #272727;
}

.form-search input:focus {
width: 160px;
-webkit-box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
-moz-box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
color: #fff;
}

(rip Бармен) - он же JoniDen || Исправления от -SAM-
27 Июля 2017 Просмотров: 1532 Комментариев: (4)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 4
Critic©
Critic© 28 Июля 2017 17:151
0
Этот внутренний поисковик можно использовать и в "только белом" дизайне
Kosten
Kosten 28 Июля 2017 19:462
0
Но можно в белом или светлом, ставят темные поиски, но здесь по мне на аналогичный оттенок его лучше поставить. Но а главное, это настроить функционал, так как по клику он по ширине больше идет.
Critic©
Critic© 06 Августа 2017 19:073
0
Kosten, его куда угодно можно поставить, не только в углы?
Kosten
Kosten 06 Августа 2017 20:064
0
Но некоторые вообще по центру ставят, но там они по ширине большие идут. Но здесь не нужно забывать, что хоть небольшой, но дизайн идет, а не просто как стандартные созданы.
avatar