ZorNet.Ru — сайт для вебмастера » HTML и CSS » Выдвигающаяся форма поиска по сайта на CSS

Выдвигающаяся форма поиска по сайта на CSS

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

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

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

При заходе на сайт или открытие страницы:

Здесь производим клик, где поиск выезжает:

Это вид уже немного по дизайн переделан:

Приступаем к установке:

HTML

Код

CSS

Код

.camepaignos{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0px;
  height: 55px;
  background: #2355b2;
  line-height: 55px;
  padding-right: 55px;
  border-radius: 30px;
  box-shadow: 0 0 9px rgba(12, 12, 12, 0.72);
  transition: all 0.6s ease;
}

.sandinkom{
  border: 0;
  background: transparent;
  width: 0%;
  outline: none;
  font-family: sans-serif;
  font-size: 18px;
  color: #fff;
  font-style: italic;
  transition: all 0.3s ease;
  position: relative;
}

.camepaignos .fa{
  color: #f4f4f9;
  position: absolute;
  right: 20px;
  top: 14px;
  font-size: 24px;
  cursor: pointer;
}

.camepaignos.active{
  width: 247px;
  padding-left: 30px;
  transition: all 0.6s ease;
}

.sandinkom.active{
  width: 100%;
  padding-left: 3px;
  transition: all 0.6s 0.9s ease;
}

input::placeholder {
  color: #f7f7fb;
}

Код

$(document).ready(function(){

  $(".fa-search").click(function(){
  $(".camepaignos, .sandinkom").toggleClass("active");
  $("input[type='text']").focus();
  });

});

Что по шрифтовой кнопке, то здесь класс установлен от Font Awesome, что выводит фигуру.

Демонстрация

13 Сентября 2018 Просмотров: 3259 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

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