radial-gradient ֆունկցիան
radial-gradient ֆունկցիան սահմանում է ճառագայթային
գրադիենտ: Այս ֆունկցիան կիրառվում է այն հատկություններին, որոնք
սահմանում են ֆոնի նկարը՝ background,
background-image
կամ եզրի նկարը՝ border-image,
background-image-source:
Շարահյուսություն
ընտրիչ {
background: radial-gradient([ձև տիպ դիրք], գույն1 չափ1, գույն2 չափ2...);
}
Արժեքներ
| Արժեք | Նկարագրություն |
|---|---|
| ձև |
Ընդունելի արժեքներ՝
ellipse էլիպսային գրադիենտ (լռելյայն),
circle շրջանաձև գրադիենտ:
|
| տիպ |
Սահմանում է գրադիենտի ձգվածությունը:
Ընդունելի արժեքներ՝
closest-side, closest-corner,
farthest-side, farthest-corner:
|
| դիրք |
at ծառայողական բառից հետո
նշվում է դիրքը ցանկացած չափի միավորներով
կամ օգտագործելով ծառայողական բառեր՝ top, bottom,
left, right, center
տարբեր համադրություններով:
|
| գույն1 | Գրադիենտի սկզբնական գույնը ցանկացած գույնի միավորներով: |
| գույն2 | Գրադիենտի վերջնական գույնը ցանկացած գույնի միավորներով: |
| չափ | Սահմանում է գրադիենտի կոնկրետ գույնի տարածվածությունը ցանկացած չափի միավորներով: |
Արժեքներ տիպի համար
| Արժեք | Նկարագրություն |
|---|---|
closest-side |
Գրադիենտի ձևը համընկնում է բլոկին ամենամոտ կողմի հետ: |
closest-corner |
Գրադիենտի ձևը հաշվարկվում է բլոկի ամենամոտ անկյունին հեռավորության մասին տեղեկատվության հիման վրա: |
farthest-side |
Գրադիենտը տարածվում է մինչև բլոկի հեռավոր կողմը: |
farthest-corner |
Գրադիենտի ձևը հաշվարկվում է բլոկի հեռավոր անկյունին հեռավորության մասին տեղեկատվության հիման վրա: |
Ծանոթագրություն
Տիպը և ձևը կարելի է տեղերով փոխել, սակայն դիրքը պետք է գա առաջին պարամետրի վերջում: Գրադիենտի տիպը և նրա չափը չեն աշխատում միմյանց հետ (տրամաբանական է, քանի որ դրանք բախվում են): Հաղթում է չափը:
Օրինակ : Ամենապարզ տարբերակը
Պարզապես սահմանենք սկզբնական և վերջնական գույնը՝
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Օրինակ : Ավելացնենք դիրքը
Սահմանենք կենտրոնի դիրքը՝
30px - ձախից բացատ, 100px - վերևից բացատ:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Օրինակ : Դիրքը տոկոսներով
Սահմանենք կենտրոնի դիրքը տոկոսներով՝
30% - ձախից բացատ, 50% - վերևից բացատ:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Օրինակ : Դիրքը ծառայողական բառով
Կարելի է օգտագործել ծառայողական բառերը
top, bottom, left,
right, center տարբեր
համադրություններով: Օրինակ՝ դնենք գրադիենտը
աջ կենտրոնում:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Օրինակ : Գրադիենտի չափը
Այս դեպքում գրադիենտը կաշխատի այսպես.
0px-ից մինչև 20px կլինի մաքուր
կարմիր գույն, 20px-ից մինչև 60px - գրադիենտ
կարմիրից դեպի երկնագույն, 60px-ից հետո - մաքուր
երկնագույն:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Օրինակ : Մի քանի գույն հաջորդաբար
Այս դեպքում գրադիենտը կաշխատի այսպես.
0px-ից մինչև 20px կլինի մաքուր
կարմիր գույն, 20px-ից մինչև 40px
կլինի մաքուր երկնագույն գույն, 40px-ից
մինչև 60px - գրադիենտ երկնագույնից կանաչ,
60px-ից հետո - մաքուր կանաչ:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Օրինակ : Չափ + դիրք
Միաժամանակ սահմանենք տարբեր գույների համար չափերը և գրադիենտի կենտրոնի դիրքը:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Օրինակ : Գրադիենտի ձևը
Գրադիենտի ձևը սահմանվում է առաջին պարամետրով
և կարող է ընդունել 2 արժեք՝ circle
(շրջանաձև գրադիենտ) կամ ellipse (էլիպսային
գրադիենտ, լռելյայն): Իսկ why մինչ այժմ մենք չենք
տեսել էլիպսային գրադիենտներ, չնայած որ
այն սահմանվում է լռելյայն: Քանի որ մինչ այժմ
բլոկների ձևը քառակուսի էր: Եթե փոխենք
ձևը ուղղանկյունի, ապա կտեսնենք էլիպսային
գրադիենտ:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Օրինակ : Կլոր գրադիենտ
Ստեղծենք կլոր գրադիենտ ուղղանկյուն
բլոկում: Դրա համար առաջին պարամետրով սահմանենք
գրադիենտի ձևը օգտագործելով circle ծառայողական բառը:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Օրինակ : Ավելացնենք դիրքը
Նախորդ կոդին ավելացնենք նաև գրադիենտի դիրքը:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Օրինակ : Farthest-corner տիպ + circle
Գրադիենտի ձևը հաշվարկվում է բլոկի հեռավոր անկյունին հեռավորության մասին տեղեկատվության հիման վրա:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Օրինակ : Farthest-corner տիպ + ellipse
Գրադիենտի ձևը հաշվարկվում է բլոկի հեռավոր անկյունին հեռավորության մասին տեղեկատվության հիման վրա:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Օրինակ : Farthest-side տիպ + circle
Գրադիենտը տարածվում է մինչև բլոկի հեռավոր կողմը:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Օրինակ : Farthest-side տիպ + ellipse
Գրադիենտը տարածվում է մինչև բլոկի հեռավոր կողմը:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Օրինակ : Closest-corner տիպ + circle
Գրադիենտի ձևը հաշվարկվում է բլոկի ամենամոտ անկյունին հեռավորության մասին տեղեկատվության հիման վրա:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Օրինակ : Closest-corner տիպ + ellipse
Գրադիենտի ձևը հաշվարկվում է բլոկի ամենամոտ անկյունին հեռավորության մասին տեղեկատվության հիման վրա:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Օրինակ : Closest-side տիպ + circle
Գրադիենտի ձևը համընկնում է բլոկին ամենամոտ կողմի հետ:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Օրինակ : Closest-side տիպ + ellipse
Գրադիենտի ձևը համընկնում է բլոկին ամենամոտ կողմի հետ:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Տես նաև
-
linear-gradientֆունկցիան,
որը ստեղծում է գծային գրադիենտ -
repeating-linear-gradientֆունկցիան,
որը ստեղծում է կրկնվող գծային գրադիենտ -
repeating-radial-gradientֆունկցիան,
որը ստեղծում է կրկնվող ճառագայթային գրադիենտ
