Від автора: У цій статті ви дізнаєтеся про те, як створюються напівпрозорі кнопки для користувацького інтерфейсу, які дуже добре виглядають на тлі фотографій.
Чому напівпрозорі кнопки?
Використання фотографій в якості фону є зараз «гарячих» трендом у веб-дизайні. Разом з цим у веб-дизайні стало модно використовувати «кнопки-привиди», які виглядають ось так:
Оскільки у даних кнопок повністю прозорий фон, вони не відволікають увагу від фону з фотографією, на відміну від традиційних веб-кнопок, які мають суцільний фон.
Проблема «кнопок-примар» полягає в тому, що вони занадто непомітні порівняно з фоном, для якого використовуються фотографії. Тому відвідувачі сайту можуть не надати їм потрібного значення з-за невеликий візуальної «вагомості».
А також «кнопки-примари» можуть бути прийняті просто за виділений текст. Іншими словами, вони не завжди можуть здатися «клікабельними» для користувачів. Це основні проблеми з їх використанням в плані юзабіліті.
З іншого боку, «кнопка-привид» класно виглядає на тлі фотографій завдяки своїй прозорості. Як же нам зберегти цю перевагу «кнопки-примари» і одночасно показати її призначення (аффорданс)?
Я виявив гарне рішення на головній сторінці сайту Tumblr. На сайті Tumblr використовується напівпрозора кнопка для авторизації поверх фону з зображенням:
Це відмінний компроміс між «кнопкою-привидом» і традиційної кнопкою з суцільним фоном. Завдяки напівпрозорому фону деякі фотографії просвічують крізь подібні кнопки, створюючи привабливий ефект, схожий на ефект від використання кнопок-привидів».
Класична форма кнопки візуально сигналізує про те, що напівпрозора кнопка є клікабельним. Напівпрозорі кнопки дуже легко створюються. Все, що нам потрібно, – це трохи HTML і CSS.
HTML
В розмітці нам буде потрібно тільки один HTML елемент. В даному випадку використовується елемент .
Button
В якості заміни ви можете використовувати елементи button або input.
CSS
CSS властивість, що відповідає за напівпрозорий візуальний ефект, є властивість background. Властивості background присвоєно значення в RGBA, щоб можна було контролювати прозорість. Колір фону білий і на 50% прозорий.
.semi-transparent-button {
display: block;
box-sizing: border-box;
margin: 0 auto;
padding: 8px;
width: 80%;
max-width: 200px;
background: #fff; /* запасний колір для старих браузерів */
background: rgba(255, 255, 255, 0.5);
border-radius: 8px;
color: #fff;
text-align: center;
text-decoration: none;
letter-spacing: 1px;
transition: all 0.3 s ease-out;
}
Також:
Округлені кути зроблені за допомогою властивості border-radius
Властивість text-align використовується для вирівнювання назви кнопки по центру (що є типовим для кнопок)
Властивість max-width встановлено в значенні 200px, щоб кнопка не ставала занадто широкою на дуже великих екранах.
Простий анімаційний ефект, що виникає при взаємодії користувача з кнопкою, створений за допомогою властивості transition
Додатково, в якості запасного варіанту використовується суцільний колір тла, записаний у вигляді шістнадцяткового значення (hex) для браузерів, які не розуміють rgba() (наприклад, Internet Explorer 8 і нижче).
Щоб поліпшити аффорданс кнопки, нам потрібно задати певні стилі псевдо-класів :hover, :focus :active. Коли користувач буде наводити на кнопку або клікати по ній, ми будемо використовувати перехід від напівпрозорого фону до суцільного, щоб продемонструвати, що з кнопкою миші можна взаємодіяти.
.semi-transparent-button:hover,
.semi-transparent-button:focus,
.semi-transparent-button:active {
background: #fff;
color: #000;
transition: all 0.5 s ease-in;
}
Однією з технік з посилення візуальної «вагомості» напівпрозорої кнопки є використання більш «живого» фонового кольору. Чисто білий колір є нейтральним, тому в нашому демо-прикладі ви побачите також синю кнопку в якості альтернативи. Код для синьої напівпрозорої кнопки буде таким:
background: rgba(30, 52, 142, 0.5);
Іншою технікою збільшення видимості напівпрозорої кнопки є використання суцільний рамки. Це може бути реалізовано шляхом простого додавання кнопки властивості border.
border: 1px solid #fff;
Ось і все, що я хотів вам розповісти. Я сподіваюся, що ця повчальна стаття виявилася для вас якоюсь мірою корисною.
