Flex Shorthand: flex-grow, flex-shrink, flex-basis ในบรรทัดเดียว Property flex คือ shorthand ของ 3 ค่า: flex-grow (ขยาย), flex-shrink (หด), flex-basis (ขนาดฐาน) ควบคุมการแบ่งพื้นที่ใน flex container โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family:

Align-items: จัดตำแหน่ง Flex Items ตาม Cross Axis (แนวตั้งใน Row direction) ใน Flex container แนวหลัก (main axis) default คือ row (ซ้าย→ขวา) Cross axis คือแนวตั้ง ใช้ align-items จัด item ตาม cross axis โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-fam

Order Property: เปลี่ยนลำดับแสดงผล Flex Items โดยไม่ย้าย HTML Property order ควบคุมลำดับของ flex items ค่า default = 0 ค่าน้อยกว่าจะอยู่หน้า ค่ามากกว่าจะอยู่หลัง ใช้ได้เฉพาะใน Flex/Grid container โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: Se

Flex-wrap: ให้ Flex Items ขึ้นบรรทัดใหม่เมื่อพื้นที่ไม่พอ ค่า default ของ flex container คือ flex-wrap: nowrap (บีบอัดอยู่บรรทัดเดียว) ตั้งค่า flex-wrap: wrap เพื่อให้ items ขึ้นบรรทัดใหม่เมื่อกว้างเกิน container โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body

CSS Filter Effects: ปรับแต่งภาพ/องค์ประกอบแบบ Real-time Property filter ใช้ฟังก์ชันต่างๆ กรองภาพ: blur(), brightness(), contrast(), grayscale(), invert(), opacity(), saturate(), sepia(), hue-rotate(), drop-shadow(), url() (SVG filter) ฟังก์ชันหลักและค่า Functionค่าค่า Default blur()length

Media Queries: ใช้สไตล์ต่างกันตามขนาดอุปกรณ์ Media Queries ใช้ @media rule กรองเงื่อนไข (width, height, orientation, resolution) ใส่ CSS เฉพาะที่ตรงเงื่อนไข สร้าง Responsive Design โค้ดตัวอย่าง: เปลี่ยนสีพื้นหลังตาม Breakpoint <!DOCTYPE html> <html> <head> <meta name=viewport

Responsive Layout: เปลี่ยนจำนวนคอลัมน์ตาม Breakpoint ด้วย Media Query ใช้ float + width% + @media query ทำให้คอลัมน์ 4 คอลัมน์บน Desktop กลาย 2 คอลัมน์บน Tablet และ 1 คอลัมน์บน Mobile โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, i

CSS3 UI Properties: resize และ outline-offset CSS3 เพิ่ม property สำหรับควบคุม UI: resize (อนุญาตให้ผู้ใช้ปรับขนาด textarea/div) และ outline-offset (ระยะห่าง outline จากขอบ) โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { margin: 20px; border: 1px solid

Hover Transition: ทำให้การเปลี่ยนแปลงสไตล์นุ่มนวล ใช้ transition property บนสถานะปกติ (ไม่ใช่ :hover) เพื่อกำหนด property ที่จะ transition, duration, easing, delay เมื่อ hover เข้า/ออก จะนุ่มนวล โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=devi

CSS Arrows: ใช้ Border สร้างสามเหลี่ยม แล้วหมุนด้วย Transform เทคนิคคลาสสิก: กำหนด border สองด้าน (solid) สองด้าน transparent ความกว้างเท่ากัน จะได้สามเหลี่ยม แล้ว transform: rotate() ทิศทางต่างๆ โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=dev

CSS Shapes: สี่เหลี่ยม, วงกลม, รูปทรงอื่นๆ ด้วย Border-radius รูปทรงพื้นฐานสร้างได้จาก width, height, background, border-radius รูปทรงซับซ้อนใช้ clip-path, transform, ::before/::after โค้ดตัวอย่างพื้นฐาน <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-w

Full Height Element: ให้ Div เต็ม Viewport Height (100vh) จุดสำคัญคือ html, body { height: 100%; margin: 0; } แล้ว child ใส่ height: 100% หรือใช้ min-height: 100vh โดยตรง (vh = viewport height) โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <title>Page Title</title> &l

Browser Window Mockup: จำลอง UI เบราว์เซอร์ด้วย CSS สร้างแถบที่อยู่ (address bar) พร้อมปุ่มควบคุม (ปิด/ย่อ/ขยาย) และพื้นที่เนื้อหา ใช้ Flexbox/Float จัด layout ใส่ iframe หรือเนื้อหาจริงได้ โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-wi

ปรับแต่ง Scrollbar ให้เข้ากับธีมเว็บ ด้วย WebKit Pseudo-elements ใช้ ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb ปรับสี ความกว้าง มุมโค้ง เหมาะสำหรับ WebKit/Blink browsers (Chrome, Edge, Safari) โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta na

ซ่อน Scrollbar แต่ยังเลื่อนได้ (Scrollable without Scrollbar) ใช้ overflow: hidden บน body หรือ container จะซ่อน scrollbar และ **ปิดการเลื่อน** ทั้งหมด หากต้องการ **เลื่อนได้แต่ไม่เห็น scrollbar** ใช้เทคนิคอื่น โค้ดตัวอย่าง (ซ่อนและปิดการเลื่อน) <!DOCTYPE html> <html> <head> <

CSS Device Mockup: วาดโทรศัพท์/แท็บเล็ต/แล็ปท็อปด้วย CSS มาค่า ใช้ border, border-radius, ::after (ปุ่ม Home) และ iframe แสดงเว็บไซต์จริงภายในหน้าจอ จำลองรูปลักษณ์อุปกรณ์จริง โค้ดตัวอย่าง (Mobile) <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, i

ซ่อน Outline ของ Contenteditable Element เบราว์เซอร์จะแสดง outline (ขอบประกาย) รอบองค์ประกอบที่มี contenteditable=true เมื่อ focus ใช้ outline: none หรือ outline: 0px solid transparent เพื่อซ่อน โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body{ font-family: Sego

จัดสไตล์ Placeholder Text ด้วย Pseudo-element ::placeholder ใช้ ::placeholder (standard) ร่วมกับ vendor prefixes สำหรับบราว์เซอร์เก่า เพื่อเปลี่ยนสี ขนาด ฟอนต์ ของ placeholder text ใน input/textarea โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=

Shrink Header on Scroll: ลดขนาด Header เมื่อเลื่อนลง ใช้ JavaScript detect scroll position ( 50) แล้วเปลี่ยน font-size (หรือ padding/height) ของ fixed header พร้อม CSS transition ทำให้เล็กลงนุ่มนวล โค้ดตัวอย่าง 50) { document.querySelector(.header).style.fontSize = 20px; } else {

Pricing Table การ์ดราคา 3 แบบ ปรับตัวตามหน้าจอ ใช้ Flexbox/Float + Media Query ทำให้การ์ดราคาจัดเรียงแนวนอนบน Desktop และซ้อนแนวตั้งบน Mobile (max-width: 600px) โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1.0 />