basic.css

* { 
    /* THIS RULE SET IS RESET CSS */
    /* *คือ universal selector */
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    /* 
        box model ประกอบด้วย content padding border (ไม่รวม outline) และ margin
        ปกติ box-sizing : content-box; >> width & height จะหมายถึงส่วน content เท่านั้น
        แต่ box-sizing: border-box; >> width & height จะหมายถึง content+padding+border
    */
}

/* Selector!! */
Selector {
    /* 
        .class >> eg. .new-btn {}
        #id >> eg. #div1 {}
        tags >> eg. div {}
        * >> select all element in DOM
    */
    /*  Combination!
        div, p >> เลือก div และ p
        a.mylink >> เลือก tag a ที่ class = "mylink"
        div p >> เลือก tag p ที่อยู่ภายใต้ tag div (ไม่จำเป็นต้องเป็นพ่อลูก แค่เป็นบรรพบุรุษก็พอ)
        div > p >> เลือก p ที่เป็นลูกของ div
        ul + h3 >> เลือก h3 1ตัวที่อยู่ถัดจาก ul (sibling)
        ul ~ h3 >> เลือก h3 ทุกตัวที่อยู่ถัดจาก ul (siblings)
    */
    /*  Attr selector! 
        [id] >> เลือก element ที่มี id เป็น attribute
        [id="my-address"] >> เลือก element ที่มี id="my-address" เป็น attribute+value
        [id$="ess"] >> เลือก element ที่ value ของ id ลงท้ายด้วย "ess"
        [id|="my"] >> เลือก element ที่ value ของ id ขึ้นต้นด้วย "my"
        [id^="L"] >> เลือก element ที่ value ของ id ขึ้นต้นด้วย "L"
        [title~="new"] >> เลือก element ที่ value ของ title มีคำว่า "new"
        [title*="new"] >>  เลือก element ที่ value ของ title มีส่วนของstringเป็น "new"
    */
    /*  All CSS Pseudo Classes!
        Selector	        Example	            Example description
        :active	            a:active	        Selects the active link
        :checked	        input:checked	    Selects every checked <input> element
        :disabled	        input:disabled	    Selects every disabled <input> element 
        :empty	            p:empty	            Selects every <p> element that has no children
        :enabled	        input:enabled	    Selects every enabled <input> element
        :first-child	    p:first-child	    Selects every <p> elements that is the first child of its parent
        :first-of-type  	p:first-of-type	    Selects every <p> element that is the first <p> element of its parent
        :focus	            input:focus	        Selects the <input> element that has focus
        :hover	            a:hover	            Selects links on mouse over
        :in-range	        input:in-range	    Selects <input> elements with a value within a specified range
        :invalid	        input:invalid	    Selects all <input> elements with an invalid value
        :lang(language)	    p:lang(it)	        Selects every <p> element with a lang attribute value starting with "it"
        :last-child	        p:last-child	    Selects every <p> elements that is the last child of its parent
        :last-of-type	    p:last-of-type	    Selects every <p> element that is the last <p> element of its parent
        :link	            a:link	            Selects all unvisited links
        :not(selector)	    :not(p)	            Selects every element that is not a <p> element
        :nth-child(n)	    p:nth-child(2)	    Selects every <p> element that is the second child of its parent
        :nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
        :nth-last-of-type(n)p:nth-last-of-type(2)Selects every <p> element that is the second <p> element of its parent, counting from the last child
        :nth-of-type(n)	    p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
        :only-of-type	    p:only-of-type	    Selects every <p> element that is the only <p> element of its parent
        :only-child	        p:only-child	    Selects every <p> element that is the only child of its parent
        :optional	        input:optional	    Selects <input> elements with no "required" attribute
        :out-of-range	    input:out-of-range	Selects <input> elements with a value outside a specified range
        :read-only	        input:read-only	    Selects <input> elements with a "readonly" attribute specified
        :read-write	        input:read-write	Selects <input> elements with no "readonly" attribute
        :required	        input:required	    Selects <input> elements with a "required" attribute specified
        :root	            root	            Selects the document's root element
        :target	            #news:target	    Selects the current active #news element (clicked on a URL containing that anchor name)
        :valid	            input:valid	        Selects all <input> elements with a valid value
        :visited	        a:visited	        Selects all visited links
    */
    /*  All CSS Pseudo Elements!
        Selector	        Example	            Example description
        ::after	            p::after	        Insert content after every <p> element
        ::before	        p::before	        Insert content before every <p> element
        ::first-letter	    p::first-letter	    Selects the first letter of every <p> element
        ::first-line	    p::first-line	    Selects the first line of every <p> element
        ::selection	        p::selection	    Selects the portion of an element that is selected by a use
    */
    
}
p::before, p::after {
    content: "asdfg";
    content: url('path.svg');
    /* แทรก content ก่อนหน้า/ต่อหลัง จาก content ของ p */
}

