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

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

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

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

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

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

Код

HTML

Код

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

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

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

09 Апреля 2022 Загрузок: 2 Просмотров: 834 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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