ZorNet.Ru — сайт для вебмастера » HTML и CSS » Расширенная панель поиска с помощью CSS

Расширенная панель поиска с помощью CSS

Расширенная панель поиска с помощью CSS
В данном материале представлен выдвижной поиск, который по умолчанию идет кнопкой, но при наведении клика, становится в горизонтальную форму. Данный скрип на сайте уже находиться, но думаю один материал хорошо, а 2 будет лучше. Да и сам поиск по сайту по своему формату создан в простом виде, где вся анимация выдвижение работает на чистом CSS. А также здесь присутствует шрифтовой знак, где ниже его нужно установить, если ранее вы не прописали.

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

Работы поискового компонента:

Раздвижной поиск для сайта

Подключение шрифтовых знаков:

Код
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

HTML

Код
<div class="envelope poisketun">
  <div class="kugovoysa poisketun">
  <div class="poiskovik">
  <input class="custom-input" type="text" name="" placeholder="Что будем искать на сайте? ...">
  <a href="#" class="icon-area"><i class="fa fa-search"></i></a>
  </div>
  </div>
</div>

CSS

Код
.poiskovik {
  margin-bottom: auto;
  margin-top: auto;
  height: 40px;
  background-color: white;
  border-radius: 30px;
  padding: 10px;
  }

  .kugovoysa{
  display: flex;
  justify-content: center;
  }

  .poisketun {
  height: 100%;
  }

  .custom-input{
  border: 0;
  outline: 0;
  width: 0;
  line-height: 40px;
  transition: width 0.4s linear;
  }

  input::placeholder {
  color: #262626;
  font-size: 19px;
  }
input{
  font-size: 20px;
}
  .poiskovik:hover > .custom-input{
  padding: 0 10px;
  width: 400px;
  caret-color:#262626;
  transition: width 0.4s linear;
  }

  . poiskovik:hover > .icon-area{
  background: white;
  color: #262626;
  }

  .icon-area {
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  float: right;
  display: flex;
  text-decoration: none;
  color: #262626;
  }
.fa-search{
  font-size: 20px;
}

Предлагаемая панель поиска можно задействовать почти на всех веб-сайтах, ведь такой тип конструкции может быть сделан многими способами. В некоторых случаях полосу можно увидеть при нажатии или наведении значка.

Демонстрация
2022-04-09 Загрузок: 2 Просмотров: 303 Комментарий: (0)

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

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

Оставь свой отзыв

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