Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Градиент на базе CSS: старые решения и новые возможности

Дата:15.12.15 в 12:55
Раздел: 

В статье раскрывается понятие градиента, а также рассказывается, как с помощью приемов CSS установить фоновый градиентн. В статье будет представлен старый и новый метод решения этой задачи, а также будет проведен их сравнительный анализ, с указанием слабых и сильных сторон.

градиент на базе css

В первую очередь необходимо разобраться с понятием градиента. Что же это такое?

Градиент – особый фон который состоит из двух и более цветов или оттенков, переход которых от одного к другому осуществляется плавно.

Технически градиент определяется двумя основными точками, для которых четко определяется цвет и прозрачность. Цвета промежуточных точек между ключевыми определяются математическими приемами.

Градиент делится на несколько разновидностей:

  1. Линейный – градиентный переход цветов осуществляется вдоль прямой линии.
  2. Круговой – цветовые преобразования осуществляется по кругу, от центра до дальних точек.
  3. Угловой – переход осуществляется по периметру окружности.
  4. Отраженный – является комплексом линейного градиента и зеркального отображения.
  5. Алмазный – эффект свечения драгоценного камня.

Ниже представлены примеры градиентов. Номер на рисунке соответствует номеру типа в списке выше.

Виды градиента

Как выглядит градиент на сайте?

Очень часто градиент применяется в меню или кнопках. Это придает эффект объемности и формирует особый стиль, который можно увидеть на примере ниже

Градиентное меню

А вот на этой картинке видно, каким образом применяют градиент в блоках. В данном случае это футер

Градиентный футер

Вполне логично, что применение картинки градиента в таком случае является не рациональным решением, так как такая картинка будет очень большой и будет занимать много памяти. В следствие этого загрузка страницы будет производится с задержкой. Это нас не устраивает.

Отцовский метод: градиент на CSS + картинка

В те времена, когда верстальщики могли положиться только на CSS2, градиент устанавливался по следующему принципу

  1. Создается картинка шириной в 1 пиксель (или высотой – это зависит от направления градиента), которая представляет из себя образец требуемого градиента.
  2. Размножаем картинку по требуемой оси.

Ниже показано, как это прописывается в файле CSS:

CSS

.grad{
	background: url(image.png) repeat-x #ffef9c;
}

В этой записи цвет фона, записанного в background, должен совпадать с цветом последнего пикселя картинки. Был рассмотрен вариант, когда градиент позиционируется вверху. Теперь рассмотрим, как его позиционировать внизу:

CSS

.grad{
	background: url(image.png) left bottom repeat-x #ff6d6d;
}

В этом случае самый верхний пиксель картинки должен совпадать с цветом заднего фона. Результат записанного кода представлен на картинке

Градиент на css2

Также стоит отметить, что если градиент направлен не вдоль вертикальной оси, а горизонтальной, то repeat-x нужно заменить на repeat-y.

Кроме того, хотелось бы отметить положительные стороны этого метода:

  • легкость использования и минимальная запись в коде в виде одной команды;
  • высокий показатель кроссбраузерности.

Не стоит забывать, что не существует идеальных решений, у каждого есть свои недостатки:

  • фоновая картинка, которая представляет дополнительную нагрузку на сервер, не смотря на то, что ее размер максимально минимизирован;
  • в дополнение к первому недостатку, до загрузки фонового изображения пользователь будет видеть блок со сплошной окраской;
  • таким способом можно реализовать только линейный градиент, для других разновидностей нужно будет создавать большие картинки на весь фон, так как для них нельзя будет применить цикличность (repeat);

Напоследок необходимо отметить еще одну особенность метода. При изменении высоты блока картинка не будет масштабировать, поэтому верх или низ блока будет залит сплошным цветом.

Продвинутый метод: градиент только на CSS

С выходом новой спецификации CSS3 появились новые функции, посредством которых можно устанавливать градиентный фон блока. Первая функция - linear-gradient();, которая формирует линейный градиент, и вторая - radial-gradient();, которая отвечает за радиальный градиент. Этот тандем позволит создавать любой существующий вид градиента. Также стоит отметить широкий спектр возможностей функций, в который входит возможность установки многоцветного градиента, а также устанавливать свое местоположение через background-position. Ниже в таблицах представлен полный потенциал возможностей этих функций

Перечень параметров функции linear-gradient()

Параметр Краткое пояснение Пример использования
bg-position Определяет местоположение начала градиента. Изначально градиент фиксируется в верхнем левом углу контейнера .grad{ linear-gradient(right top, #ffef9c, #ff6d6d); }
angle Определяет угол распространения градиента. Если значение этого параметра не выставлено, то угол составляет 0deg. .grad{ linear-gradient(right top, 50deg, #ffef9c, #ff6d6d); }
color-stop Устанавливает цвет основных точек, между которыми производится цветовой переход. Обязательный параметр для указания. Допускается применить 2 значения и более. .grad{ linear-gradient(right top, 50deg, #ffef9c, #ff6d6d); }

Перечень параметров функции radial-gradient()

Параметр Краткое пояснение Пример использования
bg-position Устанавливает центр градиента относительно периметра блока. Изначально системой выбирается положение center center. .grad{ linear-gradient(right top, #ffef9c, #ff6d6d); }
angle Определяет угол распространения градиента. Если значение этого параметра не выставлено, то угол составляет 0deg. .grad{ linear-gradient(right top, 50deg, #ffef9c, #ff6d6d); }
shape Определяет форму распространения градиента. Доступны два возможных варианта - круглая (по умолчанию) и эллиптическая. .grad{ linear-gradient(circle, #ffef9c, #ff6d6d); }
size Определяет местоположение начала градиента. не считая пиксельных значений, допускается использовать такие команды: closest-side (contain) - ближайшая граница контейнера, closest-corner - ближайший угол контейнера, farthest-side - дальнейшая граница контейнера, farthest-corner(cover) - дальнейший угол. .grad{ linear-gradient(right top, 50deg, closest-corner, #ffef9c, #ff6d6d); }
color-stop Устанавливает цвет основных точек, между которыми производится цветовой переход. Обязательный параметр для указания. Допускается применить 2 значения и более. .grad{ linear-gradient( center center, 50deg, #ffef9c, #ff6d6d); }

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

Поддержка браузерами

Mozzila Firefox

С 2010 года разработчики «огненной лисички» выпустили новую версию браузера Firefox 3.6., которая освоила применение вендорных свойств -moz-linear-gradient() и -moz-radial-gradient(). Эти свойства позволили производить линейные и радиальные градиенты соответственно.

Эти функции по своему назначению и функционалу полностью соответствуют оригиналу. Ниже представлена правильная запись свойства для таблицы стилей:

CSS

.grad{  
	background: -moz-linear-gradient(top, #ffef9c, #ff6d6d);
}
.grad{  
	background: -moz-repeating-linear-gradient(top left -45deg,
 #ffef9c, #ffef9c 5px, #ff6d6d 5px, #ff6d6d 10px);
}
.grad{
	background-image: -moz-radial-gradient(bottom left, 35deg,
 ellipse closest-side, #ffef9c 0%, #ff6d6d 100%);
}

Важно помнить, что указанный код корректно отработает только в версиях, которые вышли не раньше, чем Firefox 3.6.

Chrome и Safari

Браузеры на движке webkit тоже выпустили свои вендоры для оптимизации работы своих продуктов с градиентами. Таким образом, Safari может работать с градиентами после выхода версии 4.0, а Chrome – с версии 2.0. смотрим пример кода ниже:

CSS

.grad{  
	background: -webkit-gradient(linear, left top,
 left bottom, from(rgb(0,102,255)), to(rgb(131,202,84)))
}

Интересен тот факт, что последние версии Chrome легко распознают свойства, написанные по синтаксису Firefox:

CSS

.grad{  
	background: -moz-linear-gradient(top, #ffef9c, #ff6d6d);
}
.grad{  
	background: -moz-repeating-linear-gradient(top left -45deg,
 #ffef9c, #ffef9c 5px, #ff6d6d 5px, #ff6d6d 10px);
}
.grad{
	background-image: -moz-radial-gradient(bottom left,
 35deg, ellipse closest-side, #ffef9c 0%, #ff6d6d 100%);
}

Вторая характерная особенность браузеров webkit заключается в возможности установки радиального повторяющегося градиента. Чтобы понять, как это сделать – просто опустите глаза ниже:

CSS

.grad{
	background-image: -webkit-radial-gradient(center 45deg,
 circle closest-side, orange, red 10%, orange 30%);
}

Internet Explorer

Наш самый переборчивый ветеран среди браузеров - Internet Explorer работает с градиентами только через посредничество специальных фильтров. Эти фильтры стали доступны для IE после версии 5.5. «Какой фильтр?» – спросите вы. «А вот такой», - отвечу я, указывая на строку, пониже этой

CSS

.grad{ 
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,
 startColorstr=# ffef9c, endColorstr=# ff6d6d);
}

Эта запись соответствует только линейному не повторяющемуся градиенту. Направление перехода цветов определяются следующими командами:

  • GradientType=1 – вдоль горизонтальной оси.
  • GradientType=0 – вдоль вертикальной оси.

С выходом в свет версии 8.0 IE стал поддерживать еще одну запись градиентного фона:

CSS

.grad{
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient
 (GradientType=0, startColorstr=#ffef9c, endColorstr=#ff6d6d)";
}

Однако первоначальная форма записи новыми версиями тоже отлично распознается.

Также не стоит забывать про плагин PIE. Он оптимизирует работу самых проблемных версий IE – от 6.0 до 8.0.

CSS

.grad {
	background: -moz-linear-gradient(top, #ffef9c, #ff6d6d);
	background: -webkit-gradient(linear,
 left top, left bottom, from(#ffef9c), to(#ff6d6d)) #ffef9c;
	-pie-background: linear-gradient(top, #ffef9c, #ff6d6d);
	behavior: url(css/PIE.htc);
}

Opera

Этот браузер дольше всего сопротивлялся применению градиента в своей среде. Однако с выходом версии 11.1 поддался влиянию большинства своих коллег. С этого момента браузер может работать с вендорными свойствами -o-linear-gradient и -o-repeating-linear-gradient для применения в background:

CSS

.grad{  
	background: -o-linear-gradient(top, #ffef9c, #ff6d6d);
}
.grad{  
	background: -o-repeating-linear-gradient(top left
 -45deg, red, red 5px, white 5px, white 10px);
}

Преимущества и недостатки применения нового метода

В качестве сильных сторон новых функций спецификаций CSS3 отметим следующее:

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

Единственный недостаток этого свойства – кроссбраузерность. Именно из-за низкого показателя этого параметра одна строчка кода превращается, как минимум, в 4, чтобы каждому браузеру разъяснить, как работать с градиентом и как его корректно вывести на странице.

Исключительным и принципиальным отличием продвинутого способа от отцовского метода заключается в резиновых свойствах первого. Другими словами, если блок будет растягиваться по высоте, то градиент автоматически растянется вместе с ним. Для случая использования картинки – это непозволительная роскошь.

Выводы

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

Именно из-за наличия этих проблем первый способ еще держится на плаву.

Оценок: 2 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)