CSS эксперименты с полем и кнопкой поиска

CSS эксперименты с полем и кнопкой поиска

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

У вас уже есть стандартный блок с поиском

Для начала в вашем HTML-документе вам необходимо создать тег input с типом search. Если вы посмотрите на нижеприведенный код, то заметите четыре разных элемента: блок div с классом .box, блок div с классом .container-1, элемент span с классом .icon и сам элемент input с типом search.

<div class="box">
  <div class="container-1">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Поиск..." />
  </div>
</div>

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

Добавление шрифтов Font Awesome

Шрифты Font Awesome являются библиотекой иконок. Узнать подробнее об этом проекте вы можете на собственном сайте проекта Font Awesome.

<i class="fa fa-search"></i>

Пример кода сверху – это один из примеров того, как вы можете вставить иконку внутрь разметки. Однако, для того чтобы иконка отображалась, вам необходимо прописать ссылку на библиотеку Font Awesome, как это показано в следующем примере. Вставьте данную ссылку внутрь элемента head.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Базовое оформление

Мы собираемся добавить некоторые стили в отдельной таблице стилей (которую вам также необходимо подключить внутри элемента head).

body{
  background: #343d46;
}

.box{
  margin: 100px auto;
  width: 300px;
  height: 50px;
}

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

Украшение блока с поиском

Эта обучающая статья полностью посвящена тому, как научиться украшать блоки с поиском. В первом примере я буду объяснять все очень подробно; я хочу быть уверена в том, что вы точно понимаете, что и как происходит. В последующих трех примерах я просто покажу, как добиться различных переходов.

#1. Исчезновение фона

В первом примере мы приступим к изменению фона у тега input при наведении. Мы также добавим переход, чтобы изменение не было резким.

HTML

Вы уже видели вариант HTML-разметки. Во всех примерах она будет похожей.

<div class="box">
  <div class="container-1">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Поиск..." />
  </div>
</div>

CSS

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

.container-1{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

Сначала мы оформим элемент с классом .container. Вероятно самое важное свойство – это position: relative. Оно задано специально для того, чтобы иконку можно было поместить поверх элемента input, что вы и увидите далее.

.container-1 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;
}

Input

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

Ниже приведены четыре разных правила для указания цвета текста атрибута placeholder (в нашем случае это Поиск). К сожалению, все правила должны прописываться отдельно с указанием вендорных префиксов и не могут быть прописаны в сокращенном виде. Это немного раздражает, и вы увидите этот повторяющийся код в каждом примере!

.container-1 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-1 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-1 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-1 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

Иконка

Наконец, мы назначаем оформление для иконки. Наиболее важный момент – это позиционирование иконки поверх элемента input благодаря свойству position: absolute. Поля (margins) помогают спозиционировать иконку в дополнение к указанному верхнему значению свойства position равному 50%.

.container-1 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}

Добавление эффектов при наведении

Следующий набор правил, который нам необходимо создать, будет определять, что будет происходить с блоком с поиском при наведении. В этом примере мы только изменим цвет фона. Для того чтобы избавиться от желтого или голубого свечения вокруг элемента input (которое иногда добавляется браузерами), назначим свойство outline: none.

.container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{
    outline:none;
    background: #ffffff;
  }

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

Создание перехода

Для реализации перехода нам нужно добавить несколько строк кода. Вернемся обратно к правилу, в котором мы назначили стили для элемента input – .container-1 input#search. Перед закрывающей скобкой добавьте следующий код:

  -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;

Мы задаем свойство transition в сокращенном виде, но мы можем также и прописать все три параметра по отдельности. Сначала мы говорим, что переход будет влиять только на свойство background. Затем мы говорим, что переход должен длиться чуть больше полсекунды. Наконец, мы определяем функцию смягчения для перехода. Функция ease не является единственно возможной для данного примера. Мы также можем использовать, например, функции linear или ease-in. Тогда просто сам переход будет смотреться немного по-другому. Попробуйте сами поменять значения и выбрать тот эффект, который вам больше понравится.

Стили для элемента input теперь выглядят следующим образом:

.container-1 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  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;
}

Как работают CSS переходы?

Если вы ничего не знаете о CSS переходах, давайте я сделаю для вас небольшой обзор. Сначала, чтобы переход был реализован, нужно определить свойство в его исходном состоянии (по умолчанию), но не в состояниях hover, active или focus.

CSS переходы позволяют постепенно изменять эффект. И вы можете задать определенные параметры для управления эффектом (например, к какому свойству переход будет применен, какова будет длительность перехода и какого он будет типа). Вы можете назначить несколько переходов для одного элемента. Но, что еще важнее, вам следует всегда добавлять вендорные префиксы, чтобы подстроиться под различные браузеры, поскольку поддержка данного свойства еще не является повсеместной.
Для получения дополнительной информации посмотрите статью CSS3 переходы и трансформации с нуля.

#2. Растягивание элемента input при наведении

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

HTML

<div class="box">
  <div class="container-2">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Поиск..." />
  </div>
</div>

CSS

.container-2{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

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

.container-2 input#search{
  width: 50px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 35px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;

  -webkit-transition: width .55s ease;
  -moz-transition: width .55s ease;
  -ms-transition: width .55s ease;
  -o-transition: width .55s ease;
  transition: width .55s ease;
}

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

Ниже приведен код для изменения цвета текста атрибута placeholder.

.container-2 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-2 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-2 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-2 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

И снова мы назначаем оформление для иконки. Оно должно быть таким же, как и в предыдущем примере.

.container-2 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}

Добавление эффектов при наведении

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

.container-2 input#search:focus, .container-2 input#search:active{
  outline:none;
  width: 300px;
}

.container-2:hover input#search{
width: 300px;
}

.container-2:hover .icon{
  color: #93a2ad;
}

Последний момент, который происходит с блоком поиска, – это изменение цвета иконки. Это просто небольшой штрих, чтобы показать пользователю, что блок с поиском является активным и готов к взаимодействию, в отличие от неактивного состояния. Данное изменение не связано с переходом.

#3. Увеличение размера иконки при наведении

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

HTML

И снова HTML-разметка для иконки и блока с поиском будет такой же, как и в предыдущих двух примерах. Исключением, конечно же, является элемент с классом .container-3.

<div class="box">
  <div class="container-3">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Поиск..." />
  </div>
</div>

CSS

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

.container-3{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

.container-3 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
}

И опять следом идут правила для атрибута placeholder:

.container-3 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-3 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-3 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-3 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

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

.container-3 .icon{
  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;
}

Добавление эффектов при наведении

.container-3 input#search:focus, .container-3 input#search:active{
    outline:none; 
}

.container-3:hover .icon{
  margin-top: 16px;
  color: #93a2ad;

  -webkit-transform:scale(1.5); /* Safari и Chrome */
  -moz-transform:scale(1.5); /* Firefox */
  -ms-transform:scale(1.5); /* IE 9 */
  -o-transform:scale(1.5); /* Opera */
   transform:scale(1.5);
  }

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

И снова, для получения более подробной информации о трансформациях посмотрите статью CSS3 переходы и трансформации с нуля.

#4. Кнопка при наведении

В отличие от предыдущих трех примеров, этот пример будет более сложным. При наведении, сверху будет появляться кнопка, позволяющая продолжить поиск – что-то наподобие кнопок Отправить или Продолжить. Внутри кнопки будет расположена иконка в виде лупы.

HTML

<div class="box">
  <div class="container-4">
    <input type="search" id="search" placeholder="Поиск..." />
    <button class="icon"><i class="fa fa-search"></i></button>
  </div>
</div>

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

CSS

CSS в этом примере другой, поэтому будьте внимательны! Ниже приводится код для оформления контейнера. Для начала, у нас отсутствует свойство position: relative; оно уже не играет важной роли, поскольку иконка не опирается на данное свойство, чтобы оказаться поверх элемента input. Однако у нас появилось свойство overflow:hidden. Это свойство препятствует появлению кнопки, когда курсор мыши не наведен на блок с поиском. Формально, появляющаяся кнопка уже находится справа от элемента input, но благодаря свойству overflow:hidden, ее не видно, т.к. она выходит за границы контейнера (контейнер и элемент input имеют одинаковую ширину).

.container-4{
  overflow: hidden;
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
}

В следующем отрывке кода к элементу input не применяется переход, т.к. на этот раз он является элементом, для которого создается эффект.

.container-4 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #fff;
  padding-left: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Далее идет код, изменяющий цвет текста атрибута placeholder.

.container-4 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-4 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-4 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-4 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

Далее приводится код, применяющий стили для кнопки, появляющейся при наведении. Для того чтобы заставить кнопку появляться со стороны, нужно расположить ее сразу после элемента input и сделать ее невидимой до момента наведения. Кнопка и является элементом, который изменяется (она перемещается), т.е. именно к ней и применяется переход. Чтобы сделать проще, я использовала для перехода все свойства.

.container-4 button.icon{
  -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;
}

Добавление эффектов при наведении

Для того чтобы кнопка появилась, нужно поместить ее поверх элемента input. Это достигается за счет отрицательного значения у свойства margin. До этого мы установили значение 0 для свойства opacity, а теперь нужно вернуть его на 1, чтобы кнопка была тоже видимой.

Последнее правило только меняет фоновый цвет кнопки при наведении. Хорошо будет показать пользователю, что кнопка является активной, и он может нажать на нее, чтобы осуществить поиск; нет никакой пользы от кнопки, которая остается неактивной.

.container-4:hover button.icon, .container-4:active button.icon, .container-4:focus button.icon{
    outline: none;
    opacity: 1;
    margin-left: -50px;
  }

  .container-4:hover button.icon:hover{
    background: white;
  }

Заключение

Итак, вот и подошли к концу наши CSS эксперименты! Мы взяли стандартную форму поиска и применили небольшой набор эффектов, чтобы изменить ее поведение. Как еще, по вашему мнению, можно изменить поле поиска? Для каких еще параметров вы бы хотели применить переходы и трансформации? Расскажите нам об этом в комментариях!

Автор: Paula Borowska

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

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

Комментарии (7)

  1. Трофим

    Хорошая статья.
    Симпатичные примеры. Все толково разъяснено. Все работает. За исключением одного нюанса.
    Если прописать путь в ссылке на библиотеку шрифтов Font Awesome как указано в статье, то иконка не появляется. Появляется только тогда, когда в начале пути добавить традиционное http:
    Короче, путь должен выглядеть так:
    http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css«

    • Андрей Кудлай

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

      • Трофим

        Именно так. Я работал без сервера. Как вы пишете, файл находился на рабочем столе. Но это не такая уж редкость. Упражнения часто делают именно так. Потому и написал.

  2. Андрей

    А если необходима такая реализация:
    При наведении на инпут меняла цвет иконка и когда фокус в инпуте иконка меняла цвет еще на другой например на красный.?

    • Денис Тар

      Все там делается. Я за основу брал Пример № 2; указывал нужные события на INPUT и на ICON — всё сияет, как новогодняя ёлка.

  3. Nikita

    Почему когда 2 раза кликаешь на поиск,то снизу появляется «английский» и все поле становится бледно-желтого цвета?

  4. Денис Тар

    Спасибо! Очень помогли.
    Для своего сайта несколько переделал пример № 2, чтобы иконка находилась справа, поле INPUT выглядело не «нулевым», а растягивалось с width_1 до width_2. Получилось очень даже хорошо, хоть и повоевать с настройками CSS-атрибутов пришлось, но овчинка выделки стоила.
    Читаю другие статьи — довольно подробно и не занудно описывается как что делать. Главное, что и примеры рабочие! Копирование листингов подкачало немного, но в целом — отлично.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree