вСкрипты для Юкоз

Форма поиска на 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>

Заказать установку скрипта
Если Вы не можете установить скрипт сам, то мы вам поможем с этой проблемой.


источник: webmaster-ucoz.ru

Похожие посты