အကြောင်းအရာစျေးကွက်
CSS3 အင်္ဂါရပ်များကို သင်သတိမပြုမိနိုင်- Flexbox၊ Grid Layouts၊ Custom Properties၊ Transitions၊ Animations နှင့် Multiple Backgrounds
Cascading ပုံစံစာရွက်များ (CSS ကို) ဆက်လက်တိုးတက်နေပြီး နောက်ဆုံးဗားရှင်းများတွင် သင်ပင်သတိမထားမိနိုင်သော အင်္ဂါရပ်အချို့ရှိနိုင်ပါသည်။ ဤသည်မှာ CSS3 နှင့် မိတ်ဆက်ပေးထားသော ကုဒ်နမူနာများနှင့်အတူ အဓိက တိုးတက်မှုများနှင့် နည်းစနစ်အချို့ဖြစ်သည်။
- Flexible Box Layout (Flexbox): ဝဘ်စာမျက်နှာများအတွက် ပြောင်းလွယ်ပြင်လွယ်နှင့် တုံ့ပြန်မှုရှိသော အပြင်အဆင်များကို ဖန်တီးနိုင်စေမည့် အပြင်အဆင်မုဒ်။ flexbox ဖြင့် သင်သည် ကွန်တိန်နာအတွင်း အစိတ်အပိုင်းများကို အလွယ်တကူ ချိန်ညှိကာ ဖြန့်ဝေနိုင်သည်။ n ဤဥပမာ၊
.container
အတန်းသုံးသည်။display: flex
flexbox အပြင်အဆင်မုဒ်ကိုဖွင့်ရန်။ ဟိjustify-content
ပိုင်ဆိုင်မှုသတ်မှတ်ထားသည်။center
ကွန်တိန်နာအတွင်း ကလေးဒြပ်စင်ကို အလျားလိုက်ဗဟိုပြုရန်။ ဟိalign-items
ပိုင်ဆိုင်မှုသတ်မှတ်ထားသည်။center
ကလေးဒြပ်စင်ကို ဒေါင်လိုက်ဗဟိုပြုရန်။ ဟိ.item
အတန်းသည် ကလေးဒြပ်စင်အတွက် နောက်ခံအရောင်နှင့် padding ကို သတ်မှတ်သည်။
HTML ကို
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS ကို
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
ရလဒ်
ဗဟိုပြုသောဒြပ်စင်
- ဇယားကွက် အပြင်အဆင်- ဝဘ်စာမျက်နှာများအတွက် ရှုပ်ထွေးသော grid-based layout များကို ဖန်တီးနိုင်စေမည့် အခြားသော အပြင်အဆင်မုဒ်။ ဇယားကွက်ဖြင့် သင်သည် အတန်းများနှင့် ကော်လံများကို သတ်မှတ်နိုင်ပြီး၊ ဂရစ်၏ သီးခြားဆဲလ်များအတွင်း အစိတ်အပိုင်းများကို နေရာချနိုင်သည်။ ဤဥပမာတွင်၊
.grid-container
အတန်းသုံးသည်။display: grid
ဇယားကွက် အပြင်အဆင် မုဒ်ကို ဖွင့်ရန်။ ဟိgrid-template-columns
ပိုင်ဆိုင်မှုသတ်မှတ်ထားသည်။repeat(2, 1fr)
တူညီသော width ၏ကော်လံနှစ်ခုဖန်တီးရန်။ ဟိgap
ပိုင်ဆိုင်မှုသည် ဂရစ်ဆဲလ်များကြား အကွာအဝေးကို သတ်မှတ်ပေးသည်။ ဟိ.grid-item
အတန်းသည် ဇယားကွက်အရာများအတွက် နောက်ခံအရောင်နှင့် အကွက်များကို သတ်မှတ်သည်။
HTML ကို
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS ကို
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
ရလဒ်
item 1
item 2
item 3
item 4
- အကူးအပြောင်းများ- CSS3 သည် ဝဘ်စာမျက်နှာများပေါ်တွင် အကူးအပြောင်းများကို ဖန်တီးရန်အတွက် ဂုဏ်သတ္တိနှင့် နည်းပညာအသစ်များစွာကို မိတ်ဆက်ပေးခဲ့သည်။ ဥပမာအားဖြင့်၊
transition
CSS ဂုဏ်သတ္တိများ အချိန်နှင့်အမျှ ပြောင်းလဲမှုများကို သက်ဝင်လှုပ်ရှားရန် ပိုင်ဆိုင်မှုကို အသုံးပြုနိုင်သည်။ ဤဥပမာတွင်၊.box
အတန်းသည် ဒြပ်စင်အတွက် အကျယ်၊ အမြင့်နှင့် ကနဦးနောက်ခံအရောင်ကို သတ်မှတ်သည်။ ဟိtransition
ပိုင်ဆိုင်မှုသတ်မှတ်ထားသည်။background-color 0.5s ease
လွယ်ကူသောအချိန်ကိုက်လုပ်ဆောင်ချက်ဖြင့် စက္ကန့်ဝက်ကျော်ကြာ နောက်ခံအရောင်ပိုင်ဆိုင်မှုသို့ ပြောင်းလဲမှုများကို လှုပ်ရှားသက်ဝင်စေရန်။ ဟိ.box:hover
မောက်စ်ညွှန်ပြပြီးသွားသောအခါ အတန်းသည် အသွင်ကူးပြောင်းမှု လှုပ်ရှားသက်ဝင်မှုကို ဖြစ်ပေါ်စေသည်။
HTML ကို
<div class="box"></div>
CSS ကို
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
ရလဒ်
မောက်စ်တင်
ဒီမှာ!
ဒီမှာ!
- animations: CSS3 သည် ဝဘ်စာမျက်နှာများတွင် ကာတွန်းဖန်တီးခြင်းအတွက် ဂုဏ်သတ္တိနှင့် နည်းပညာအသစ်များစွာကို မိတ်ဆက်ပေးခဲ့သည်။ ဤဥပမာတွင်၊ ကျွန်ုပ်တို့သည် ကာတွန်းကို အသုံးပြု၍ ထည့်သွင်းထားသည်။
animation
ပစ္စည်းဥစ္စာ။ ငါတို့က သတ်မှတ်တယ်။@keyframes
ကြာချိန် 0 စက္ကန့်အတွင်း အကွက်သည် 90 ဒီဂရီမှ 0.5 ဒီဂရီ လှည့်သင့်သည်ဟု သတ်မှတ်သည့် ကာတွန်းအတွက် စည်းမျဉ်း။ အကွက်ကို ပျံဝဲလာသောအခါ၊spin
အကွက်ကို လှည့်ရန် ကာတွန်းကို အသုံးပြုသည်။ ဟိanimation-fill-mode
ပိုင်ဆိုင်မှုသတ်မှတ်ထားသည်။forwards
ကာတွန်း၏နောက်ဆုံးအခြေအနေအား ၎င်းကို ပြီးမြောက်ပြီးနောက် ဆက်လက်ထိန်းသိမ်းထားကြောင်း သေချာစေရန်။
HTML ကို
<div class="rotate"></div>
CSS ကို
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
ရလဒ်
မောက်စ်တင်
ဒီမှာ!
ဒီမှာ!
- CSS စိတ်ကြိုက်ဂုဏ်သတ္တိများ- ဒါ့အပြင်အဖြစ်လူသိများ CSS ကိန်းရှင်များCSS3 တွင် စိတ်ကြိုက်ဂုဏ်သတ္တိများကို မိတ်ဆက်ခဲ့သည်။ ၎င်းတို့သည် သင့်အား သင့်စတိုင်စာရွက်များတစ်လျှောက် တန်ဖိုးများကို သိမ်းဆည်းရန်နှင့် ပြန်လည်အသုံးပြုရန်အတွက် CSS တွင် သင့်ကိုယ်ပိုင်ဂုဏ်သတ္တိများကို သတ်မှတ်ပြီး အသုံးပြုခွင့်ပေးသည်။ CSS variable များကို dashes နှစ်ခုဖြင့် အစပြုသော အမည်ဖြင့် ခွဲခြားသတ်မှတ်သည်။
--my-variable
. ဤဥပမာတွင်၊ ကျွန်ုပ်တို့သည် -primary-color ဟုခေါ်သော CSS variable ကိုသတ်မှတ်ပြီး ၎င်းကိုတန်ဖိုးတစ်ခုပေးသည်။#007bff
ဒီဇိုင်းများစွာတွင် အဓိကအရောင်အဖြစ် အသုံးပြုလေ့ရှိသော အပြာရောင်ဖြစ်သည်။ ကျွန်ုပ်တို့သည် ဤကိန်းရှင်ကို သတ်မှတ်ရန် အသုံးပြုထားပါသည်။background-color
ခလုတ်ကို အသုံးပြု၍ အစိတ်အပိုင်းတစ်ခု၏ ပိုင်ဆိုင်မှု၊var()
function နှင့် variable name တွင် passing ။ ၎င်းသည် ခလုတ်အတွက် နောက်ခံအရောင်အဖြစ် ပြောင်းလဲနိုင်သောတန်ဖိုးကို အသုံးပြုမည်ဖြစ်သည်။
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- နောက်ခံများစွာ- CSS3 သည် ဒြပ်စင်တစ်ခုအတွက် နောက်ခံပုံများစွာကို သတ်မှတ်နိုင်စေပြီး ၎င်း၏နေရာချထားမှုနှင့် အစုလိုက်အစီအစဥ်ကို ထိန်းချုပ်နိုင်စွမ်းရှိသည်။ နောက်ခံပုံနှစ်ပုံ၊
red.png
နှင့်blue.png
အသုံးပြု၍ တင်ပေးသော၊background-image
ပစ္စည်းဥစ္စာ။ ပထမပုံ၊red.png
ဒြပ်စင်၏ ညာဘက်အောက်ခြေထောင့်တွင် နေရာယူထားပြီး ဒုတိယပုံ၊blue.png
ဒြပ်စင်၏ ဘယ်ဘက်ထိပ်ထောင့်တွင် နေရာယူထားသည်။ ဟိbackground-position
ပုံတစ်ပုံချင်းစီ၏ positioning ကိုထိန်းချုပ်ရန်အတွက် property ကိုအသုံးပြုသည်။ ဟိbackground-repeat
ပုံများကို မည်သို့ပြန်လုပ်သည်ကို ထိန်းချုပ်ရန် ပိုင်ဆိုင်မှုကို အသုံးပြုသည်။ ပထမပုံ၊red.png
ထပ်မလုပ်ရန် သတ်မှတ်ထားသည် (no-repeat
) ဒုတိယပုံ၊blue.png
ပြန်လုပ်ရန် သတ်မှတ်ထားသည် (repeat
).
HTML ကို
<div id="multibackground"></div>
CSS ကို
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}