ZorNet.Ru — сайт для вебмастера » HTML и CSS » Формы поиска для сайта с эффектами

Формы поиска для сайта с эффектами

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

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

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

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

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

Установочный процесс:

Сам процесс установки не сложен, где в начале выбираем конструктор, а потом под него стилю, что указаны по незнанию класса. Но изначально ставим саму основу, что в CSS идет в сам начале, а далее вы сами увидите, какой класс, какому варианту закреплен.

HTML

Код

CSS

Код

.nusaganic{
  margin: 100px auto;
  width: 312px;
  height: 50px;
}

.pervaya-poiskovaya-forma{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}
.pervaya-poiskovaya-forma input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #63717f;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.pervaya-poiskovaya-forma input#search::-webkit-input-placeholder {
  color: #65737e;
}

.pervaya-poiskovaya-forma input#search:-moz-placeholder { /* Firefox 18- */
  color: #65737e;
}

.pervaya-poiskovaya-forma input#search::-moz-placeholder { /* Firefox 19+ */
  color: #65737e;
}

.pervaya-poiskovaya-forma input#search:-ms-input-placeholder {
  color: #65737e;
}
.pervaya-poiskovaya-forma .kudesaving{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}
.pervaya-poiskovaya-forma input#search:hover, .pervaya-poiskovaya-forma input#search:focus, .pervaya-poiskovaya-forma input#search:active{
  outline:none;
  background: #e4e4e4;
  }
.pervaya-poiskovaya-forma input#search {
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #211f1f;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;
  border: 2px solid #44444e;
}

.vtoroy-analogicny-poisk{
  width: 312px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}
.vtoroy-analogicny-poisk input#search {
  width: 50px;
  height: 50px;
  background: #e5e6ea;
  border: none;
  font-size: 10pt;
  float: right;
  padding-right: 40px;
  padding-left: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: width .55s ease;
  -moz-transition: width .55s ease;
  -ms-transition: width .55s ease;
  -o-transition: width .55s ease;
  transition: width .55s ease;
  border: 2px solid #b6b6b7;
}
.vtoroy-analogicny-poisk input#search::-webkit-input-placeholder {
  color: #807b7b;
}

.vtoroy-analogicny-poisk input#search:-moz-placeholder { /* Firefox 18- */
  color: #807b7b;
}

.vtoroy-analogicny-poisk input#search::-moz-placeholder { /* Firefox 19+ */
  color: #807b7b;
}

.vtoroy-analogicny-poisk input#search:-ms-input-placeholder {
  color: #807b7b;
}
.vtoroy-analogicny-poisk .kudesaving{
  position: absolute;
  top: 50%;
  right: 0;
  margin-right: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}
.vtoroy-analogicny-poisk input#search:focus, .vtoroy-analogicny-poisk input#search:active{
  outline:none;
  width: 300px;
  nusaganic-shadow: 0 0 8px #000 inset;
}

.vtoroy-analogicny-poisk:hover input#search{
width: 300px;
  background: #e4e4e4;
}

.vtoroy-analogicny-poisk:hover .kudesaving{
  color: #93a2ad;
}

.tretiya-versiya-poiskovika{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

.tretiya-versiya-poiskovika input#search {
  width: 312px;
  height: 50px;
  background: #222429;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 3px;
  color: #f5f1f1;
  border: 2px solid #48484a;
}
.tretiya-versiya-poiskovika input#search::-webkit-input-placeholder {
  color: #65737e;
}

.tretiya-versiya-poiskovika input#search:-moz-placeholder { /* Firefox 18- */
  color: #65737e;
}

.tretiya-versiya-poiskovika input#search::-moz-placeholder { /* Firefox 19+ */
  color: #65737e;
}

.tretiya-versiya-poiskovika input#search:-ms-input-placeholder {
  color: #65737e;
}
.tretiya-versiya-poiskovika .kudesaving{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;

  -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}
.tretiya-versiya-poiskovika input#search:focus, .tretiya-versiya-poiskovika input#search:active{
  outline:none;
}

.tretiya-versiya-poiskovika:hover .kudesaving{
  margin-top: 16px;
  color: #93a2ad;

  -webkit-transform:scale(1.5);
  -moz-transform:scale(1.5);
  -ms-transform:scale(1.5);
  -o-transform:scale(1.5);
  transform:scale(1.5);
  }

.chetvertaya-versiya-poiska{
  overflow: hidden;
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
}
.chetvertaya-versiya-poiska input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #e4e4e4;
  padding-left: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 2px solid #303040;
}
.chetvertaya-versiya-poiska input#search::-webkit-input-placeholder {
  color: #5c6c79;
}

.chetvertaya-versiya-poiska input#search:-moz-placeholder { /* Firefox 18- */
  color: #5c6c79;
}

.chetvertaya-versiya-poiska input#search::-moz-placeholder { /* Firefox 19+ */
  color: #5c6c79;
}

.chetvertaya-versiya-poiska input#search:-ms-input-placeholder {
  color: #5c6c79;
}
.chetvertaya-versiya-poiska button.kudesaving{
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

  border: none;
  background: #232833;
  height: 50px;
  width: 50px;
  color: #4f5b66;
  opacity: 0;
  font-size: 10pt;

  -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}
.chetvertaya-versiya-poiska:hover button.kudesaving, .chetvertaya-versiya-poiska:active button.kudesaving, .chetvertaya-versiya-poiska:focus button.kudesaving{
  outline: none;
  opacity: 1;
  margin-left: -50px;
  }

  .chetvertaya-versiya-poiska:hover button.kudesaving:hover{
  background: white;
  }

Если вы являетесь владельцем веб-сайта, у которого еще нет окна поиска на своем веб-сайте, или ищете более удобные формы поиска, чтобы заменить ваши оригинальные, то этот сценарии из поисковых форм, где созданы на CSS и HTML будет отличным предложение. Так как самостоятельно можно красиво оформить или сделать так, чтоб он соответствовал вашему стилю.

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

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

19 Июля 2019 Просмотров: 972 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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