| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Кросбраузерно додати градієнт для кнопки з допомогою зображення.
Рішення
Спочатку готуємо градієнта зображення в графічному редакторі. Ширину картинці достатньо задати 30 пікселів, а висоту — 20-40 пікселів. На рис. 1 показаний приклад градієнта для додавання до кнопки.
Рис. 1. Градієнт
Додавання картинки на кнопці відбувається за допомогою властивості background, його значенням виступає шлях до графічного файлу. Оскільки ширина кнопки залежить від довжини тексту, тобто може змінюватися, слід додати значення repeat-x, яке повторює фон по горизонталі (приклад 1).
Приклад 1. Додавання градієнта до кнопки
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Градієнт</title>
<style>
.gradient {
background: #00b8e4 url(images/bg-button.png) repeat-x; /* Колір фону і шлях до файлу з градієнтом */
font-size: 9pt; /* Розмір шрифту у пунктах */
height: 30px; /* Висота кнопки */
}
</style>
</head>
<body>
<form action="handler.php">
<p><input type="button" value="Звичайна кнопка">
<input type="button" class="gradient" value="Кнопка з градієнтом"></p>
</form>
</body>
</html>
Результат цього прикладу показано на рис. 2. У стилі вводиться свій клас з ім'ям gradient, він додається до бажаного тега <input>.
Рис. 2. Вигляд звичайної кнопки та кнопки з градієнтом
Застосування властивості background скасовує особливості браузерів і робить кнопку прямокутної.