CSS အရောင်များ
CSS သည် 140+ အရောင်အမည်များ၊ HEX တန်ဖိုးများ၊ RGB တန်ဖိုးများ ၊ RGBA တန်ဖိုးများ၊ HSL တန်ဖိုးများ၊ HSLA တန်ဖိုးများနှင့် အလင်းပိတ်နိုင်မှုကို ပံ့ပိုးပေးပါသည်။
RGBA အရောင်များ
RGBA အရောင်တန်ဖိုးများသည် အယ်လ်ဖာချန်နယ်တစ်ခုပါရှိသော RGB အရောင်တန်ဖိုးများ၏ တိုးချဲ့မှုတစ်ခုဖြစ်သည် - အရောင်တစ်ခုအတွက် အလင်းပိတ်မှုကို သတ်မှတ်ပေးသည်။
RGBA အရောင်တန်ဖိုးကို rgba(အနီ၊ အစိမ်း၊ အပြာ၊ အယ်လ်ဖာ) ဖြင့် သတ်မှတ်ထားသည်။ အယ်လ်ဖာ ကန့်သတ်ဘောင်သည် 0.0 (အပြည့်အ၀ ဖောက်ထွင်းမြင်ရ) နှင့် 1.0 (လုံးဝ အလင်းမရှိ) အကြား နံပါတ်တစ်ခု ဖြစ်သည်။
အောက်ဖော်ပြပါ ဥပမာသည် မတူညီသော RGBA အရောင်များကို သတ်မှတ်ဖော်ပြသည်-
ဥပမာ
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
HSL အရောင်များ
HSL သည် Hue၊ Saturation နှင့် Lightness ကို ကိုယ်စားပြုသည်။
HSL အရောင်တန်ဖိုးကို hsl(အသွေးအရောင်၊ ပြည့်ဝမှု၊ ပေါ့ပါးမှု) ဖြင့် သတ်မှတ်ထားသည်။
- အသွေးသည် အရောင်ဘီးပေါ်ရှိ ဒီဂရီတစ်ခု (0 မှ 360):
- 0 (သို့မဟုတ် 360) သည် အနီရောင်ဖြစ်သည်။
- 120 က စိမ်းတယ်။
- 240 သည် အပြာရောင်ဖြစ်သည်။
- Saturation သည် ရာခိုင်နှုန်းတန်ဖိုးဖြစ်သည်- 100% သည် အရောင်အပြည့်ဖြစ်သည်။
- အလင်းရောင်သည်လည်း ရာခိုင်နှုန်းတစ်ခုဖြစ်သည်။ 0% သည် အနက်ရောင်ဖြစ်ပြီး 100% သည် အဖြူရောင်ဖြစ်သည်။
အောက်ဖော်ပြပါ ဥပမာသည် မတူညီသော HSL အရောင်များကို သတ်မှတ်ဖော်ပြသည်-
ဥပမာ
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
HSLA အရောင်များ
HSLA အရောင်တန်ဖိုးများသည် အယ်လ်ဖာချန်နယ်တစ်ခုနှင့် HSL အရောင်တန်ဖိုးများ၏ တိုးချဲ့မှုတစ်ခုဖြစ်သည် - အရောင်တစ်ခုအတွက် အလင်းပိတ်မှုကို သတ်မှတ်ပေးသည်။
HSLA အရောင်တန်ဖိုးကို alpha ကန့်သတ်ချက်မှသတ်မှတ်ပေးသည့် alpha parameter သည် hsla(အသွေးအရောင်၊ ရွှဲစိုမှု၊ ပေါ့ပါးမှု၊ အယ်လ်ဖာ) ဖြင့်သတ်မှတ်ထားသည်။ အယ်လ်ဖာ ကန့်သတ်ဘောင်သည် 0.0 (အပြည့်အ၀ ဖောက်ထွင်းမြင်ရ) နှင့် 1.0 (လုံးဝ အလင်းမရှိ) အကြား နံပါတ်တစ်ခု ဖြစ်သည်။
အောက်ပါဥပမာသည် မတူညီသော HSLA အရောင်များကို သတ်မှတ်ပေးသည်-
ဥပမာ
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
အလင်းပိတ်
CSS opacity
ပိုင်ဆိုင်မှုသည် ဒြပ်စင်တစ်ခုလုံးအတွက် ပွင့်လင်းမြင်သာမှုကို သတ်မှတ်သည် (နောက်ခံအရောင်နှင့် စာသားနှစ်ခုစလုံးသည် အလင်းမှိန်/ဖောက်ထွင်းမြင်ရပါမည်)။
ပိုင်ဆိုင်မှုတန်ဖိုး သည် opacity
0.0 (အပြည့်အ၀ဖောက်ထွင်းမြင်ရ) နှင့် 1.0 (လုံးဝ opaque) အကြား နံပါတ်တစ်ခု ဖြစ်ရပါမည်။
အထက်ဖော်ပြပါ စာသားသည် ပွင့်လင်းမြင်သာမှုရှိ/မရှိကို သတိပြုပါ။
အောက်ဖော်ပြပါ ဥပမာသည် အလင်းပိတ်ခြင်းရှိသော ကွဲပြားသောဒြပ်စင်များကို ပြသသည်-
ဥပမာ
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with
opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue
with opacity */