CSS3 Градієнт для кнопок

28

Зовсім недавно я розповідав про те, як домогтися правильного відображення градієнта CSS в сучасний браузерах.
Можна порахувати криками в порожнечу все моє оповідання, якщо не розповісти про практичне застосування градієнт функції CSS. Відмінним і простим прикладом може послужити створення кнопок для веб-сайту, виключно засобами CSS, не використовуючи жодних додаткових зображень і javascript.
Розмір кнопок легко регулюється шляхом зміни внутрішнього відступу pading: і розміру шрифту font-size.

Градиент кнопок с CSS3

Відмінною стороною цього методу є можливість його застосування до будь-якого елементу HTML, таких як div, u, p, a, button, input, і т. д.
Градієнт з допомогою CSS3 є «крос-браузерым» і підтримується більшістю сучасних браузерів (IE, Firefox 3.6, Chrome і Safari). Ще зовсім не давно в Opera, кнопки відображалися з фоном суцільної заливки без градієнта, виглядали наші кнопки зовсім не погано, але все ж це було серйозним недоліком у роботі такого популярного браузера. І ось, нарешті до розробників Opera зійшло прозріння і в черговий версії свого дітища, в новій Opera 11, суворі норвезькі хлопці додали нові функції, в тому числі і підтримку градієнта: background-image: -o-linear-gradient

Дивитися Демо

Переваги методу

  • Чистий CSS: не використовуються зображення або Javascript.
  • Крос-браузерность, підтримується основними браузерами (IE, Firefox 3.6, Safari, Chrome і Safari).
  • Розмір кнопки і закруглені кути можна регулювати, змінюючи розмір шрифту та відступи.
  • Три стану кнопки: нормальний, режим наведення і активний.
  • Застосовується до будь-якого елементу HTML : a input, button, span, div, p, h3, і т. д.
  • Запасний варіант для браузерів не підтримують функцію градієнта CSS, тупо виводиться кнопка без градієнта і тіні.

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

Отображение градиента в браузерах

Кожна кнопка просто зобов’язана додавати «движухи» сайту, наші кнопки таку «движуху» мають, тобто у кнопок три стандартних режиму або статусу, це кому як зручніше:

  • Нормальний стан — градієнт фону, межі і тіні.
  • При наведенні — темний градієнт.
  • Активний режим — зміна напрямку градієнта, 1px вниз, темний колір шрифту.

Статус кнопок

CSS3 стилі для кнопок

Тихим сапом ми підібралися до основи оформлення наших кнопок. Наступний стиль буде спільним для всіх кнопок .button class. Щоб зробити масштабовану базу(тіло), ми використовуємо властивість для внутрішнього відступу padding і визначаємо скруглення кутів border-radius. Це дає нам можливість налаштувати округлені кути і розмір кнопки, просто змінивши межі радіусу, розмір шрифту та відступи.
Наприклад: я можу зробити менше кнопку за рахунок зменшення розміру шрифту і значення оступа (Див. демо).
І так, загальний код для стилів кнопок буде таким:

.button {
display: inline-block;
zoom: 1; /* масштабування *display = ie7 хак для відображення display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% 'Roboto', sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active { //* зміщення на 1px вниз *//
position: relative;
top: 1px;
}

.button {
display: inline-block;
zoom: 1; /* масштабування *display = ie7 хак для відображення display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 2px 0;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% ‘Roboto’, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active { //* зміщення на 1px вниз *//
position: relative;
top: 1px;
}

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

Кольори градієнта CSS

У наведеному нижче прикладі показано код стилю CSS для помаранчевого кольору нашої кнопки. Першим пунктом прописано значення для браузерів, які не підтримують CSS3, так сказати запасний варіант. Далі по накатаній, друга лінія для браузерів Webkit, третя лінія для Firefox, окремий параметр для нової версії Opera 11, а в останньому рядку градієнта фільтр, який обробляє тільки Internet Explorer.
Докладно і в тему, якщо хто забув, розписано у статті Градієнт CSS в сучасних браузерах.
Код прописав деякі пояснення, для кращого сприйняття:

        .orange {
color: #fef4e9;
 border: solid 1px #da7c0c;
 background: #f78d1d; /*колір фону кнопки для браузерів без підтримки CSS3*/
 background: -webkit-gradient(linear, left, top, left bottom, from(#faa51a), to(#f47a20)); /* для Webkit браузерів */
 background: -moz-linear-gradient(top, #faa51a, #f47a20); /* для Firefox */
 background-image: -o-linear-gradient(top, #faa51a, #f47a20); /* для Opera 11 */
 filter: програми:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); /* фільтр для IE */
}
.orange:hover {
background: #f47c20;
 background: -webkit-gradient(linear, left, top, left bottom, from(#f88e11), to(#f06015));
 background: -moz-linear-gradient(top, #f88e11, #f06015);
 background-image: -o-linear-gradient(top, #f88e11, #f06015);/* для Opera 11 */
 filter: програми:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
 background: -webkit-gradient(linear, left, top, left bottom, from(#f47a20), to(#faa51a));
 background: -moz-linear-gradient(top, #f47a20, #faa51a);
 background-image: -o-linear-gradient(top, #f47a20, #faa51a);/* для Opera 11 */
 filter: програми:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d; /*колір фону кнопки для браузерів без підтримки CSS3*/
background: -webkit-gradient(linear, left, top, left bottom, from(#faa51a), to(#f47a20)); /* для Webkit браузерів */
background: -moz-linear-gradient(top, #faa51a, #f47a20); /* для Firefox */
background-image: -o-linear-gradient(top, #faa51a, #f47a20); /* для Opera 11 */
filter: програми:DXImageTransform.Microsoft.gradient(startColorstr=’#faa51a’, endColorstr=’#f47a20′); /* фільтр для IE */
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left, top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
background-image: -o-linear-gradient(top, #f88e11, #f06015);/* для Opera 11 */
filter: програми:DXImageTransform.Microsoft.gradient(startColorstr=’#f88e11′, endColorstr=’#f06015′);
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left, top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
background-image: -o-linear-gradient(top, #f47a20, #faa51a);/* для Opera 11 */
filter: програми:DXImageTransform.Microsoft.gradient(startColorstr=’#f47a20′, endColorstr=’#faa51a’);
}

Сподіваюся, що все стало ясно і зрозуміло з приводу створення кнопок, але для тих, хто все ж не в’їхав, покажу як використовувати стиль для створення і подальшого виведення на сторінці HTML.

Як застосовувати кнопки?

Припустимо, ви нестримно захотіли синю кнопку, для використання на своїй сторінці:

  • По-перше потрібно скопіювати код загального стилю .button і стилі для різних станів кнопки селектори: .button:hover, і .button:active, потім, для синьої кнопы .blue копіюєте всі правила і властивості css, переглянути вихідний код style.css і знайти потрібний клас.
  • Потім прописуєте class=”button blue” до елементу HTML, там де ви хочете, наприклад . CSS класи можуть бути застосовані до будь-якого елементу, таким як a , p, u, div, input, button і т. д.

Применение кнопки

Дивитися ДемоСкачать Исходники

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

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: