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

Приветствуем Вас на сайте!

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

Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"

Вход на сайт

Логин:

Пароль:

Вход

Войти по Логину и Паролю

О нас

Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!

Войти | Зарегистрироваться

Настройки

Анимация Шапки

Анимация Футера

Автообновление Чата

Автообновление Статистики

Звуковые Оповещения

Авто Подгрузка Материалов

Перезагрузите страницу

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

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

Установка:
1. В таблицу стилей вставляем код:

Код

.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;
}

2. Форма поиска

Код

Поделиться новостью в социальной сети.

Добавил: Best_Studio

Дата добавления: 17.01.2016 в 15:39 по МСК

Категория: Скрипты для uCoz

Просмотров: 850

Комментариев: 0

Рейтинг:

1

2

3

4

5

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Скрипты для uCoz [115]	Графика для uCoz [11]
Шаблоны для uCoz [40]	posts [0]