• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Анимированная форма поиска на HTML & CSS (Пример верстки поисковой формы для сайта на HTML и CSS)
Анимированная форма поиска на HTML & CSS
Kosten
Дата: Воскресенье, 30.09.2018, 01:59 | Сообщение 1
Администраторы
Сообщений:18265
Награды: 55


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

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

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



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

HTML

Код
<div id="topaseb-tamilab">
  <form action="" autocomplete="on">
  <input id="search" name="search" type="text" placeholder="Что искать будем?"><input id="search_submit" value="Rechercher" type="submit">
  </form>
</div>


CSS

Код
#topaseb-tamilab {
  margin: 50px 100px;
  display: inline-block;
  position: relative;
  height: 60px;
  float: right;
  padding: 0;
  position: relative;
}

input[type="text"] {
  height: 60px;
  font-size: 55px;
  display: inline-block;
  font-family: "Lato";
  font-weight: 100;
  border: none;
  outline: none;
  color: #555;
  padding: 3px;
  padding-right: 60px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
}

input[type="text"]:focus:hover {
  border-bottom: 1px solid #BBB;
}

input[type="text"]:focus {
  width: 700px;
  z-index: 1;
  border-bottom: 1px solid #BBB;
  cursor: text;
}
input[type="submit"] {
  height: 67px;
  width: 63px;
  display: inline-block;
  color:red;
  float: right;
  background: url(Ссылка на изображение) center center no-repeat;
  text-indent: -10000px;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  cursor: pointer;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity .4s ease;
}

input[type="submit"]:hover {
  opacity: 0.8;
}


Демонстрация
Прикрепления: 3185055.png(11.4 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов HTML » Анимированная форма поиска на HTML & CSS (Пример верстки поисковой формы для сайта на HTML и CSS)
  • Страница 1 из 1
  • 1
Поиск: