Четверг, 22 августа 2013 00:00

Кроссбраузерный градиент посредством CSS

Оцените материал
(1 Голосовать)

Тема не нова; но, как обычно, неновизна темы не исключает того обстоятельства, что многие и многие вебмастера с ней - с темой -  скорее всего, незнакомы. Не правда ли?

Нет? содержание рассказа вам давно и очень хорошо, в подробностях известно? Ок, стало быть - данную статью вполне можно счесть некой шпаргалкой, предназначенной попросту для того, чтобы автору ее в будущем не пришлось разыскивать в Google адрес web-ресурса, который называется следующим образом: Ultimate CSS Gradient Generator. Что за генератор такой, для чего он может пригодиться? - ответ очень прост: для создания градиента, способного отображаться на вашем сайте не при помощи стандартной фоновой картинки, а - посредством CSS.

 

Градиентом называется плавный переход от одного цвета к другому, причём цветов может быть несколько. Посредством градиентов вебмастера создают причудливые элементы веб-дизайна, которые способны смотреться на сайте значительно более эффектно, нежели однотонные фоновые изображения.

 

Почему код нам более удобен, нежели графический файл - подробно объяснять, думаю, нет необходимости. Прежде всего - мы таким образом снижаем вес странички; строчки кода грузятся быстрее, чем картинка. Ну, а если ваш сайт способен похвастаться резиновой версткой - совершенно не факт, что вы сумеете добиться адекватного отображения фонового градиента всегда и везде, на всех устройствах.. диапазон которых в наше время весьма впечатляет, начинаясь со смартфонов - и заканчиваясь плазменными тв-панелями, подключенными к интернету. 

 

Отдельного свойства для добавления градиента не существует, по традиции градиент считается фоновым изображением, добавляемым посредством свойства background-image либо универсального свойства background. На данный момент браузеры не обладают единой поддержки градиентов, поэтому каждый из них придется указать в коде отдельно.

 

Да и... в двадцать первом веке ведь живем, господа-товарищи. Будем двигаться в ногу со временем, ок? Итак, поехали.

 

Dev banner 2

 

Процедура получения кода в Ultimate CSS Gradient Generator крайне незамысловата. Вы можете "слепить" градиент прямо здесь, используя несложный инструментарий; но если у вас уже есть готовый градиент в графическом, так сказать, исполнении - вам понадобится всего лишь импортировать этот файл в Ultimate CSS Gradient Generator, используя две кнопки: "Import from image" и "Обзор".

 Что же, давайте попробуем. Берем картинку:

Градиент - графический файл

, скармливаем Ultimate CSS Gradient Generator, и получаем код, применение которого вы видите ниже:

 

css

 

Неплохо получилось, не правда ли? Почти один в один. Обратите внимание на следующий, весьма немаловажный, момент: градиент корректно отображается во всех актуальных версиях популярных браузеров, не исключая Opera и Internet Explorer. Нет, уверяю вас, это совершенно не фокус: в первом примере мы с вами имеем дело с графическим файлом, во втором - это действительно чистый CSS... чтобы убедиться в этом - достаточно открыть исходный код странички.

Надеюсь, я вас убедил? Не забудьте, ссылка на Ultimate CSS Gradient Generator - чуть выше. 

Последнее изменениеЧетверг, 16 декабря 2021 03:02

Оставить комментарий

Добавьте ваш комментарий