Від автора: здрастуйте, шановні читачі блогу webformyself. Сьогодні я хотів би з вами поділитися, як можна робити з допомогою css3 кнопки для самих різних призначень.
Можливості css3 для створення кнопок
Відразу скажу, що нова технологія дає просто величезні можливості по стилізації кнопок. З її допомогою можна створювати дивовижно красиві елементи. Давайте розглянемо детальніше деякі можливості.
Лінійні і радіальні градієнти. Отже, це дуже цікаве оновлення css3. Тепер при завданні фону можна записувати не просто суцільний колір, а й градієнт, тобто мікс з квітів. Недолік цього властивості тільки в тому, що воно не підтримується в старих браузерах, а також самостійно не так вже й просто придумати і прописати градієнт.
Але зате розумні люди придумали таку чудову річ, як генератор градієнта, де ви можете у візуальному режимі все налаштувати (в тому числі і створити свої градієнти), а потім просто скопіювати код і радіти життю.
Власне, давайте застосуємо в якості тлі кнопки радіальний градієнт, а також кілька інших цікавих властивостей.
Тип button створює просто порожню кнопку, яка сама по собі нічого не робить – їй треба ставити якусь дію через скрипти. Давайте її оформимо:
#button1{
background: radial-gradient(ellipse at center, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%);
box-shadow: 0 0 5px 0 blue;
border: none;
padding: 30px;
color: #333;
border-radius: 30px;
font-size: 20px;
}
Стилів записали багато, давайте розбиратися. По-перше, тут ми бачимо той самий радіальний градієнт. Код я згенерував ось в цьому генераторі. Додаємо також неболое розмиття тіні, прибираємо стандартну рамку, яка ставиться кнопки за замовчуванням, задаємо відступи, колір тексту, скруглення кутів і розмір шрифту.
Загалом-то, все це стандартні властивості. Border-radius, box-shadow і радіальний градієнт є частиною специфікації CSS3. По суті, ці елементи і формують зовнішній вигляд кнопки, без них вона виглядала б далеко не так ефектно.
Давайте всього лише трохи змінимо тінь:
box-shadow: 0 10px 5px 0 blue;
Тепер вона набула тривимірність.
Є дві проблеми, які виникають з такого виду кнопками. По-перше, при наведенні на них курсора не змінюється, а мав би, щоб користувач чітко бачив, що вони клікабельні. По-друге, при натисканні з’являється синя квадратна рамка. Ці дві проблеми легко прибрати додаванням наступних властивостей:
cursor: pointer;
Це вставити у звичайні стилі кнопки.
#button1:focus{
outline: none;
}
А тут псевдоклас :focus застосує стиль тільки тоді, коли елемент отримує фокус, тобто за нею клацають. Все, тепер ніяких проблем немає.
Кнопка з лінійні градієнтом і трансформації
Тепер давайте зробимо другу з трохи іншим відтінком. Всі стилі для неї я застосував такі ж, змінився тільки фон і тінь:
background: linear-gradient(to right, rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%);
box-shadow: 5px 2px 0 0 grey;
Щоб не захаращувати код, я знехтував в цьому випадку кросбраузерністю. Справа в тому, що генератор створює кілька варіантів коду, які дозволяють реалізувати підтримку або хоча б нормальне відображення в старих браузерах. Той код градієнтів, що я вставляв в обох випадках, спрацює тільки у відносно нових веб-браузерах.
Генератор також підкаже вам, з яких версій буде працювати той чи інший код. До речі,з точки зору стандартів W3C ми записали градієнт абсолютно правильно.
Для старих старих браузерів є сенс прописати щось в цьому дусі.
background: rgb(179,220,237);
Ніякого градієнта, зрозуміло, не буде, зате це близьке до нього відтінок, і кнопочка залишиться в старих браузерах кольоровий, хай і не такої гарної.
З допомогою трансформацій можна виконати додаткові маніпуляції з кнопкою. Наприклад, збільшити, повернути або скривить її.
transform: skew(-20deg) rotate(-10deg)
Такий код скривит елемент на 20 градусів проти годинникової стрілки і на 10 поверне. Збільшенням зазвичай користуються при наведенні на кнопку, при цьому, щоб не відбувалася трансформація різко, додають плавні переходи.
#button2{
transition: 1s;
}
#button2:hover{
transform: scale(1.5);
}
Знову ж таки, попереджаю вас, що для кросбраузерності практично до всіх властивостей css3 потрібно додавати вендорные префікси типу –moz, -webkit та інших.
А що, якщо вам потрібно нахилити не саму кнопку, а тільки текст в ній? Що ж, для цієї мети укладіть потрібні слова тег span, дайте йому який-небудь стильової клас і запишіть поворот через стилі саме для нього. Таким чином, ви досягнете потрібного ефекту. Те ж саме стосується і збільшення, переміщення і всього іншого.
Підсумок
Як ви розумієте, основна зброя при створенні красивих кнопок – це градієнти, тіні, трансформації і закруглення кутів. У поєднанні і при вмілому використанні цих властивостей можна створювати сотні кнопок під самі різні дизайни.
Якщо ви хочете навчитися вміло користуватися цими новими властивостями, то вам пряма дорога до нашого преміум-курсу з CSS3. Там ви ще краще зможете розібратися з градієнтами, навчитися додавати тінь, робити кнопки напівпрозорими і застосовувати до них різні ефекти при наведенні курсору. На цьому я прощаюся з вами і бажаю якнайшвидше застосувати все це на практиці.
