အကြောင်းအရာစျေးကွက်

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;
    }

    ရလဒ်

    Douglas Karr

    Douglas Karr CMO သည် အဖွင့်အမြင်များ တည်ထောင်သူ Martech Zone. Douglas သည် ဒါဇင်ပေါင်းများစွာသော အောင်မြင်သော MarTech startup များကို ကူညီပေးခဲ့ပြီး Martech ဝယ်ယူမှုများနှင့် ရင်းနှီးမြှုပ်နှံမှုများတွင် ကန်ဒေါ်လာ 5 ဘီလီယံကျော် လုံ့လစိုက်ထုတ်ကာ ကူညီပေးခဲ့ကာ ကုမ္ပဏီများအား ၎င်းတို့၏ အရောင်းနှင့် စျေးကွက်ရှာဖွေရေးဗျူဟာများကို အလိုအလျောက်အကောင်အထည်ဖော်ရာတွင် ဆက်လက်ကူညီပေးနေပါသည်။ Douglas သည် နိုင်ငံတကာအသိအမှတ်ပြု ဒစ်ဂျစ်တယ်အသွင်ပြောင်းခြင်းနှင့် MarTech ကျွမ်းကျင်သူနှင့် စပီကာဖြစ်သည်။ Douglas သည် Dummie's Guide နှင့် Business Leadership စာအုပ်ကို ရေးသားထုတ်ဝေသူလည်းဖြစ်သည်။

    Related ဆောင်းပါးများ

    နောက်ကျောထိပ်တန်း button ကိုမှ
    ပိတ်

    Adblock ကို တွေ့ရှိခဲ့သည်။

    Martech Zone ကျွန်ုပ်တို့သည် ကြော်ငြာဝင်ငွေ၊ တွဲဖက်လင့်ခ်များနှင့် ပံ့ပိုးကူညီမှုများမှတစ်ဆင့် ကျွန်ုပ်တို့၏ဝဘ်ဆိုက်ကို ငွေရှာနိုင်သောကြောင့် ဤအကြောင်းအရာကို သင့်အား အခမဲ့ပေးစွမ်းနိုင်ခြင်းဖြစ်သည်။ ကျွန်ုပ်တို့၏ဆိုက်ကို သင်ကြည့်ရှုနေစဉ်တွင် သင့်ကြော်ငြာပိတ်ဆို့ခြင်းကို ဖယ်ရှားမည်ဆိုပါက ကျွန်ုပ်တို့ ကျေးဇူးတင်ပါသည်။