About Serie

Myanmar Intermediate CSS

CSS ထဲတွင် အခြေခံ CSS propertyများ value များကို သိရှိပြီးနောက်တွင် CSS3 property များကိုလည်း သိရှိရန် လိုအပ်ပေသည် CSS ဖြင့် animation များ effect များ ကို မိမိလိုချင်သည့် ပုံစံလုပ်ယူနိုင်ရန်အတွက် ၎င်းအရာများကို သိရှိနားလည်ရန် လိုအပ်ပေသည်။ ယခု သင်ခန်းစာများတွင် CSS ကို Developer Tool ဖြင့် မည်သို့အသုံးပြုနိုင်ပုံ Browser တစ်ခုနှင့်တစ်ခု CSS ကွဲလွဲချက်များ၊ Web component များ စသည့်အကြောင့်အရာများ ပါဝင်ပါသည်။

Episodes
32 episodes
Updated
2021-09-04
Level
Beginner

Introduction

CSS ရဲ့ အခြေခံ property လေးတွေကို သိရှိပြီးနောက်မှ print, media query, customize HTML element tags စတဲ့အချက်လေးတွေကိုလည်း သိရှိရန်လိုအပ်လာပါတယ်။ အမှန်တကယ် website တစ်ခုကို ရေးသားရာမှာတော့ background image တွေကို အသုံးပြုပုံ၊ gradient color တွေကို အသုံးပြုပုံ၊ Developer Tools တွေကို အသုံးပြုပုံ စတဲ့အချက်လေးတွေအတွက်ကို သိရှိရန်လိုအပ်လာပါတယ်။ အဲဒါတွေကြောင့် ဒီ Series ကို ပြုလုပ်ရချင်း ဖြစ်ပါတယ်။

Developer Tools

Firefox Developer Tool

Inspect Other Website Using Developer Tool

CSS Cross Browser

CSS Browser Reset

Border Radius

Border Radius Using Slash

Pseudo Class Example

Pseudo Element

Pseudo Element Before & After

Using CSS Import

Website Structure & Layout

Website Component

CSS Sprite Introduction

CSS Sprite Creation

ဒီသင်ခန်းစာမှာတော့ CSS sprite ကိုယ်တိုင်ဘယ်လိုဖန်တီးပြီး လုပ်ဆောင်ရမယ်ဆိုတာကို ဖော်ပြထားခြင်းဖြစ်ပါတယ်။ css sprite ကို ဖြန်တီးတဲ့အခါ မိမိ ကြိုက်နှစ်သက်ရာ photo editing tools တစ်ခုခုအသုံးပြုပြီးတော့ လုပ်ဆောင်နိုင်ပါတယ်။

CSS Sprite Generator

CSS Sprite တွေကို တကယ်ဖန်တီးယူတဲ့အခါ photo editing tools တွေနဲ့ ကိုယ်တိုင်လုပ်ဆောင်တာက background images အနည်းငယ်အတွက်အဆင်ပြေနိုင်ပေမယ့် ပုံတွေများလာတဲ့အခါ ပိုမိုစီမံလုပ်ဆောင်ရလွယ်ကူစေဖို့အတွက် css sprite generator တွေ css sprite တွေကို auto generate လုပ်ပေးတဲ့ script တွေကို အသုံးပြုရတာက လုပ်ငန်းမှာ ပိုထိရောက်ပါတယ်။

Multiple Background Image

Linear Gradient Background

Radial Gradient Background

CSS transition

Cubic Bezier Effect

CSS Animation

Animation Direction

Animation Timing function

Animation Shorthand

Transform Rotate

CSS transform မှာ rotate တွေကို အကိုသုံးပြုရာမှာ မိမိလိုချင်တဲ့ ဘက်ကို rotate လုပ်လို့ရနိုင်ပါတယ်။ ဥပမာ အနေနဲ့ဆိုရင် x,y,zထဲက တစ်ဖက်ဖက်ကို rotate လုပ်ရမယ့်အနေအထားတွေရှိနိုင်ပါတယ်။ အဲလိုအချိန်မျိုးမှာ rotateX, rotateY, rotateZ ဆိုပြီးအသုံးပြုနိုင်တာ ဖြစ်ပါတယ်။

Transform Rotate

CSS transform ရဲ့ rotate3D က element တွေကို rotate လုပ်တာကို x position အနေအထားကော y position အနေအထားကော z position အနေအထားကော အကုန်လုံးကို ပေါင်းစပ်ပြီးတော့ ဖော်ပြချင်း ဖြစ်ပါတယ်။ ဒါမှာလည်း 3D ပုံစံ element တွေကို လည်းပတ်နေအောင် လုပ်ဆောင်လို့ရမှာ ဖြစ်ပါတယ်။

Transform Skew

Transform Skew တို့ဟာ CSS 3 မှာ ပါလာတဲ့ ထားခြားတဲ property လေးတွေ ဖြစ်ပါတယ်။ အရင်တုန်းက css တွေမှာ Skew လိုပုံစံမျိုးရဖို့အတွက်ဆိုရင် ဓါတ်ပုံတွေကို ဖြတ်ပြီး Javascript တွေကို အသုံးပြုမှာ skew လို စောင်းစောင်းလဲတွေ လုပ်ဆောင်ချက်တွေကို ရရှိမှာပါ။ အခုအခါတော့ CSS 3 မှာ skew လို property တွေကို ထည့်လိုက်တဲ့အတွက် ဘာ ဓါတ်ပုံ Javascript code တွေရေးနေစရာမလိုပဲ element တွေကို လိုချင်သလိုစောင်းတာတွေကို လုပ်ဆောင်နိုင်တာ ဖြစ်ပါတယ်။

CSS Transform Scale

Transform scale ကတော့ element တစ်ခုရဲ့ ပုံစံကို လက်ရှိအနေအထားထက်ပိုကြီးအောင် ဒါထက်မဟုတ် ပိုသေးအောင် လုပ်လို့ရပါတယ်။ Scale လုပ်လိုက်တဲ့ element ဟာလည်း အချိုးကျကျ အချုံ့အချဲ့ ပြုလုပ်နိုင်မှာ ဖြစ်ပါတယ်။

CSS Transform Translate

CSS translate က element တွေကို နေရာတွေရွေ့ပြီးပြချင်တယ်အချိန်မျိုးမှာ အသုံးပြုပါတယ်။ နေရာရွေ့တာဆိုလို့ position absolute တို့ fixed တို့နဲ့လည်း ရွေ့လို့ရပေမယ်။ translate နဲ့ရွေ့တာကို element တစ်ခုရဲ့ behavior ကိုပြောင်းလဲခြင်းမရှိပဲ ရွေ့နိုင်တာဖြစ်ပါတယ်။ တကယ်လက်တွေ့အလုပ်တွေမှာတော့ translate property ကို css transition နဲ့တွဲ့သုံးမှု ပိုသင့်တော်ပါတယ်။

CSS Text Shadow

စာလုံးတွေကိုအလှဆင်တဲ့အခါမျိုးမှာ text-shadow ကို အရေးပါလှပါတယ်။ ရှိပြီးသားစာလုံးရုပ်ထွက်လှလာအောင်လုပ်ဖို့ဆိုရင် text-shadow လေးသုံးလိုက်ရင်အဆင်ပြေပါတယ်။ text-shadow က Adobe Photoshop တို့မှာအသုံးပြုတဲ့ပုံစံနဲ့ သဘောသဘာ၀တူတယ်လို့ပြောလို့ရပါဝယ်။

အကူအညီ သင်သိလိုသောအချက်များ ကျွန်တော့အကြောင်း