/* colors
    RED GREEN BLUE
    name >> red
    RGB >> rgb(255,0,0) RED GREEN BLUE 0-255
    RGBA >> rgba(255,0,0,0.5)
    HSL >> hsl(20, 100%, 50%) >> H(สี):0-360, S(ความชัดเจนสี):0-100%, L(ความสว่าง):0-100%
    HSLA >> hsla(20, 100%, 50%, 0.3)
    HEX >> #ff0000
*/
/* Backgrounds */
background {
    background-color: green;
    /*  default : transparent >> same parent element
        custom : colors
    */
    background-image: url("image.png");
    /* can use more than 1 as >> url(""), url(""), url("")
        default : none
        custom : url("")
    */
    background-repeat: no-repeat;
    /* default : repeat >> repeat both X and Y
       custom : repeat-x, repeat-y, no-repeat
    */
    background-position: right top;
    /*  default : left top
        custom : X% Y%, Xpx Ypx, center, top, bottom, left, right, letf bottom...
        *when only top, bottom ->  horizontal is center
        *when only left, right -> verticle is center
    */
    background-attachment: fixed;
    /*  default : scroll >> bg move along with element
        custom : fixed,
                local >> bg move along with element's content
    */
    /* short */
    background: bg-color bg-image position/bg-size bg-repeat 
        bg-origin bg-clip bg-attachment initial or inherit;
    /* Background in css3 */
    background-clip: border-box;
    /*  use : ใช้  clip จำกัดขอบเขตของ background
        default : border-box >> ตัดรูปไม่ให้เกินขอบ
        custom : padding-box >> ตัดรูปไม่ให้เกิน padding, content-box >> ตัดรูปไม่ให้เกิน content, inherit, initial
    */
    background-origin: padding-box;
    /*  use : ใช้กำหนดตำแหน่งเริ่มต้นของรูป background
        default : padding-box >> รูปเริ่มต้นวาดจาก padding zone
        custom : content-box, border-box, inherit, initial
    */
    background-size: 20px 30px;
    /*  use : ใช้กำหนดขนาดของรูปพื้นหลัง (สามารถใช้ -webkit-, -moz-, -o-)
        default : auto >> ตามขนาดเดิมของรูป
        custom : 20px 30px หรือ 50% 60% (กว้าง-สูง ใช้หน่วยอื่นก็ได้),
                cover >> ปรับขนาดภาพพื้นหลังให้ใหญ่เท่าที่เพียงพอจะครอบคลุมพื้นที่ (รูปอาจจะเลยขอบและถูกclip),
                contain >> ปรับขนาดภาพพื้นหลังให้ใหญ่เท่าที่จะทำได้ (fitพอดี รูปจะไม่เลยขอบ ไม่ถูกตัด ),
                inherit, initial
    */

    /*  สามารถใส่รูปพื้นหลังหลายๆรูปได้ เช่น
        #example1 {
            background-image: url(img_flwr.gif), url(paper.gif);
            background-position: right bottom, left top;
            background-repeat: no-repeat, repeat;
        }
    */
}

/* Border */
border {
    
    border-width: 1px;
    /*  unit : px, pt, cm, em, etc
        use : 1px 1px 1px 1px >> for each edges (top > right > bottom > left)
                    1px 1px 1px >> for (top > left,right > bottom)
                    1px 1px >> for (top,bottom > left,right)
        default : 3px
    */
    border-style: solid;
    /*  use : Same border-width!!!!
        default : none
        custom : dotted, dashed, solid, double, groove, ridge, inset, outset, hidden
    */
    border-color: red green blue;
    /*  use : Same border-width!!!!
        default : transparent
        custom : colors
        
    */
    border-radius: 10px;
    /*  unit : %, px
        use : Same border-width!!!! but start with left-top corner
        default : 0    
    */
    /* short */
    border: border-width border-style border-color;
    /* use : for all edges 
       *you can use only width | style | color | style color | width style >> UP TO YOU!!!
    */
    border-top: border-width border-style border-color;
    border-right: border-width border-style border-color;
    border-bottom: border-width border-style border-color;
    border-left: border-width border-style border-color;
    /* use : for specific edge 
       *you can use SAME border:
    */ 
}

outline {
    /* outine ไม่ส่งผลต่อขนาดของ box(NOT a part of element dimension) ขนาดของ outline จะไม่ส่งผลต่ออะไรทั้งนั้น!!! */
    outline: red;
    outline-style: dotted;
    /* outline-style
        default : none
        custom : none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit
    */
    outline-offset: 10px;
    /* outline-ofset is space between border and outline DEFAULT is 0px */
    outline-width: 10px;
    /* outline-width is width of outline */
    outline : outline-color outline-style (outline-width or initial or inherit);
}

/* Margin */
/* margin can collapse
    For inline box
    ในแนวตั้ง ไม่มีผล
    ในแนวนอน มีผล, ไม่ทับซ้อนระหว่างพ่อลูก, ไม่ทับซ้อนระหว่างelement
    For block box
    ในแนวตั้ง มีผล, ทับซ้อนทั้ง พ่อ-ลูก และ element-element
    ในแนวนอน มีผล, ไม่ทับซ้อนระหว่างพ่อลูก, ทับซ้อนระหว่างelement
    **วิธีการแก้ไขการทับซ้อน
        พ่อลูก: มีborder, มีpadding
        element: เอาelementอื่นๆมาคั่น
*/
margin {
    margin: 10px 10px 10px;
    /*  unit : px, pt, cm, em, %, etc
        use : 1px 1px 1px 1px >> for each edges (top > right > bottom > left)
                    1px 1px 1px >> for (top > left,right > bottom)
                    1px 1px >> for (top,bottom > left,right)
    */
    margin-top: 10xp;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    /* To horizontally center the element within its container. use */
    margin: auto; 
    margin: 10px auto;
    /* Vertical center use padding */
}

/* Padding
    สำหรับ Block box มีผลทั้งแนวตั้งและนอน แถมยังมีผลต่อ content หรือ element อื่นๆรอบข้าง
    สำหรับ Inline box มีผลทั้งแนวตั้งและนอน แต่เมื่อขยายแล้วจะไม่มีผลต่อสิ่งรอบข้างเลย(ขยายไปก็ทับ ไม่ได้ไปบีบหรือดันรอบข้าง)
*/
padding {
    padding: 10px 10px 5px;
    /*  unit : px, pt, cm, em, %, etc
        use : 1px 1px 1px 1px >> for each edges (top > right > bottom > left)
                    1px 1px 1px >> for (top > left,right > bottom)
                    1px 1px >> for (top,bottom > left,right)
    */
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
}

/* Width and Height */
width, height {
    /* fixed */
    width: 200px;
    /* fixed min */
    min-width: 200px;
    /* fixed max */
    max-width: 200px;
    /* fixed */
    height: 50px;
    /* fixed min */
    min-height: 50px;
    /* fixed max */
    max-height: 50px;
    /*  unit :  px, pt, cm, em, %, etc
        use : % of parent element
            *not include padding margin border
    */
}

text, font {
    color: blue;
    /* For text color */
    text-align: center;
    /* 
        use : ใช้จัดtextในelementนั้นๆ
        default : left
        custom : left, center, right, justify >> แผ่ให้เต็ม box
    */
    /* vertical-align: (baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit); */
    text-decoration: none;
    /*
        default : none
        custom : none|underline|overline|line-through|initial|inherit
    */
    text-transform: none;
    /*
        default : none
        custom : none|capitalize|uppercase|lowercase|initial|inherit
    */
    text-indent: 10px;
    /* use : indent first line in block */
    letter-spacing: 2px;
    /* space between letter */
    line-height: 2;
    /*  use : space between line
        default : normal
        custom : normal|number|length|initial|inherit
            number > multiply current font size
            length > px, em, pt, cm, %, etc.
    */
    word-spacing: 10px;
     /* 
        use : space between words
        default : normal
        custom : normal|length|initial|inherit;
            length > px, em, pt, cm, %, etc.
     */
     text-shadow: 2px 2px black;
     /* use : x y color
        default : none
        custom : h-shadow v-shadow blur-radius color|none|initial|inherit
     */
     text-overflow: clip;
     /* use : ใช้เมื่อ text ล้น block
        default : clip >> ตัดดื้อๆ
        custom : clip|ellipsis|string|initial|inherit;
            ellipsis > เติม ... ต่อท้าย
            string > ใส่สตริงเป็น property value แล้วจะใช้สตริงนั้นแสดงแทน
     */

     font-family: "font 1" font2 font3;
     font-size: 2em;
     /*
        default : normal;
        custom : medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;
            length > px, em, pt, cm, %, etc.
     */
     font-weight: bold;
     /*
        default : normal
        custom : normal|bold|bolder|lighter|number|initial|inherit
            number > 100|200|300| ... *400 is normal
     */
     font-style: italic;
     /*
        default : normal
        custom :  normal|italic|oblique|initial|inherit
     */
     word-break: keep-all; /*<<<< ยังไม่เคลียร์ word-break ไว้ศึกษาอีกรอบ*/
     /* use : ใช้ตัดคำเพื่อขึ้นบรรทัดใหม่เวลาที่ string content ล้นขอบข้าง */
     /* Default : normal >> ตัดตามปกติ ตัดตรงเว้นวรรค */
     /* Custom : break-all >> ตัดกลางคำได้เลย จะไม่ปล่อยให้ล้น เช่นภาษาไทยที่เขียนแบบไม่เว้นวรรคเลย,
                keep-all >> เหมือนกับ normal แต่ถ้าคำยาวๆมากแล้วจำเป็นต้องตัด จะไม่ปล่อยให้ล้นขอบ แต่จะมองหาสัญลักษณ์เช่น - แล้วตัดคำตรงนั้นเพื่อขึ้นบรรทัดใหม่           
     */
     word-wrap: normal; /* wrap ตาม behavior ปกติ แต่ไม่อนุญาติให้ตัดขึ้นบรรทัดใหม่กลางคำได้*/
     word-wrap: break-word; /*wrap ตาม behavior ปกติ และอนุญาติให้ตัดขึ้นบรรทัดใหม่กลางคำได้ */
     white-space: nowrap; /* Disable การ wrap ตาม behavior ปกติ */ 
}
/* Font-face */
@font-face {
    /* สำหรับคนที่อยากจะเปลี่ยน font โดยไม่ใช้ CDN */
    /* ตั้งชื่อ */
    font-family: my-font;
    /* ที่อยู่ไฟล์ */
    src: url(sansation_light.woff);
}
@font-face{
    /* ชื่อเดิม */
    font-family: my-font;
    src: url(sansation_bold.woff);
    font-weight: bold; /* bold, normal, 100-900 */
}
@font-face{
    /* ชื่อเดิม */
    font-family: my-font;
    src: url(sansation_italic.woff);
    font-style: italic; /* italic, normal, oblique */
}
/* นำไปใช้ */
div {
    font-family: my-font;
    /* Go to https://www.w3schools.com/css/css3_fonts.asp for more detail */
}

link, a:link, a:visited, a:hover, a:active {
    /*
        //add style when...
        :link >> default
        :visited >> เคยกดไปแล้ว
        :hover >> เอาเมาส์มาวาง
        :active >> โดนคลิก
    */
    cursor: default;
}
cursor {
    cursor: default;
    /*
        use : ใช้เปลี่ยน cursor เวลาที่เอามเมาส์ไปชี้ที่ element นั้นๆ
        default : default
        custom : auto,crosshair,default,e-resize,help,move,n-resize,ne-resize,nw-resize,pointer,
            progress,s-resize,se-resize,sw-resize,text,w-resize,wait,
    */
}

list, ul, ol {
    list-style-type: none;
    /*
        Type
        For all : none, inherit
        For ul : circle, disc, square
        For ol : armenian, cjk-ideographic, decimal, decimal-leading-zero, georgian, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha
                ,lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman
    */
    list-style-position: outside;
    /*
        use : กำหนดตำแหน่งของสัญลักษณ์หน้า list
        default : outside >> อยู่ข้างนอก border ของ li
        custom : inside >> อยู่ใน border ของ li , initial, inherit
    */
    list-style-image: url('sqpurple.gif');
    /*
        use : ใช้รูปแทน style list
        default : none
        custom : initial, inherit, url('path/.gif, .jpg, .png, ...')
    */
}

 /* THE TABLE !!! */
 table {
     empty-cells: hide;
     /* use : ใช้จัดการกับ cell (th, td) ที่ไม่มีข้อมูลอะไรข้างใน
        default : show
        custom : show, hide, initial, inherit
     */
    table-layout: fixed;
    /*  use : จัดการขนาดของ cell, fixed >> ห้ามขยับ, auto >> ขยายตาม content
        default : auto
        custom : fixed, initail, inherit
    */
    border-spacing: 2px; /* default : 2px*/
    border-collapse: collapse;
    /* use : ใช้ยุบรวม border ของ table, th, td ไว้ด้วยกัน
       default : separate
       custom : separate|collapse|initial|inherit
    */
 }
caption {
    caption-side: bottom;
    /*  use : ใช้สำหรับจัดวาง caption ของ table
        default : top
        custom : top, bottom, initail, inherit
    */
}
/* TABLE EXAMPLE!!! */
table {
    border-collapse: collapse;
    width: 100%;
}
table, th, td {
   border: 1px solid black;
}
th, td {
    height: 20px;
    text-align: center;
    padding: 10px;
    color: red;
}
tr:hover {
    background-color: #f5f5f5
}
tr:nth-child(odd), tr:nth-last-child(), tr:nth-child(even) {
    background-color: #f2f2f2;
}

display, visibility {
    display: none; /* ไม่ใช่มองไม่เห็น แต่หายไปเลย */
    display: block; /* block box */
    display: inline; /* inline box */
    display: inline-block; /* block and float left */
    /* custom : initial, inherit, flex, ...  */
    visibility: hidden; /* มีอยู่ แต่มองไม่เห็น */
    visibility: visible; /* มองเห็นปกติ Default */
    visibility: collapse; /* ทำให้ tr เป็น hidden */
}
/* position */
position {
    position: static;
    /*  Default
        จัดตาม behavior และ float ตามปกติของ element
        top bottom left right ไม่ส่งผล
        ส่งผลกับ element อื่นๆรอบข้างเสมอ
    */
    position: relative;
    /* 
        ใช้ควบคู่กับ top bottom left right
        โดยจะเลื่อนโดยยึดจากตำแหน่งเดิมเมื่อ element นั้นวางตัวตามปกติ
        เมื่อเลื่อน จะไม่ส่งผลต่อ element อื่นๆ
    */
    position: fixed;
    /* 
        ใช้ควบคู่กับ top bottom left right
        ยึดตำแหน่งจาก viewport(ขอบของ browser), scroll ไม่ส่งผลต่อ element
        การเคลื่อนย้าย เลื่อนตำแหน่ง ไม่ส่งผลต่อ element อื่นๆ 
    */
    position: absolute;
    /* 
        ใช้ควบคู่กับ top bottom left right
        ยึดตำแหน่งจาก page(ขอบของ  DOM) 
        แต่!!จะยึดตำแหน่งจาก nearest ancestor element(ขอบของ element พ่อ) เมื่อElementพ่อเป็นRelative, 
        scroll ส่งผลตามปกติ
        การเคลื่อนย้าย เลื่อนตำแหน่ง ไม่ส่งผลต่อ element อื่นๆ
        *body element can be parent element
    */
    /* Overlapping element */
    z-index: -1;
    /* 
        use : สำหรับกำหนดลำดับการซ้อนกัน
        default : auto >> ลูกอยู่บน พ่ออยู่ล่าง
        custom : number >> เลขใครมากกว่า คนนั้นอยู่หน้า, ถ้าเลขเท่ากัน ลูกอยู่หน้า
            initial, inherit
    */
    /* absolute fixed ถ้าไม่ได้กำหนด top left bottom right ก็จะทำตัวเหมือน static 
        คือเรียงตัวตามลำดับของ element แต่ element อื่นๆที่อยู่ถัดไป(รวมถึง parent's bottom border(แก้ด้วย overflow:auto))จะ overlap 
        สรุป ไม่overlapกับelementก่อนหน้าแต่overlapกับelementที่มาต่อหลัง
    */
}

/* Overflow ใช้สำหรับ clip content หรือใส่ scroll bar เวลาที่เนื้อหาล้นขอบเขตของ element ที่กำหนด */
overflow {
    /* ใช้ได้กับ Block box ที่ระบุ height เท่านั้น */
    overflow: visible;
    /*  use :  Overflow ใช้สำหรับ clip content หรือใส่ scroll bar เวลาที่เนื้อหาล้นขอบเขตของ element ที่กำหนด
        default : visible >> ถ้าล้น ก็ปล่อยให้ล้นไปเลย
        custom : hidden >> ตัดส่วนที่ล้น ซ่อนส่วนที่ล้นให้มองไม่เห็น,
                scroll >> ตัดส่วนที่ล้น แต่เพิ่มscrollให้สามารถเลื่อนดูได้ แต่ถ้าไม่ล้นก็มีscrollอยู่ดี
                auto >> เหมือน scroll แต่จะเพิ่ม scroll bar ก็ต่อเมื่อล้นเท่านั้น
    */
    overflow-x: visible;
    overflow-y: visible;
    /* ระบุ overflow property ให้เฉพาะแกนที่กำหนด */
}

float, clear {
    float: left;
    /*  use : ทำให้ element นั้นลอยไปชิดซ้ายหรือขวา ถ้า element ที่อยู่ถัดไปทำการ floatด้วย elementนั้นก็จะเรียงต่อๆกันไป
        defaul : none
        custom : left, right, initial, inherit
    */
    /* ปัญหาที่เกิด */
    /* 
        1.สมมติว่า element1 float:left แต่ element2 อยู่ถัดจาก element1 แต่ไม่ได้ float element2 จะwrapหรือห่อ
            หุ้ม element1 แก้ไขโดยใช้ clear
    */
    clear: left;
    /*  use : ใช้กำหนดว่าข้างไหนจะต้องไม่มีelementลอยอยู่ 
        default : none
        custom : none|left|right|both|initial|inherit
    */
    /* 
        2.สมมติว่า element1 float:left ภายใต้ element2, element2's border จะไม่สนใจส่วนสูงของ element1
            เพื่อให้สนใจส่วนสูง ใช้ 
    */
    overflow: auto;
    /* ปัญหาทั้งหมดนี้ แก้ได้ด้วย */
    display: inline-block;
    /* จบ */
}

/* Opacity */
img, div, opacity {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    /* use rgba */
    background: rgba(19, 62, 20, 0.50)
}
/* Filter */
img {
    filter: none;
    -webkit-filter:none;
    /*  use : ใส่ฟิลเตอร์ให้ img
        default : none
        custom : blur(px), brightness(%), contrast(%), drop-shadow(h-shadow v-shadow blur spread color) >> เหมือน box-shadow,
            grayscale(%), hue-rotate(0-360deg), invert(%), sepia(%)
            100% is default
    */
}
/* Gradients  */
Gradients {
    /* การไล่สี ใช้แทน image */
    /* Linear */
    background-image: linear-gradient(direction, color-sto-1, color-stop-2, color-stop-n);
    /* Go to https://www.w3schools.com/css/css3_gradients.asp for more detail */
}

shadow {
    /* Text Shadow */
    text-shadow: 2px 2px 5px rgba(red, green, blue, alpha); /* x y blur-radius color */
    /* Multiple text shadow */
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
    
    /* Box Shadow */
    -moz-box-shadow: 10px 10px 5px grey;
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); /* x y blur-radius color */
    /* Multiple box shadow */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
}

/* Transform! */
transform {
    transform: none,transform-functions,initial,inherit;
    /* -webkit-, -ms-, -moz-, -o-
        use : ใช้เปลี่ยนแปลง เคลื่อนย้าย เช่น ย้ายตำแหน่ง หมุุน หด ขยาย ...
        default : none
        transform-functions : translate(x,y) >> เลื่อนตำแหน่ง x y เช่น(10px, 5px) ถ้า x y เป็น % จะหมายถึง % width height ของ element ตัวมันเอง,
                            scale(x,y) >> ขยายขนาด x y เป็นจำนวนเท่า เช่น(2, 3),
                            rotate(deg) >> หมุน (-180deg), ...
        Go to https://www.w3schools.com/cssref/css3_pr_transform.asp for more detail
    */
}

/* Transition! */
transition {
    /* ใช้ setting element เมื่อมีการเปลี่ยนแปลง */
    /* -webkit-, -moz-, -o- */
    transition: property duration timing-function delay;
    /* ถ้าแยกส่วน ได้หลายๆ Property ตามลำดับ*/
    transition-property: property1, property2, propertyN;
    transition-duration: duration1, duration2, durationN;
    transition-timing-function: timing-function1, timing-function2, timing-functionN;
    transition-delay: delay1, delay2, delayN;
     /*
        property : default={all}, custom={with, height, color, etc.}
        duration : default={0s}, custom={xs}
        timing-function : default={ease}, custom={linear,ease,ease-in,ease-out,ease-in-out,step-start,step-end,steps(int,start|end),cubic-bezier(n,n,n,n),initial,inherit}
        delay : default={0s}, custom={xs}
     */
}

/* Animation!! */
/*  กำหนดชื่อ และ property ในแต่ละ step */
/* เมื่อ animate จะไม่ส่งผลต่อสิ่งรอบข้าง */
@keyframes example1 {
    from {background-color: red;}
    to {background-color: yellow;}
}
@keyframes example2 {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}
/* นำ keyframs ไปใช้ทำให้ element เกิด animation */
div {
    /* -webkit-, -moz-, -o- */
    animation: name duration timing-function delay iteration-count direction fill-mode play-state;
    animation-name: example1; /* Keyframs name */
    animation-delay: delay; /* default : 0s */
    animation-direction: direction; /* default={normal}, custom={normal,reverse,alternate,alternate-reverse} */
    animation-duration: duration; /* default : 0s */
    animation-fill-mode: fill-mode; /* default={none}, custom={none,forwards,backwards,both} */
    animation-iteration-count: iteration-count; /* default={1}, custom={1,2,3,4,...,n} */
    animation-play-state: play-state; /* default={running}, custom={paused,running} */
    animation-timing-function: timing-function; /*default={ease}, custom={linear,ease,ease-in,ease-out,ease-in-out,step-start,step-end,steps(int,start|end),cubic-bezier(n,n,n,n)}*/
    /* Go to https://www.w3schools.com/css/css3_animations.asp for more information */
}
/* Media query, Flex box ??? */