До сих пір завдання відображення градиентного фону більшість програмістів вирішують шляхом «підсовування» картинки на фон і її повторенням по вертикалі або по горизонталі, в залежності від необхідного ефекту.
Незважаючи на те, що можливість отримання градієнтного зображення фону засобами CSS з'явилася досить давно, користуються цією можливістю поки не дуже охоче. Насправді, мало кому хочеться, особливо на комерційних проектах, придумувати собі зайві проблеми на голову з крос-браузерної версткою. Тим більше, що до недавнього часу, наприклад Opera не підтримувала CSS-ний градієнт.
У цій статті розглянемо приклад коду CSS, що дозволяє відобразити вертикальний двоколірний градієнт. До речі, Opera з версії 11.10 тепер теж підтримує градієнтну заливку фону засобами CSS.
Наведений нижче код працює в найбільш поширених браузерах: IE, FireFox, Opera, Chrome, Safari.
Додаємо код в нашу таблицю стилів:
Тепер розберемо що тут до чого:
З першим рядком все зрозуміло. Це для оглядачів, які не підтримують функції градієнтної заливки.
Оглядачі Chrome і Safari працюють на платформі Webkit. Градієнт для них описується конструкцією -webkit-gradient (тип градієнта, точка початку, точка завершення, початковий колір, кінцевий колір).
У Firefox все просто, як «три рубля». Параметри лінійного градієнта описуються конструкцією: -moz-linear-gradient (точка початку, початковий колір, кінцевий колір).
З Opera історія така ж, як і з Firefox, конструкція відрізняється однією літерою: -o-linear-gradient (точка початку, початковий колір, кінцевий колір).
Microsoft як завжди відзначився зі своїм IE! Тут параметри градієнтної заливки задаються через фільтр. Та й згадка gradientType більше на знущання походить, оскільки крім gradientType = 0 більше ніякі не працюють. Принаймні так було на момент написання цього запису:
Даний код повинен нормально відображати вертикальний градієнт у всіх сучасних браузерах.