Parallax Effect: พื้นหลังเลื่อนช้ากว่าเนื้อหา สร้างความลึก ใช้ background-attachment: fixed บนพื้นหลังรูปภาพ ทำให้ภาพคงที่ตำแหน่งขณะ scroll เนื้อหาเลื่อนผ่าน สร้างความรู้สึก 3D/ความลึก โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width,

Aspect Ratio ด้วย Padding-Top Hack (รองรับทุก Browser) ก่อนมี property aspect-ratio ใช้เทคนิค padding-top: % บน container (position: relative) แล้ววางเนื้อหา position: absolute ครอบเต็ม พื้นที่ padding จะสร้างความสูงสัมพันธ์กับความกว้าง โค้ดตัวอย่าง (4:3) <!DOCTYPE html> <html> <head

Toggle Dark Mode: เปลี่ยนธีมสีทั้งหน้าด้วย Class บน Body วิธีมาตรฐานคือ toggle class .dark-mode บน <body> แล้วกำหนดสีพื้นหลัง/ข้อความใน CSS ตาม class นั้น ใช้ JavaScript เพียงฟังก์ชัน toggle class โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=wi

Tree View แบบ Collapsible: โครงสร้างโฟลเดอร์/เมนูหลายระดับ ใช้ nested <ul><li> ร่วมกับ CSS สำหรับไอคอน chevron (▶/▼) และ JavaScript สลับ class .active (แสดง/ซ่อน) และ .rootTree-down (หมุนไอคอน) โค้ดตัวอย่าง { item.parentElement.querySelector(.children).classList.toggle(active);

Transform Scale: ทำให้องค์ประกอบใหญ่ขึ้นนุ่มนวลเมื่อ Hover ใช้ transform: scale() ร่วมกับ transition สร้างเอฟเฟกต์ซูมเข้า/ออก ใช้ได้กับรูปภาพ, การ์ด, ปุ่ม, หรือองค์ประกอบใดๆ โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-sca

3D Flip Card: โชว์หน้า-หลังเมื่อ Hover ด้วย CSS 3D Transform สร้างการ์ดที่พลิก 180 องศาแกน Y เมื่อ hover ใช้ transform-style: preserve-3d, backface-visibility: hidden และ transform: rotateY(180deg) โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=d

Flexbox Centering สำหรับองค์ประกอบทั่วไป เทคนิคเดียวกับการจัดปุ่ม แต่อาจเป็นข้อความ, รูปภาพ, การ์ด หรือ container ย่อย ใช้ display: flex + justify-content: center + align-items: center โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tah

Flexbox Centering: จัดกึ่งกลางแบบสมบูรณ์แบบ ใช้ display: flex ร่วมกับ justify-content: center (แนวนอน) และ align-items: center (แนวตั้ง) บน Container จัดให้ปุ่ม (หรือองค์ประกอบใดๆ) อยู่ตรงกลางทั้ง 2 แกน โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-fam

Animation Text-Shadow สร้างเอฟเฟกต์ส่องแสงสะพรั่ง ใช้ text-shadow หลายชั้น ร่วมกับ @keyframes animation ทำให้ข้อความดูเหมือนเรืองแสงกระพริบสลับสี สร้างบรรยากาศไซเบอร์พังค์/นีออนได้ง่าย โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width,

Fixed Footer: ค้างอยู่ขอบล่างจอตลอดเวลา ใช้ position: fixed กับ bottom: 0; left: 0; width: 100% ทำให้ Footer อยู่ตำแหน่งเดิมตลอดแม้จะ scroll เนื้อหาเหนือ โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1> <style

Position Sticky: ติดตอน Scroll ถึงจุดที่กำหนด position: sticky เป็น hybrid ของ relative และ fixed – ปกติอยู่ใน flow ปกติ แต่เมื่อ scroll จนถึง threshold (top, bottom, left, right) จะกลายเป็น fixed ค้างอยู่ที่ตำแหน่งนั้น โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=vi

ใช้ display: table และ table-cell ทำคอลัมน์เท่าสูง วิธีคลาสสิกก่อนยุค Flexbox/Grid ใช้ display: table บน container และ display: table-cell บนคอลัมน์ ทำให้คอลัมน์ทุกตัวสูงเท่ากันอัตโนมัติ ไม่ต้องกำหนดความสูงคงที่ โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport c

Clearfix Hack: ทำให้ Container ครอบ Float ได้ถูกต้อง เมื่อใช้ float บนองค์ประกอบภายใน Container แล้ว Container จะหดรูป (collapsed height) เพราะไม่นับความสูงของลูกที่ float แก้ได้ด้วย Clearfix Hack โดยใช้ overflow: auto หรือ pseudo-element ::after โค้ดตัวอย่างเปรียบเทียบ <!DOCTYPE html> <ht

สลับตำแหน่ง Float ซ้าย-ขวา ตามขนาดหน้าจอ ด้วย Media Query เทคนิคนี้ใช้ float: left/right ร่วมกับ @media query เพื่อให้กล่องลอยสลับตำแหน่งเมื่อหน้าจอเล็กลง (เช่น มือถือ) ช่วยให้เลย์เอาต์อ่านง่ายบนทุกขนาดจอ โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=

ใช้ scroll-behavior: smooth เพื่อการเลื่อนหน้าจอที่นุ่มนวล CSS property scroll-behavior: smooth ทำให้การกระโดดไปยัง anchor link (เช่น href=#section2) เลื่อนอย่างนุ่มนวล ไม่กระปริบ ทำได้โดยเพียงบรรทัดเดียว ไม่ต้องใช้ JavaScript โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style

เทคนิค Gradient Background เปลี่ยนสีขณะ Scroll เอฟเฟกต์นี้ทำให้พื้นหลังไล่สี (Gradient) เปลี่ยนไปเรื่อยๆ ขณะที่ผู้ใช้เลื่อนหน้าจอ (Scroll) ใช้ได้โดยการกำหนด height: 250vh ให้ body เพื่อสร้างพื้นที่เลื่อนยาว และใช้ linear-gradient หลายสี โค้ดตัวอย่าง <!DOCTYPE html> <html> <head>

ตัวอย่างการสร้าง Callout Message แบบคงที่ (Fixed Position) Callout message คือกล่องข้อความที่แสดงมุมหน้าจอ (มักอยู่มุมขวาล่าง) เพื่อดึงดูดความสนใจผู้ใช้ เช่น แจ้งโปรโมชั่น ข่าวสาร หรือการกระทำที่ควรทำ ทำได้ด้วย CSS position: fixed และ JavaScript สำหรับปิดกล่อง โค้ดตัวอย่างเต็ม <!DOCTYPE html>

ตัวอย่างโค้ดสร้างโน้ตแบบต่างๆ ด้วย CSS การสร้างกล่องข้อความแบบโน้ต (Notes) ที่มีสีและสไตล์แตกต่างกัน เพื่อแสดงข้อความเตือน สำเร็จ หรือข้อมูลทั่วไป สามารถทำได้ง่ายๆ ด้วย CSS โดยใช้คลาส (class) ควบคู่กับ border-left และสีพื้นหลังที่แตกต่างกัน โครงสร้าง HTML และ CSS <!DOCTYPE html> <html>

ในการจัดสไตล์ Labels ด้วย CSS โค้ดมีดังนี้ − ตัวอย่าง <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Taho

ในการสร้างวงกลมว่าง (Empty Circles) ด้วย CSS โค้ดมีดังนี้ − ตัวอย่าง <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe