Использование CSS3 градиентов для различных браузеров

Использование CSS3 градиентов для различных браузеров

Однако из-за определенных ограничений в реализации CSS3, многие (более старые) браузеры не могут создавать CSS3 градиенты, и многим дизайнерам все равно приходится прибегать к использованию изображений ради создания дизайна. Но, так как браузеры становятся все более сговорчивыми стандартам W3C, мы можем использовать некие творческие методы для некоторых из наших проектов.

Здесь я покажу вам различные способы (с использованием современных браузеров) создания градиентов на лету без использования изображений. Однако, существуют небольшие различия между синтаксисом различных браузеров.

FIREFOX 3.6+

Code

SAFARI 5.1+/CHROME 10+

Code

IE 10+

Code

OPERA 11.10+

Code

Вот разбивка, как работает синтаксис:

Как видите, синтаксис для большинства современных браузеров очень похож. Тем не менее, для старых браузеров, не поддерживающих градиенты, вы всегда должны иметь запасной вариант. Лучший способ (конечно же) заключается в объявлении URL фонового изображения, а также цвета фона, на тот случай, если изображение окажется меньше, чем размер блока.

Более универсальная и сокращенная версия

Code

.background {
  background-color: #5596c0; /* для старых браузеров */
  background-image: url('images/my_gradient_bg.jpg'); /* задание градиента фоновым изображением */
  background-image: -moz-linear-gradient(top, #095586, #9dd3f7);
  background-image: -webkit-linear-gradient(top, #095586, #9dd3f7);
  background-image: -ms-linear-gradient(top, #095586, #9dd3f7);
  background-image: -o-linear-gradient(top, #095586, #9dd3f7);
}

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

Линейные и радиальные градиенты

Существуют и другие варианты использования CSS3 градиентов. Есть линейные градиенты и радиальные. Они позволяют задавать для использования более двух цветов. Ниже приведен пример использования трех цветов.

Линейный градиент

Code

Вы также можете добавить больше интервалов. Пример ниже показывает цвета через равные интервалы:

Code

Радиальные градиенты

Радиальные градиенты немного сложнее. Есть много различных свойств, которые можно выбрать в пределах синтаксиса. Давайте посмотрим на код ниже для блока 200 × 200 пикселей.

Code

background-image: -moz-radial-gradient(75px 50px, circle closest-side, blue 0%, yellow 100%);

Давайте разберем это:

Вот описание радиальных значений распространения:

closest-side (ближайшая сторона) - Форма градиента соответствует стороне блока ближе к ее центру (для круга) или отражается как вертикальные и горизонтальные стороны ближе всего к центру (для эллипсов).

closest-corner (ближайший угол) - Форма градиента рассчитана так, что точно соответствует ближайшему углу блока от его центра.

farthest-side (дальняя сторона) - Форма градиента рассчитана так, что точно соответствует ближайшему углу блока от его центра.

farthest-corner (дальний угол) - Форма градиента рассчитана так, что точно соответствует ближайшему углу блока от его центра.

Заключение

Как видите, использование CSS3 градиентов - это отличный способ помочь ускорить время загрузки без дополнительных HTTP - запросов для фоновых изображений, а также гораздо более эффективный и простой способ создания градиентов без создания и использования изображений. Поскольку все больше и больше браузеров становятся стандартизированными и совместимыми, вы увидите больше применений CSS3 градиентов на веб-сайтах в ближайшие годы.

Источник
Перевод и описание: PS-Studio.Info

Ссылка:

BB-код:

HTML-код:

Ещё по теме:

Всего комментариев: 0

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

Метки

Опрос: Чего добавлять больше?

Результаты опроса

Главная » 2012 » Февраль » 2 » Использование CSS3 градиентов для различных браузеров

Использование CSS3 градиентов для различных браузеров