регистрация
856материалов
3260комментариев
227тем на форуме
6729пользователей

Форма поиска на CSS3 для uCoz


Описание:

Одним из обязательных элементов на сайте является форма поиска. Если у вас ее вдруг нету, то для того чтобы посетителям сайта было легче находить нужный материал, рекомендую ее добавить. С помощью этого материала мы с Вами создадим плавающую красивую форму поиска на CSS3 с красивым эффектом. Красивая форма поиска, построенная на CSS3, не использует никаких вспомогательных плагинов и не использует изображений. Естественно, старые браузеры не будут воспринимать свойства CSS3, но все же оформление останется приемлемым.

Установка:

В таблицу стилей вставляете код:
Код
.inputbox {
     height: 50px;
     width: 300px;
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
}
.inputbox input {
     width: 100%;
     min-width: 0;
     box-sizing: border-box;
     font-size: 16px;
     padding: 16.5px 0;
     border: 0;
     background: none;
     width: 50px;
     position: absolute;
     top: 0;
     left: 50%;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
     border-radius: 100%;
     -webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
     transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
     -webkit-transition-delay: 0s, 0.4s, 0s;
     transition-delay: 0s, 0.4s, 0s;
     box-shadow: 0 0 0 1px currentColor;
     color: inherit;
     cursor: pointer;
     padding: 16.5px 0;
     padding-right: 50px;
     font-weight: lighter;
     font-family: 'Roboto';
}
.inputbox input:focus, .inputbox input:valid {
     width: 100%;
     -webkit-transition-delay: 0.4s, 0s, 0.4s;
     transition-delay: 0.4s, 0s, 0.4s;
     outline: 0;
     border-radius: 0;
     cursor: text;
     padding-left: 16.5px;
}
.inputbox input:focus + .del, .inputbox input:valid + .del {
     pointer-events: all;
     left: calc(100% - 25px);
     -webkit-transition-delay: 0.4s;
     transition-delay: 0.4s;
}
.inputbox input:focus + .del:focus, .inputbox input:valid + .del:focus {
     box-shadow: 0 0 0 1px currentColor;
     height: 37.5px;
     width: 37.5px;
}
.inputbox input:focus + .del:before, .inputbox input:valid + .del:before {
     -webkit-transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.7);
     transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.7);
     -webkit-transition-delay: 0s;
     transition-delay: 0s;
}
.inputbox input:focus + .del:after, .inputbox input:valid + .del:after {
     -webkit-transform: translate(-50%, -50%) rotate(45deg) scaleY(0.7);
     transform: translate(-50%, -50%) rotate(45deg) scaleY(0.7);
     -webkit-transition-delay: 0.2s;
     transition-delay: 0.2s;
}
.inputbox .del {
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     height: 50px;
     width: 50px;
     padding: 0;
     background: none;
     border-radius: 100%;
     border: 0;
     pointer-events: none;
     -webkit-transition: left 0.4s ease-in-out;
     transition: left 0.4s ease-in-out;
     -webkit-transition-delay: 0s;
     transition-delay: 0s;
     color: inherit;
     cursor: pointer;
}
.inputbox .del:focus {
     outline: none;
}
.inputbox .del:before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     background: currentColor;
     width: 1px;
     height: 37.5px;
     -webkit-transform: translate(32.25px, 32.25px) translate(-50%, -50%) rotate(-45deg) scaleY(1);
     transform: translate(32.25px, 32.25px) translate(-50%, -50%) rotate(-45deg) scaleY(1);
     -webkit-transition: -webkit-transform 0.2s ease-in-out;
     transition: -webkit-transform 0.2s ease-in-out;
     transition: transform 0.2s ease-in-out;
     transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
     -webkit-transition-delay: 0.6s;
     transition-delay: 0.6s;
}
.inputbox .del:after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     background: currentColor;
     width: 1px;
     height: 37.5px;
     -webkit-transform: translate(-50%, -50%) rotate(45deg) scaleY(0);
     transform: translate(-50%, -50%) rotate(45deg) scaleY(0);
     -webkit-transition: -webkit-transform 0.2s ease-in-out;
     transition: -webkit-transform 0.2s ease-in-out;
     transition: transform 0.2s ease-in-out;
     transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
     -webkit-transition-delay: 0.4s;
     transition-delay: 0.4s;
}
</style>

Форма поиска:
Код
<form class="inputbox" action="/search/" method="get">
     <input required="required" name="q" autocomplete="off" minlength="3" placeholder="Поиск по сайту...">
     <button type="reset" class="del"></button>
</form>


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 14.01.2016 в 18:30
Материал просмотрен: 1277 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 5 комментариев

Пожаловаться
Сказать спасибо
Источник

5 комментариев


prytulko
Віктор @prytulko 14.01.2016 18:521
-2
Не плохо, не плохо. Еще вопрос, что это за фигня не дает мне опубликовать сообщение http://f3.s.qip.ru/19yBhtbWu.png
Ромчик
Это не фигня, а ограничение, то есть минимальная длинна комментария вместе с пробелами 35 символов, максимальная 2500 символов.
prytulko
Віктор @prytulko 14.01.2016 18:573
-2
Понятно, и на фига нужен такой маразм
Ромчик
Вы можете нормально общаться, соблюдать правила этикета? Эту нужно для того, что бы не оставляли одни смайлы
evseevartem98
Artem Evseev @evseevartem98 25.04.2016 14:525
0
круто
avatar
-50% на шаблоны от TemplateMonster
Создать сайт вместе с uKit.com
Статистики нашего сайта
Сегодня к нам присоединился: 1 человек
Пользователи и гости сейчас онлайн: 5 Сегодня наш портал посетили: чел
Сейчас на сайте: AmiKus
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 5
Гостей: 4
Пользователей: 1