linear-gradient ක්‍රියාකාරීත්වය

linear-gradient ක්‍රියාකාරීත්වය රේඛීය අපගතියක් සකස් කරයි. පසුබිම් රූපයක් සකස් කරන ගුණාංග වලට යොදයි: background, background-image හෝ මායිම් රූපයක්: border-image, background-image-source.

වාග් රීතිය

cssතෝරන්නා {
  background: linear-gradient([කෝණය හෝ දිශාව], වර්ණ1 ප්‍රමාණය1, වර්ණ2 ප්‍රමාණය2...);
}

අගයන්

උදාහරණය . සරලම ප්‍රභේදය

වාග් රීතිය:

cssතෝරන්නා {
  background: linear-gradient(ආරම්භක වර්ණය, අවසාන වර්ණය);
}

උදාහරණයෙන් බලමු:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(black, red);
  width: 200px;
  height: 200px;
}

Результат:

උදාහරණය . කෝණය එකතු කිරීම

වාග් රීතිය:

cssතෝරන්නා {
  background: linear-gradient(කෝණය, ආරම්භක වර්ණය, අවසාන වර්ණය);
}

උදාහරණයෙන් බලමු:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(45deg, black, red);
  width: 200px;
  height: 200px;
}

Результат:

උදාහරණය . දිශාව එකතු කිරීම

කෝණය වෙනුවට දිශාව එකතු කළ හැක top, left, right, bottom හෝ ඒවායේ සංයෝජනය: top left, top right දිශාවට පෙර to යන වචනය යොදයි.

වාග් රීතිය:

cssතෝරන්නා {
  background: linear-gradient(දිශාව, ආරම්භක වර්ණය, අවසාන වර්ණය);
}

උදාහරණයෙන් බලමු:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

උදාහරණය . වෙනත් දිශාවක් සඳහන් කිරීම

වෙනත් දිශාවක් සඳහන් කරමු:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to top left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

උදාහරණය . ප්‍රමාණය එකතු කිරීම

වාග් රීතිය:

cssතෝරන්නා {
  background: linear-gradient(වර්ණ1 ප්‍රමාණය1, වර්ණ2 ප්‍රමාණය2);
}

මීළඟ උදාහරණයේ හැසිරීම පහත පරිදි වේ: සිවුරු රතු වර්ණය 0px සිට 30px දක්වා වනු ඇත, 30px සිට 50px දක්වා රතු සිට නිල් දක්වා අපගතිය වනු ඇත, සහ 50px සිට අවසානය දක්වා - සිවුරු නිල්:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 30px, blue 50px);
  width: 200px;
  height: 200px;
}

Результат:

උදාහරණය . 2 ට වැඩි වර්ණ එකතු කිරීම

වාග් රීතිය:

cssතෝරන්නා {
  background: linear-gradient(වර්ණ1 ප්‍රමාණය1, වර්ණ2 ප්‍රමාණය2, වර්ණ3 ප්‍රමාණය3...);
}

මීළඟ උදාහරණයේ හැසිරීම පහත පරිදි වේ: සිවුරු රතු වර්ණය 0px සිට 30px දක්වා වනු ඇත, 30px සිට 50px දක්වා රතු සිට නිල් දක්වා අපගතිය වනු ඇත, සහ 50px සිට 70px දක්වා - නිල් සිට හරිත දක්වා අපගතිය, සහ 70px පසු - සිවුරු හරිත:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 30px, blue 50px, green 70px);
  width: 200px;
  height: 200px;
}

Результат:

උදාහරණය . තියුණු සංක්‍රමණ

මීළඟ උදාහරණයේ හැසිරීම පහත පරිදි වේ: සිවුරු රතු වර්ණය 0px සිට 30px දක්වා වනු ඇත, සිවුරු නිල් - 30px සිට 60px දක්වා, සිවුරු හරිත - 60px පසු (red 0px ලිවීමට අවශ්‍ය නැත):

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
  width: 200px;
  height: 200px;
}

Результат:

උදාහරණය . ප්‍රමාණය ප්‍රතිශත වලින් ද සකස් කළ හැක

මීළඟ උදාහරණයේ හැසිරීම පහත පරිදි වේ: සිවුරු රතු වර්ණය 0% සිට 30% දක්වා වනු ඇත, සිවුරු නිල් - 30% සිට 60% දක්වා, සිවුරු හරිත - 60% පසු (red 0% ලිවීමට අවශ්‍ය නැත):

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
  width: 200px;
  height: 200px;
}

Результат:

උදාහරණය . background-size සමඟ සංයෝජනය

මීළඟ උදාහරණයේ හැසිරීම පහත පරිදි වේ: සිවුරු රතු වර්ණය 0px සිට 30px දක්වා වනු ඇත, සිවුරු නිල් - 30px සිට 60px දක්වා, මෙය සියල්ලම නැවත නැවත කැබලි වලින් 60px ක් (background-size: 60px; නිසා):

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
  background-size: 60px 60px;
  width: 200px;
  height: 200px;
}

Результат:

බලන්න