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

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

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

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

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

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

Код

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 Просмотров: 1629 Комментариев: (4)

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

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

Kosten

Похожие материалы

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

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