Border-radius: ทำมุมโค้งให้ Box/Element Property border-radius ทำมุมโค้งได้ทุก element (div, img, button, input, table) รองรับ 1-4 ค่า และ horizontal/vertical radius แยกกันได้ โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Gene

Border Image: ใช้รูปภาพเป็นขอบแทนสี/เส้นธรรมดา Property border-image ใช้รูปภาพตัดเป็น 9 ส่วน (9-slice: 4 มุม, 4 ขอบ, 1 กลาง) แล้ว scale/repeat/tile ตามขนาด border โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana,

Multiple Backgrounds: ใส่หลายพื้นหลังใน Element เดียว Property background-image รองรับหลายค่า คั่นด้วยจุลภาค (comma) เรียงจากบนลงล่าง (first = topmost) แต่ละ background ควบคุม background-position, repeat, size แยกได้ โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> b

Radial Gradient Shape: Circle vs Ellipse พารามิเตอร์แรกของ radial-gradient() กำหนดรูปทรง: circle (วงกลมสมบูรณ์) หรือ ellipse (default, ไข่ตาม aspect ratio ของกล่อง) โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana

3D Transforms: ย้าย/หมุนใน 3 มิติ (X, Y, Z Axis) 3D Transforms เพิ่มแกน Z ใช้ perspective บน parent ให้ความลึก ฟังก์ชัน: rotateX/Y/Z, translateX/Y/Z, translate3d, scale3d, matrix3d ฟังก์ชัน 3D Transform หลัก Functionคำอธิบาย rotateX(angle)หมุนรอบ X axis (โน้มนอน) rotateY(angle)หมุนรอบ

CSS Transitions: ทำให้การเปลี่ยนแปลง Property นุ่มนวล transition property กำหนด property ที่จะ transition, duration, timing function, delay ใช้กับ pseudo-classes (:hover, :focus) หรือ class toggle ด้วย JS โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> .container di

Radial Gradient Size: ควบคุมขนาดวงกลม/ไข่ของ Gradient ใน radial-gradient() พารามิเตอร์ที่ 2 (หลัง shape) กำหนดขนาด: farthest-corner (default), closest-side, closest-corner, farthest-side, หรือระบุ width height (px, %) โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style>

Text-overflow: จัดการข้อความล้นพื้นที่ (Ellipsis/Clip) Property text-overflow ควบคุมการแสดงเมื่อข้อความยาวกว่ากล่อง (ต้องใช้ร่วม white-space: nowrap + overflow: hidden) โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Ver

Display Icon from Sprite: ใช้ Background-position แสดงส่วนของรูป คล้ายบทก่อนแต่โฟกัสที่ไอคอนเดี่ยว (Twitter, Facebook) ใช้ background-position เลื่อกตำแหน่งใน sprite sheet โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva,

CSS Image Sprite: รวมหลายรูปในไฟล์เดียว ลด HTTP Requests Image Sprite = รวมไอคอน/รูปเล็กหลายตัวในรูปภาพใหญ่ 1 ไฟล์ ใช้ background-position แสดงเฉพาะส่วนที่ต้องการ ลด request เร็วขึ้น โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahom

Fallback Color: สีสำรองสำหรับ Browser ที่ไม่รองรับ RGBA/HSLA Browser เก่า (IE 8-, Opera 9-) ไม่รองรับ rgba() / hsla() วิธีแก้: ประกาศสีทึบ (hex, rgb, named color) ก่อน แล้วค่อย rgba – Browser ที่ไม่รองรับจะใช้ค่าแรก Browser ใหม่จะใช้ค่าทับซ้อน (cascade) โค้ดตัวอย่าง <!DOCTYPE html> <html&g

Attribute Selectors: เลือก Element ตาม Attribute/Value CSS Attribute Selectors เลือก element โดยดู attribute แทน class/id เหมาะกับ Form styling (input types) หรือ dynamic attributes Attribute Selector Patterns Selectorคำอธิบาย [attr]มี attribute นี้ (ไม่สน value) [attr=value]attribute

Linear vs Radial Gradient: ความแตกต่างและการใช้งาน Linear Gradient: ไล่สีตามเส้นตรง (ทิศทางระบุได้) Radial Gradient: ไล่สีจากจุดศูนย์กลางขยายออกเป็นวงกลม/ไข่ โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body{ font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-s

Linear Gradient Angle: ควบคุมทิศทางด้วยองศา (Degrees) แทน keyword (to right, to top left) ใช้ angle (deg, rad, grad, turn) ควบคุมทิศทางแม่นยำ 0deg = to top, 90deg = to right, 180deg = to bottom, 270deg = to left โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body {

Linear Gradient หลายสี: กำหนด Color Stops มากกว่า 2 สี linear-gradient() รับ color stops ไม่จำกัดจำนวน สร้างไล่สีสับสน/รุ้งเรือง ได้โดยระบุสีต่อเนื่องกัน (หรือระบุตำแหน่ง %) โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva

Linear Gradient กับ Transparency: สร้างไล่สีโปร่งใสด้วย RGBA ใช้ linear-gradient() กำหนด color stops เป็น rgba(r, g, b, alpha) โดย alpha = 0 (โปร่งใส) ถึง 1 (ทึบ) สร้างเอฟเฟกต์ fade out โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Ta

Box-shadow & Text-shadow: เพิ่มความลึกและมิติให้ UI box-shadow ใส่เงาให้กล่อง (block element) text-shadow ใส่เงาให้ข้อความ ทั้งคู่รองรับหลายเงา (comma-separated) สร้างเอฟเฟกต์ซ้อนได้ Syntax box-shadow: h-offset v-offset blur-radius spread-radius color inset; text-shadow: h-offset v-offset blur-radi

2D Transform Functions: ย้าย, หมุน, ขยาย, ทวistes องค์ประกอบ CSS transform property ใช้ฟังก์ชัน 2D transform เปลี่ยนรูปทรง/ตำแหน่งองค์ประกอบโดยไม่กระทบ Document Flow (ไม่ผลักองค์ประกอบอื่น) ฟังก์ชัน 2D Transform หลัก Functionคำอธิบายตัวอย่าง translate(x, y)เลื่อนตาม X, Y axistranslate(30p

::selection Pseudo-element: จัดสไตล์ข้อความที่ถูก Highlight ใช้ ::selection (standard) และ ::-moz-selection (Firefox legacy) เปลี่ยนสีพื้นหลังและสีข้อความเมื่อผู้ใช้เลือก (highlight) ข้อความ โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> ::-moz-selection { color: r

Flexbox (Flexible Box Layout): โมดเลย์เอาต์ทรงพลังของ CSS3 Flexbox จัดการ layout แบบ 1 มิติ (Row หรือ Column) จัดการ alignment, distribution, ordering, sizing ได้อัตโนมัติ เหมาะกับ UI components, navigation, card grids, form layouts Container Properties (บน Flex Container) Propertyคำอธิบาย