About Serie
Myanmar Intermediate CSS
CSS ထဲတွင် အခြေခံ CSS propertyများ value များကို သိရှိပြီးနောက်တွင် CSS3 property များကိုလည်း သိရှိရန် လိုအပ်ပေသည် CSS ဖြင့် animation များ effect များ ကို မိမိလိုချင်သည့် ပုံစံလုပ်ယူနိုင်ရန်အတွက် ၎င်းအရာများကို သိရှိနားလည်ရန် လိုအပ်ပေသည်။ ယခု သင်ခန်းစာများတွင် CSS ကို Developer Tool ဖြင့် မည်သို့အသုံးပြုနိုင်ပုံ Browser တစ်ခုနှင့်တစ်ခု CSS ကွဲလွဲချက်များ၊ Web component များ စသည့်အကြောင့်အရာများ ပါဝင်ပါသည်။
Episodes
episodesUpdated
2021-08-20Level
Beginner
About Current Episode
6
CSS Browser Reset
draft content 2021-08-19
8:10
1
Introduction
CSS ရဲ့ အခြေခံ property လေးတွေကို သိရှိပြီးနောက်မှ print, media query, customize HTML element tags စတဲ့အချက်လေးတွေကိုလည်း သိရှိရန်လိုအပ်လာပါတယ်။ အမှန်တကယ် website တစ်ခုကို ရေးသားရာမှာတော့ background image တွေကို အသုံးပြုပုံ၊ gradient color တွေကို အသုံးပြုပုံ၊ Developer Tools တွေကို အသုံးပြုပုံ စတဲ့အချက်လေးတွေအတွက်ကို သိရှိရန်လိုအပ်လာပါတယ်။ အဲဒါတွေကြောင့် ဒီ Series ကို ပြုလုပ်ရချင်း ဖြစ်ပါတယ်။ 2021-09-04
1:02
2
Developer Tools
CSS နဲ့ ဆိုင်တဲ့ လုပ်ဆောင်ချက်တွေ လုပ်တော့မယ်ဆိုရင် browser developer tools တစ်နည်းအားဖြင့် browser inspector ကို သိထားတာ ပိုအားသာချက်တွေ ရှိတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ developer tools ပေါ်မှာ CSS တွေတိုက်ရိုက် ရေးသားခြင်းဖြင့် code ရေးတဲ့အခါ ပိုမိုထိရောက်တာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ ဒီသင်ခန်းစာမှာတော့ developer tool မှာပါတဲ့ features ထဲကမှ CSS ရေးသားရာမှာ လုပ်ဆောင်နိုင်တဲ့ feature လေးတွေကို ရှင်းပြသွားမှာ ဖြစ်ပါတယ်။ 2022-07-11
9:11
3
Firefox Developer Tool
Firefox developer tools ဟာလည်း Chrome browser ရဲ့ inspect မှာ လုပ်ခဲ့သလိုပဲ သူ့မှာလည်း တော်တော်များကိုကို လုပ်ဆောင်နိုင်တာကို တွေ့ရမှာ ဖြစ်ပါတယ်။ အဲဒါကြောင့် browser developer tools တစ်ခုနဲ့တစ်ခု အခေါ်အဝေါ်နဲ့ အသုံးပြုတဲ့ ပုံစံနည်းနည်းပါးပါးလောက်သာ ကွဲပြားမှု ရှိတာကို တွေ့ရမှာ ဖြစ်ပါတယ်။ 2022-07-11
4:45
4
Inspect Other Website Using Developer Tool
Developer tools ကို အသုံးပြုပြီးတော့ တစ်ခြား website တွေမှာ CSS တွေဘယ်လိုရေးထားလဲ၊ ဘာတွေကို အသုံးပြုထားလဲ ဆိုတဲ့အချက်လေးတွေကို လေ့လာနိုင်မှာ ဖြစ်ပါတယ်။ Coding skill တွေ တိုးတက်စေဖို့အတွက် မိမိကိုယ်တိုင် code ရေးနေတာထက် သူများတွေမှာကော ဘာတွေသုံးထားလဲ ဘယ်လိုတွေ အလုပ်လုပ်သွားလဲ စသဖြင့် လုပ်ဆောင်ချက်လေးတွေကို သိရှိနိုင်ဖို့ လည်း လိုအပ်ပါသည်။ 2022-07-12
3:43
5
CSS Cross Browser
draft content 2021-08-19
6:33
6
CSS Browser Reset
draft content 2021-08-19
8:10
7
Border Radius
draft content 2021-08-19
10:23
8
Border Radius Using Slash
draft content 2021-08-19
7:17
9
Pseudo Class Example
draft content 2021-08-19
10:05
10
Pseudo Element
draft content 2021-08-19
9:35
11
Pseudo Element Before & After
draft content 2021-08-19
9:19
12
Using CSS Import
draft content 2021-08-19
16:35
13
Website Structure & Layout
draft content 2021-08-19
13:50
14
Website Component
draft content 2021-08-19
20:46
15
CSS Sprite Introduction
draft content 2021-08-19
11:09
16
CSS Sprite Creation
ဒီသင်ခန်းစာမှာတော့ CSS sprite ကိုယ်တိုင်ဘယ်လိုဖန်တီးပြီး လုပ်ဆောင်ရမယ်ဆိုတာကို ဖော်ပြထားခြင်းဖြစ်ပါတယ်။ css sprite ကို ဖြန်တီးတဲ့အခါ မိမိ ကြိုက်နှစ်သက်ရာ photo editing tools တစ်ခုခုအသုံးပြုပြီးတော့ လုပ်ဆောင်နိုင်ပါတယ်။ 2021-08-19
12:19
17
CSS Sprite Generator
CSS Sprite တွေကို တကယ်ဖန်တီးယူတဲ့အခါ photo editing tools တွေနဲ့ ကိုယ်တိုင်လုပ်ဆောင်တာက background images အနည်းငယ်အတွက်အဆင်ပြေနိုင်ပေမယ့် ပုံတွေများလာတဲ့အခါ ပိုမိုစီမံလုပ်ဆောင်ရလွယ်ကူစေဖို့အတွက် css sprite generator တွေ css sprite တွေကို auto generate လုပ်ပေးတဲ့ script တွေကို အသုံးပြုရတာက လုပ်ငန်းမှာ ပိုထိရောက်ပါတယ်။ 2021-08-19
10:54
18
Multiple Background Image
draft content 2021-08-20
8:59
19
Linear Gradient Background
draft content 2021-08-20
10:39
20
Radial Gradient Background
draft content 2021-08-20
13:16
21
CSS transition
draft content 2021-08-20
14:14
22
Cubic Bezier Effect
draft content 2021-08-20
7:27
23
CSS Animation
draft content 2021-08-20
12:07
24
Animation Direction
draft content 2021-08-20
5:47
25
Animation Timing function
draft content 2021-08-20
8:28
26
Animation Shorthand
draft content 2021-08-20
5:46
27
Transform Rotate
CSS transform မှာ rotate တွေကို အကိုသုံးပြုရာမှာ မိမိလိုချင်တဲ့ ဘက်ကို rotate လုပ်လို့ရနိုင်ပါတယ်။ ဥပမာ အနေနဲ့ဆိုရင် x,y,zထဲက တစ်ဖက်ဖက်ကို rotate လုပ်ရမယ့်အနေအထားတွေရှိနိုင်ပါတယ်။ အဲလိုအချိန်မျိုးမှာ rotateX, rotateY, rotateZ ဆိုပြီးအသုံးပြုနိုင်တာ ဖြစ်ပါတယ်။ 2021-08-20
7:31
28
Transform Rotate
CSS transform ရဲ့ rotate3D က element တွေကို rotate လုပ်တာကို x position အနေအထားကော y position အနေအထားကော z position အနေအထားကော အကုန်လုံးကို ပေါင်းစပ်ပြီးတော့ ဖော်ပြချင်း ဖြစ်ပါတယ်။ ဒါမှာလည်း 3D ပုံစံ element တွေကို လည်းပတ်နေအောင် လုပ်ဆောင်လို့ရမှာ ဖြစ်ပါတယ်။ 2021-08-20
6:03
29
Transform Skew
Transform Skew တို့ဟာ CSS 3 မှာ ပါလာတဲ့ ထားခြားတဲ property လေးတွေ ဖြစ်ပါတယ်။ အရင်တုန်းက css တွေမှာ Skew လိုပုံစံမျိုးရဖို့အတွက်ဆိုရင် ဓါတ်ပုံတွေကို ဖြတ်ပြီး Javascript တွေကို အသုံးပြုမှာ skew လို စောင်းစောင်းလဲတွေ လုပ်ဆောင်ချက်တွေကို ရရှိမှာပါ။ အခုအခါတော့ CSS 3 မှာ skew လို property တွေကို ထည့်လိုက်တဲ့အတွက် ဘာ ဓါတ်ပုံ Javascript code တွေရေးနေစရာမလိုပဲ element တွေကို လိုချင်သလိုစောင်းတာတွေကို လုပ်ဆောင်နိုင်တာ ဖြစ်ပါတယ်။ 2021-08-20
5:59
30
CSS Transform Scale
Transform scale ကတော့ element တစ်ခုရဲ့ ပုံစံကို လက်ရှိအနေအထားထက်ပိုကြီးအောင် ဒါထက်မဟုတ် ပိုသေးအောင် လုပ်လို့ရပါတယ်။ Scale လုပ်လိုက်တဲ့ element ဟာလည်း အချိုးကျကျ အချုံ့အချဲ့ ပြုလုပ်နိုင်မှာ ဖြစ်ပါတယ်။ 2021-08-20
6:08
31
CSS Transform Translate
CSS translate က element တွေကို နေရာတွေရွေ့ပြီးပြချင်တယ်အချိန်မျိုးမှာ အသုံးပြုပါတယ်။ နေရာရွေ့တာဆိုလို့ position absolute တို့ fixed တို့နဲ့လည်း ရွေ့လို့ရပေမယ်။ translate နဲ့ရွေ့တာကို element တစ်ခုရဲ့ behavior ကိုပြောင်းလဲခြင်းမရှိပဲ ရွေ့နိုင်တာဖြစ်ပါတယ်။ တကယ်လက်တွေ့အလုပ်တွေမှာတော့ translate property ကို css transition နဲ့တွဲ့သုံးမှု ပိုသင့်တော်ပါတယ်။ 2021-08-20
4:52
32
CSS Text Shadow
စာလုံးတွေကိုအလှဆင်တဲ့အခါမျိုးမှာ text-shadow ကို အရေးပါလှပါတယ်။ ရှိပြီးသားစာလုံးရုပ်ထွက်လှလာအောင်လုပ်ဖို့ဆိုရင် text-shadow လေးသုံးလိုက်ရင်အဆင်ပြေပါတယ်။ text-shadow က Adobe Photoshop တို့မှာအသုံးပြုတဲ့ပုံစံနဲ့ သဘောသဘာ၀တူတယ်လို့ပြောလို့ရပါဝယ်။ 2021-08-20
4:48