Эффект градиента для фона (Cross-Browser)

    Давно обещал рассказать о кроссбраузерном эффекте градиента для фона HTML-объектов. Ранее я писал о таком трюке, который позволяет делать градиент-заливку для отдельных объектов верстки страниц сайта, однако этот способ работал только в обозревателях MSIE. Ниже вы видите контент-блоки с градиентом в качестве фона. При этом не используется никаких изображений.

Это параграф, содержащий в себе элемент «em»

• Это неупорядоченный список.
• Это неупорядоченный список.
• Это неупорядоченный список.
• Это неупорядоченный список.

А это h5 элемент.

Так как же это работает?

    Весь трюк заключается в маленьком java-скрипте. Суть его работы состоит в том, что при загрузке страницы происходит поиск в ее структуре класса элементов со словом «gradient» в самом начале строки имени этого класса. Класс «gradient» служит в этом случае определенным идентификатором. После этого происходит считывание дополнительных классов 2-го, 3-го и 4-го порядков, которые уже отвечают за присвоение начального и конечного цветов градиента, а также способ заливки (горизонтальный или вертикальный). Таким образом, наш HTML-объект должен иметь следующий вид:    Синим выделены цвета-границы градиента, их нужно менять на свой вкус. Зеленым выделен способ заливки (может быть vertical или horizontal) В данном случае заливка будет переходить из белого в черный цвет по вертикали. В результате получаем следующее:

ПРИВЕТ МИР!

Установка

    1. Скачиваем скрипт по ссылке, приведенной ниже.    2. Загружаем и устанавливаем его на сайт: для этого в голову сайта дописываем:    3. Присваиваем нужным элементам классы, как это показано в примере выше.

*Имя:

*Email:

Сайт

*Сообщение: