Форма поиска на CSS3 для uCoz
827материалов
228тем на форуме
3004комментария
6161пользователь

Форма поиска на 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
Материал просмотрен: 996 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 6 комментариев

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

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


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
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта