CSS магія - створюємо пошукову форму

19 хв. читання

У цьому уроці я хотів би обговорити, як можна прикрасити просту форму пошуку. Ми не будемо робити нічого занадто складного. Просто дослідимо чотири різних варіанти форми пошуку за допомогою CSS.

У вас вже є Basic Search Box

У вашому HTML файлі ви повинні будете створити форму пошуку, щоб почати роботу.

    <div class="box">
      <div class="container-1">
          <span class="icon"><i class="fa fa-search"></i></span>
          <input id="search" placeholder="Search..." type="search">
      </div>
    </div>

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

CSS магія - створюємо пошукову форму

Додавання Font Awesome

Font Awesome є бібліотекою іконок. Ви можете дізнатися більше тут.

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

Фрагмент коду вище є одним із прикладів того, як можна включити значок у ваш документ. Тим не менш, для того, щоб значок відображався вам також необхідно включити посилання на Font Awesome, приклад нижче. Увімкніть це посилання у голові вашого документа.

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

Основні стилі

Тепер ми збираємося додати деякі стилі в CSS.

    body{
      background: #343d46;
    }
     
    .box{
      margin: 100px auto;
      width: 300px;
      height: 50px;
    }

У наведеному вище фрагменті CSS ми додаємо деякі стилі до сторінки.

CSS магія - створюємо пошукову форму

Прикрашаємо вікно пошуку

Цей урок розповідає як прикрасити вікно пошуку. В цьому першому прикладі я поясню, що відбувається більш докладно. Я хочу переконатися, що ви точно знаєте, що відбувається. В інших трьох прикладів, я просто покажу вам, як досягти різні переходи.

1

В першому прикладі ми зробимо, щоб фон змінювався при активізації поля пошуку. Ми також додамо перехід (transition), так що зміни не сильні.

HTML

Ви вже бачили HTML для основної розмітки. Цей фрагмент буде однаковим для всіх прикладів.

    div class="box">
      <div class="container-1">
          <span class="icon"><i class="fa fa-search"></i></span>
          <input id="search" placeholder="Search..." type="search">
      </div>

CSS

Для початку ми повинні визначити CSS стиль самого поля пошуку. Давайте додамо значення CSS один за одним, так щоб ви точно розуміли, що відбувається.

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

Найбільш важливою властивістю є рosition: relative . Це встановлюється спеціально так, щоб значок можна було помістити у верхній частині форми пошуку.

    .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). Все вище чисто естетичне як радіус кордону або колір фону. Зверніть увагу на left padding. Зроблено для того, щоб звільнити місце для значка.

Нижче у нас є чотири стилі**.** Вони, на жаль, мають бути відокремлені для окремих браузерів і не можуть бути об'єднані в скороченому написані стилів. Це трохи дратує, і ви побачите, що це повторюється в кожному прикладі!

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

Іконка

Нарешті, ми будемо додавати значок. Найголовніше, ми встановлюємо позицію для розміщення його на верхній частині position: absolute .

CSS магія - створюємо пошукову форму

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

Додавання Hover-ефекту

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

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

Як ви бачите на наведеному фрагменті, ми додали два додаткових стана - focus і active . Таким чином, ефект не зникає, коли ви заберете курсор з поля пошуку. Що ще більш важливо, ефект теж видний, коли поле активне.

CSS магія - створюємо пошукову форму

Створюємо Transition

Для того, щоб зробити анімацію (Transition), нам потрібно додати кілька рядків коду.

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

Тепер стиль поля вводу виглядає так:

    .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 Transitions працює?

Якщо ви нічого не знаєте про CSS Transitions дозвольте мені дати вам короткий огляд. По-перше, для того, щоб перехід працював, має бути визначено на стан за замовчуванням, а не при наведенні (hover) або на активний(active) або на фокус(focus).

CSS переходи дозволяють поступово змінюється ефект, і ви можете визначити конкретні параметри для управління, наприклад, тривалість переходу і вид переходу. Ви можете мати кілька переходів, встановлені для одного елемента. Але, найголовніше, ви завжди повинні включати префікси для того, щоб врахувати різні браузери, так як підтримка CSS Transitions ще не є універсальним.

Для отримання додаткової інформації дивіться на: CSS3 Transitions

2

У цьому прикладі при наведенні курсора на іконку, пошук буде розширюватися і в цей момент, ви можете ввести свій запит. Більшість коду в цьому прикладі буде дуже схожий на попередній.

HTML

    <div class="box">
      <div class="container-2">
          <span class="icon"><i class="fa fa-search"></i></span>
          <input id="search" placeholder="Search..." type="search">
      </div>
    </div>

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

Стиль поля для цього переходу відрізняється.

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

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

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

CSS магія - створюємо пошукову форму

Додавання Hover-ефекту

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

Сама остання річ в коді вище, що при наведенні на іконку міняє свій колір - це просто маленька деталь, щоб швидко показати користувачеві, що вікно пошуку активне і працює. Зміна не здійснює перехід.

CSS магія - створюємо пошукову форму

3

В цьому випадку значок злегка припіднімется і збільшиться в розмірах.

HTML

HTML розмітка така ж, як у двох попередніх прикладах.Виняток, звичайно, є .container-3 .

    <div class="box">
      <div class="container-3">
          <span class="icon"><i class="fa fa-search"></i></span>
          <input id="search" placeholder="Search..." type="search">
      </div>
    </div>

CSS

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

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

CSS магія - створюємо пошукову форму

Додавання Hover-ефекту

    .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 and Chrome */
      -moz-transform:scale(1.5); /* Firefox */
      -ms-transform:scale(1.5); /* IE 9 */
      -o-transform:scale(1.5); /* Opera */
       transform:scale(1.5);
      }

CSS магія - створюємо пошукову форму

4

На відміну від попередніх трьох, цей буде більш складним. При наведенні, кнопка буде ковзати по верхній частині поля.

HTML

    <div class="box">
      <div class="container-4">
        <input id="search" placeholder="Search..." type="search">
        <button class="icon"><i class="fa fa-search"></i></button>
      </div>
    </div>

HTML трохи відрізняється. Поле існує як і раніше , звичайно, але значок тепер всередині елемента кнопки, яка справа.

CSS магія - створюємо пошукову форму

CSS

    .container-4{
      overflow: hidden;
      width: 300px;
      vertical-align: middle;
      white-space: nowrap;
    }
    
    .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;
    }
    
    
    
    .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;  
    }

Нижче наведений код для стилізації кнопки, що з'явиться при наведенні. Хитрість в тому, щоб змусити його ковзати від сторони, помістити його прямо за полем, і зробити його невидимим.

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

CSS магія - створюємо пошукову форму

Додавання Hover-ефекту

CSS магія - створюємо пошукову форму

    .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 магія - створюємо пошукову форму

Демо

Codeguida 9.8K
Приєднався: 1 місяць тому

Hosting Ukraine

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація