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

Поисковая форма поиска на CSS3

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

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

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

Светлая формы поиска по сайту на CSS3

HTML

Код

CSS

Код

#dlopesam-klesugan {
  background: #e8e8e8;
  width: 370px;
  background: -webkit-gradient( linear,left top, left bottombottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
  background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);
  border-radius: 17px;
  -webkit-border-radius: 17px;
  -moz-border-radius: 17px;
  box-shadow: 1px 1px 2px rgba(25, 24, 24, 0.3), 0 0 2px rgba(16, 16, 16, 0.3);
  -webkit-box-shadow: 1px 1px 2px rgba(14, 14, 14, 0.3), 0 0 2px rgba(10, 10, 10, 0.3);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
}

/*** Надпись ***/
input[type="text"] {
  background: #f5f5f5;
  background: -webkit-gradient( linear, left bottombottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
  background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);
  border: 0;
  border-bottom: 1px solid #d6d3d3;
  border-right: 1px solid rgba(230, 230, 230, 0.8);
  font-size: 16px;
  margin: 4px;
  padding: 5px;
  width: 250px;
  border-radius: 17px;
  -webkit-border-radius: 17px;
  -moz-border-radius: 17px;
  box-shadow: -1px -1px 2px rgba(27, 25, 25, 0.3), 0 0 1px rgba(25, 24, 24, 0.2);
  -webkit-box-shadow: -1px -1px 2px rgba(19, 18, 18, 0.3), 0 0 1px rgba(19, 18, 18, 0.2);
  -moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
}

input[type="text"]:focus{
  outline: none;
  background: #fff; /* Резервный цвет для браузеров недодерживающих CSS3 */

  /* Градиенты */
  background: -webkit-gradient( linear, left bottombottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
  background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
}

/*** ПОИСК КНОПКА ***/
input[type="submit"] {
  background: #33820d;
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(71, 181, 23)), color-stop(0.15, rgb(82, 208, 24)), color-stop(0.88, rgb(49, 105, 23)), color-stop(1, rgb(49,114,21)));
  background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);
  border: 0;
  color: #f7f7f7;
  cursor: pointer;
  float: right;
  font: 16px Arial, Helvetica, sans-serif;
  font-weight: bold;
  height: 30px;
  margin: 3px 3px 0;
  text-shadow: 0 -1px 0 rgba(90, 83, 83, 0.45);
  width: 85px;
  outline: none;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
  -moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
  -webkit-box-shadow: -1px -1px 1px rgba(249, 240, 240, 0.5), 1px 1px 0 rgba(191, 189, 189, 0.76);
}
/*** ПОИСК подсвеченной кнопки ***/
input[type="submit"]:hover {
  background: #4ea923; /* Резервный цвет для браузеров недодерживающих CSS3 */

  /* Градиенты */
  background: -webkit-gradient( linear, left top, left bottombottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
  background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
input[type="submit"]:active {
  background: #4ea923; /* Резервный цвет для браузеров поддерживающих CSS3 */

  /* Градиенты */
  background: -webkit-gradient( linear, left bottombottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
  background: -moz-linear-gradient( center bottombottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}

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

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

08 Июля 2019 Загрузок: 1 Просмотров: 882 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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