CSS експерименти з полем і кнопкою пошуку

20

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

У вас вже є стандартний блок з пошуком

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

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

CSS експерименти з полем і кнопкою пошуку

Додавання шрифтів Font Awesome

Шрифти Font Awesome є бібліотекою іконок. Дізнатися детальніше про проект ви можете на власному сайті проекту Font Awesome.

Приклад коду зверху – це один з прикладів того, як ви можете вставити іконку всередину розмітки. Однак, для того щоб іконка відображалася, вам необхідно прописати посилання на бібліотеку Font Awesome, як це показано в наступному прикладі. Вставте цей лінк всередину елемента head.

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

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

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

У прикладі коду зверху ми додаємо трохи базових стилів для сторінки. Блоки з пошуком будуть темно-синього кольору, тому фон елемента body не повинен бути абсолютно білим. В рамках даної навчальної статті ми також поставили центрування елементу з класом .box.

CSS експерименти з полем і кнопкою пошуку

Прикраса блоку з пошуком

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

#1. Зникнення фону

У першому прикладі ми приступимо до зміни фону у тега input при наведенні. Ми також додамо перехід, щоб зміна не було різким.

HTML

Ви вже бачили варіант HTML-розмітки. У всіх прикладах вона буде схожою.

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%.

CSS експерименти з полем і кнопкою пошуку

.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. Таким чином, ефект не буде зникати, коли курсор миші буде відбиватися з елемента. Що ще важливіше – ефект буде збережений при взаємодії з елементом.

CSS експерименти з полем і кнопкою пошуку

Створення переходу

Для реалізації переходу нам потрібно додати кілька рядків коду. Повернемося назад до правилу, в якому ми призначили стилі для елемента 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

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

CSS експерименти з полем і кнопкою пошуку

Додавання ефектів при наведенні

Останнє, що нам залишилося зробити, – це визначити, як буде виглядати блок з пошуком при наведенні. Перше правило в наведеному нижче уривку коду гарантує відсутність нав’язаного браузером світіння і збереження розмірів поля пошуку в момент введення запиту. Друге правило просто розтягує елемент 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;
}

Останній момент, який відбувається з блоком пошуку, – це зміна кольору іконки. Це просто невеликий штрих, щоб показати користувачеві, що блок з пошуком є активним і готовий до взаємодії, на відміну від неактивного стану. Ця зміна не пов’язана з переходом.

CSS експерименти з полем і кнопкою пошуку

#3. Збільшення розміру іконки при наведенні

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

HTML

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

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

CSS експерименти з полем і кнопкою пошуку

Додавання ефектів при наведенні

.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 і трансформації з нуля.

CSS експерименти з полем і кнопкою пошуку

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

На відміну від попередніх трьох прикладів, цей приклад буде більш складним. При наведенні, зверху буде з’являтися кнопка, що дозволяє продовжити пошук – щось на кшталт кнопок Відправити або Продовжити. Всередині кнопки буде розташована іконка у вигляді лупи.

HTML

У цьому прикладі HTML-розмітка трохи відрізняється. Елемент input, звичайно, також перебуває тут, але іконка тепер знаходиться всередині кнопки, що розташована після елемента input. Важливо, щоб кнопка розташовувалася після елемента input, оскільки від цього залежить реалізація ефекту при наведенні.

CSS експерименти з полем і кнопкою пошуку

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

CSS експерименти з полем і кнопкою пошуку

Додавання ефектів при наведенні

Для того щоб з’явилася кнопка, потрібно помістити її на елемент input. Це досягається за рахунок від’ємного значення властивості margin. До цього ми встановили значення 0 для властивості opacity, а тепер потрібно повернути його на 1, щоб кнопка була теж видимою.

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 експерименти з полем і кнопкою пошуку

Висновок

Отже, ось і підійшли до кінця наші CSS експерименти! Ми взяли стандартну форму пошуку і застосували невеликий набір ефектів, щоб змінити її поведінку. Як ще, на вашу думку, можна змінити поле пошуку? Для яких ще параметрів ви б хотіли застосувати переходи і трансформації? Розкажіть нам про це в коментарях!