Нет? содержание рассказа вам давно и очень хорошо, в подробностях известно? Ок, стало быть - данную статью вполне можно счесть некой шпаргалкой, предназначенной попросту для того, чтобы автору ее в будущем не пришлось разыскивать в Google адрес web-ресурса, который называется следующим образом: Ultimate CSS Gradient Generator. Что за генератор такой, для чего он может пригодиться? - ответ очень прост: для создания градиента, способного отображаться на вашем сайте не при помощи стандартной фоновой картинки, а - посредством CSS.
Градиентом называется плавный переход от одного цвета к другому, причём цветов может быть несколько. Посредством градиентов вебмастера создают причудливые элементы веб-дизайна, которые способны смотреться на сайте значительно более эффектно, нежели однотонные фоновые изображения.
Почему код нам более удобен, нежели графический файл - подробно объяснять, думаю, нет необходимости. Прежде всего - мы таким образом снижаем вес странички; строчки кода грузятся быстрее, чем картинка. Ну, а если ваш сайт способен похвастаться резиновой версткой - совершенно не факт, что вы сумеете добиться адекватного отображения фонового градиента всегда и везде, на всех устройствах.. диапазон которых в наше время весьма впечатляет, начинаясь со смартфонов - и заканчиваясь плазменными тв-панелями, подключенными к интернету.
Отдельного свойства для добавления градиента не существует, по традиции градиент считается фоновым изображением, добавляемым посредством свойства background-image либо универсального свойства background. На данный момент браузеры не обладают единой поддержки градиентов, поэтому каждый из них придется указать в коде отдельно.
Да и... в двадцать первом веке ведь живем, господа-товарищи. Будем двигаться в ногу со временем, ок? Итак, поехали.
Процедура получения кода в Ultimate CSS Gradient Generator крайне незамысловата. Вы можете "слепить" градиент прямо здесь, используя несложный инструментарий; но если у вас уже есть готовый градиент в графическом, так сказать, исполнении - вам понадобится всего лишь импортировать этот файл в Ultimate CSS Gradient Generator, используя две кнопки: "Import from image" и "Обзор".
Что же, давайте попробуем. Берем картинку:
, скармливаем Ultimate CSS Gradient Generator, и получаем код, применение которого вы видите ниже:
Неплохо получилось, не правда ли? Почти один в один. Обратите внимание на следующий, весьма немаловажный, момент: градиент корректно отображается во всех актуальных версиях популярных браузеров, не исключая Opera и Internet Explorer. Нет, уверяю вас, это совершенно не фокус: в первом примере мы с вами имеем дело с графическим файлом, во втором - это действительно чистый CSS... чтобы убедиться в этом - достаточно открыть исходный код странички.
Надеюсь, я вас убедил? Не забудьте, ссылка на Ultimate CSS Gradient Generator - чуть выше.
