Стильная раздвижная форма поиска для uCoz

Статистика

Краткая статистика сайта.

Всего

Пользователей

Гостей

Полная статистика

ВКонтакте

Сообщество сайта ВК

Поддержка

На развитие сайта

Поддержать

Поиск по тегам

Облако популярных тегов.

пять 5s продвижение скрипт uCoz смартфоны убрать рекламу iPhone 5S китай microsoft на Хакеры Google акции iPad iPhone 6 Intel iPhone начала Apple получит как nokia air iPad mini купить производство Xbox One Tesla ARM

Поиск очень важный елемент, особенно когда на вашем сайте много разных материалов, среди которых легко потеряться. Форма поиска существенно экономит ваше и время ваших пользователей. Однако наличие поиска на сайте это только половина дела. Вторая же половина это его визуальная составляющая. А именно заметность и единение с общим дизайном вашего сайта.

Форма, которую мы рассмотрим в этом материале имеет современный вид с едва заметными мягкими тенями и плавную анимацию раздвижения в правую сторону. Она отлично впишется в любой дизайн. Но если вы все таки захотите изменить её цвет, размер, добавить обводку, уменьшить закруглённость и прочее - это будет очень легко сделать, заменив пару значений в стилях.

Установка

Первым делом мы загружаем в папку image содержимое архива. Далее в то место, где хотим видеть форму поиска вставляем следующее:

Код

Следующим шагом мы подключаем стили в Таблице стилей CSS:

Код

#search input[type="text"] {
background: url(/images/search.png) no-repeat 16px 11px #fff;
border: 0 none;
font-size: 13px;
color: #6a6a6a;
width: 250px;
padding: 10px 20px 8px 40px;
box-shadow: 0 0 20px rgb(0 0 0 / 10%);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#search input[type="text"]:focus {
width: 280px;
}

Стоит отметить, что значение 250px это ширина формы поиска в изначальном положении, а 280px ширина формы после нажатия на неё. Если в том месте, куда вы вставляете форму место фиксировано, и раздвигаться форме некуда - сделайте эти значения одинаковыми.