Оригинальная форма поиска

Оригинальная форма поиска

27.07.201222390

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

Поиск на CSS3 и только. Никаких скриптов здесь не используем. В браузерах Webkit форма поиска смотрится так, как и должна, а вот в IE все плохо. Даже круг – не круг, а какой-то растянутый овал. И наша «палочка» или правильней, ручка лупы в IE расположена прямо. А должна? Должна быть диагонально.


Код HTML



Code
<p class="s"><input name="search" id="search" type="search"></p>


Код CSS



Code
#search {
  -webkit-appearance: none;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  width: 24px;
  padding: 0 10px;
  height: 24px;
  font-size: 14px;
  color: #666;
  line-height: 24px;
  border: 0;
  border-radius: 50px;
  box-shadow: 0 0 0 1px rgba(0,150,200,.5), inset 0 2px 5px rgba(0,100,150,.3), 0 2px 0 rgba(255,255,255,.6);
  position: relative;
  z-index: 5;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
}

#search:focus {
  outline: none;
  width: 180px;
}

p.s {
  z-index: 4;
  position: relative;
  padding: 5px;
  line-height: 0;
  border-radius: 100px;
  background: #b9ecfe;
  background-image: -webkit-linear-gradient(#dbf6ff,#b9ecfe);
  background-image: -moz-linear-gradient(#dbf6ff,#b9ecfe);
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,100,150,.4);
}

p.s:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px 2px rgba(100,200,255,.5);
}

p.s:after {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  height: 20px;
  background: #b9ecfe;
  bottom: -10px;
  right: -3px;
  border-radius: 0 0 5px 5px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  box-shadow: inset 0 -1px 0 rgbA(255,255,255,.6), -2px 2px 2px rgba(0,100,150,.4);
}

p.s:hover:after {
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), -2px 2px 2px 1px rgba(100,200,255,.5);
}



Сохраните в социальную сеть
Комментарии (0)
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт