CSS Property

CSS Property

การใส่ styles ให้กับเว็บไซต์ เราจะใส่ selector + css property

index.css

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: none;
}

เข้าใจ UI Design

การรู้ CSS Property ทั้งหมด ไม่ได้หมายความว่าจะออกแบบ UI Design ตามที่คาดหวังได้ มันต้องประยุกต์ให้เข้ากับ UI ที่ต้องการ และ

วิธีการเข้าใจการออกแบบ UI ที่ดีที่สุดคือ ให้เรียนรู้จาก Framer

Design มีคำต่างๆที่คล้ายกับ CSS Property เพราะฉะนั้นถ้าออกแบบ UI ด้วย Framer ได้ จะเข้าใจ CSS Property ต่างๆ และเข้าใจ UI Design

⚡ CSS Handoff ได้ในใช้ Desktop เท่านั้น เพราะฉะนั้นต้องโหลด Framer Desktop

คำแนะนำ

• เข้าไปที่ Framer Template แล้วลองเปิดใน Project มาเล่นดู

การเรียนรู้การออกแบบ UI ผ่าน Framer จะช่วยให้เข้าใจง่ายขึ้น

CSS Property มีหลายอย่างเช่น Display, Animation, Effect, Typography, Color, Transition, Transform แต่การจะเข้าใจสิ่งเหล่านี้แนะนำว่าควรเข้าใจ UI Design ก่อน

แนะนำให้เข้าใจ UI Design ผ่าน Framer

คำแนะในการใช้

1. กด ctrl + space เพื่อให้ขึ้น Autocomplete

2. ใช้ AI

ใช้ Github Copilot Windsurf Cursor Continue Cody ก็ได้

Layout

• Flexbox
• Grid
• Position

Display

Value	คำอธิบาย
block	ขึ้นบรรทัดใหม่และกินพื้นที่เต็มแนวนอน
inline	แสดงผลต่อเนื่องในบรรทัดเดียวกัน ไม่สามารถกำหนด width, height ได้
inline-block	แสดงผลต่อเนื่องในบรรทัดเดียวกัน และสามารถกำหนด width, height ได้
flex	จัดการ layout แบบยืดหยุ่น เหมาะสำหรับ 1 มิติ (แนวนอนหรือแนวตั้ง)
grid	จัดการ layout แบบตาราง เหมาะสำหรับ 2 มิติ
none	ซ่อน element โดยไม่กินพื้นที่
hidden	ซ่อน element แต่ยังกินพื้นที่

animation

Property	คำอธิบาย
@keyframes	ใช้กำหนดลำดับของการเปลี่ยนแปลงสไตล์
animation-name	ระบุชื่อของ animation ที่จะใช้งาน
animation-duration	กำหนดระยะเวลาในการเล่น animation
animation-timing-function	กำหนดรูปแบบการเร่ง/ช้าของ animation
animation-delay	กำหนดเวลาหน่วงก่อนเริ่ม animation
animation-iteration-count	จำนวนครั้งที่ animation เล่นซ้ำ
animation-direction	กำหนดทิศทางของ animation (เช่น normal, reverse)

ตัวอย่างการใช้งาน

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.box {
    animation-name: fade-in;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Effect

Category	Value	คำอธิบาย
appear	visible	แสดง element บนหน้าเว็บ
appear	hidden	ซ่อน element แต่ยังคงพื้นที่ไว้
hover	pointer	เปลี่ยน cursor เป็นรูป pointer เมื่อ hover
hover	highlight	เปลี่ยนสีพื้นหลังเมื่อ hover
press	active	เปลี่ยนสถานะเป็น active เมื่อกด
press	focus	เปลี่ยนสถานะเป็น focus เมื่อกด
loop	infinite	ทำให้ animation loop ไม่มีที่สิ้นสุด
loop	finite	ทำให้ animation loop ตามจำนวนครั้งที่กำหนด
drag	draggable	ทำให้ element สามารถลากได้
drag	non-draggable	ทำให้ element ไม่สามารถลากได้

Box Model

• Margin
• Padding
• Border
• Box-sizing

Typography

Property	คำอธิบาย
font-family	ระบุประเภทของฟอนต์ที่จะใช้งาน เช่น Arial, Tahoma, หรือฟอนต์สำรอง
font-size	กำหนดขนาดของฟอนต์ เช่น 16px, 1.2em, หรือ %
font-weight	กำหนดความหนาของฟอนต์ เช่น normal, bold, หรือค่าตัวเลข (100-900)
font-style	กำหนดสไตล์ของฟอนต์ เช่น normal, italic, หรือ oblique
letter-spacing	กำหนดระยะห่างระหว่างตัวอักษร (kerning)
line-height	กำหนดความสูงของบรรทัด
text-align	กำหนดการจัดแนวข้อความ เช่น left, center, right, หรือ justify
text-transform	กำหนดการเปลี่ยนรูปแบบตัวอักษร เช่น uppercase, lowercase, capitalize
word-spacing	กำหนดระยะห่างระหว่างคำ
white-space	ควบคุมการจัดการช่องว่างในข้อความ เช่น normal, nowrap, pre
color	กำหนดสีของข้อความ
text-shadow	เพิ่มเงาให้กับข้อความ
font-variant	กำหนดลักษณะพิเศษของฟอนต์ เช่น small-caps

.typography-example {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
    letter-spacing: 0.5px;
    text-align: justify;
    color: #333333;
    text-transform: capitalize;
}

คำแนะนำเพิ่มเติม

• เลือกฟอนต์ที่เหมาะสมกับการออกแบบ เช่น ฟอนต์ที่อ่านง่ายสำหรับเนื้อหา และฟอนต์ตกแต่งสำหรับหัวข้อ
• ใช้ @font-face หรือ @import เพื่อนำเข้าฟอนต์จากภายนอก เช่น Google Fonts
• ตรวจสอบความสม่ำเสมอของ line-height และ font-size เพื่อให้ข้อความดูเป็นระเบียบ

Color

Animation

Transition

Transform