Блог Vaden Pro

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

Свойство -moz-linear-gradient

Дата:30.10.15 в 18:52

Характеристики свойства

В каких браузерах работает?

- - - - 3.6+ - -

В каких версиях CSS используется?

CSS 1 CSS 2 CSS 2.1 CSS 3
- - - -

Для чего используется?

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

Как правильно задавать?

background-image: -moz-linear-gradient(угол и цвет градиента);

Какие могут быть значения?

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

Команды с позициями Значения угла Разъяснение
top 270deg Обычный градиент с переходом сверху вниз
left 0deg Переход от левой стороны к правой
bottom 90deg Переход идет от нижней части
right 180deg Переход справа на лево
top left -45deg Направление градиента идет от левой стороны контейнера верхней его части к противолежащей
top right 225deg Направление градиента идет от правой стороны контейнера верхней его части к противолежащей
bottom left 45deg Направление градиента идет от левой стороны контейнера нижней его части к противолежащей
bottom right -225deg Направление градиента идет от правой стороны контейнера нижней его части к противолежащей

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство -moz-linear-gradient</title>
  <style>
.example {
    background: #e2e2e2;
    background: -moz-linear-gradient
(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="example">Содержимое страницы</div>
 </body>
</html>

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: