CSS приклад: -moz-linear-gradient

Градієнт CSS: Опис, Синтаксис та Приклади

Створення лінійного градієнту у браузері Firefox. Градієнт - це плавний перехід від одного кольору до іншого, який може йти під певним кутом до елементу та містити більше двох кольорів.

Синтаксис

background-image: -moz-linear-gradient([<угол> | <позиція> ,] <колір> [, <колір>]*);

Значення

<угол>
Див. кут.
<колір>
Представляє собою значення кольору (див. колір), за яким йде необов'язкова позиція кольору відносно вісі градієнту, яка задається у відсотках від 0% до 100% або в будь-яких інших підходящих для CSS одиницях.
<позиція>
Для запису позиції використовуються ключові слова top, bottom, left, right, а також їх поєднання. Порядок слів не має значення, можна написати left top або top left.

Типи градієнту

Позиція Кут Опис
зверху вниз 270deg Сверху вниз.
зліва направо 0deg Сліва направо.
знизу вгору 90deg Знизу вгору.
справа наліво 180deg Справа наліво.
зверху ліворуч -45deg Від лівого верхнього кута до правого нижнього.
зверху праворуч 225deg Від правого верхнього кута до лівого нижнього.
знизу ліворуч 45deg Від лівого нижнього кута до правого верхнього.
знизу праворуч -225deg Від правого нижнього кута до лівого верхнього.

Приклад

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градієнт</title>
  <style>
   .приклад {
    background: #e2e2e2;

    background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);

    background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);

    background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);

    background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    padding: 10px;

   }
  </style>
 </head>
 <body>
  <div class="приклад">Вміст сторінки</div>
 </body>
</html>
Градієнт

Часті запитання

  • Q: -moz-linear-gradient в css як і де використовують?

    A: У веб-розробці -moz-linear-gradient використовується для створення лінійних градієнтів в CSS. Він може бути використаний для задання фонового градієнта елементу.

  • Q: Як правильно використовувати -moz-linear-gradient в CSS?

    A: Для використання -moz-linear-gradient в CSS необхідно вказати початковий та кінцевий колір градієнта, а також напрямок розташування градієнта.

  • Q: Чи є -moz-linear-gradient підтримуваним в усіх браузерах?

    A: -moz-linear-gradient є префіксом для Firefox і використовується для підтримки градієнтів в цьому браузері. У інших браузерах використовуються інші префікси або вбудовані властивості для створення градієнтів.

  • Q: Які альтернативи -moz-linear-gradient в CSS?

    A: Існують інші властивості для створення градієнтів в CSS, такі як linear-gradient, що є стандартною властивістю без префіксів, які підтримуються різними браузерами.

  • Q: Чи можна комбінувати -moz-linear-gradient з іншими CSS властивостями?

    A: Так, -moz-linear-gradient можна комбінувати з іншими CSS властивостями, такими як background-color, background-image та іншими, для створення складних фонових ефектів.