เราสามารถสร้างสไลเดอร์เลื่อนได้ไม่สิ้นสุดโดยใช้ CSS Flexbox ร่วมกับ JavaScript ตัวอย่างที่ 1: แคโรเซลพื้นฐาน <!DOCTYPE html> <html>    <head>       <style>          img {             width: 100%;

CSS Flexbox Property justify-content จัดเรียง Flex Items ตาม Main Axis ค่า space-between วาง Item แรกซ้ายสุด Item สุดท้ายขวาสุด และกระจาย Item กลางเท่าๆ กัน สร้าง Layout Left-Center-Right ได้อย่างง่ายดาย Syntax selector { display: flex; justify-content: flex-start | flex-end | center | space-be

CSS min() Function เลือกค่าที่น้อยที่สุดจากค่าที่กำหนด ทำให้ Logo Responsive ได้ในบรรทัดเดียว: ขนาดจะไม่เกินค่าสูงสุดที่กำหนด แต่จะย่อตาม Viewport ได้ Syntax selector { property: min(value1, value2, ...); } ตัวอย่างที่ 1: Logo Height Responsive <!DOCTYPE html> <html> <head> &

CSS image-rendering property ควบคุมอัลกอริทึมการ Scale ให้รูปภาพ (Upscale/Downscale) ช่วยรักษาความคมชัดหรือสร้างเอฟเฟกต์ Pixel Art ได้ ตัวอย่างเปรียบเทียบ 3 โหมด: smooth, pixelated, crisp-edges Syntax selector { image-rendering: auto | smooth | high-quality | crisp-edges | pixelated; } Values คำ

การทำให้ Element สูงเท่ากับ Viewport (100vh) ใช้สร้าง Full-screen Sections, Hero Areas, หรือ Sticky Sidebar ตัวอย่างนี้แสดง 2 วิธี: height: 100vh บน html/body และ Flexbox Layout Syntax selector { height: 100vh; /* 100% Viewport Height */ /* หรือ */ min-height: 100vh; /* สูงสุด 100vh แต่ขยายได

CSS filter: grayscale() ทำให้ภาพสีกลายเป็นขาวดำ (Grayscale) ได้ทันที ไม่ต้องแก้ไขไฟล์ภาพต้นฉบับ รองรับค่าระหว่าง 0% (สีปกติ) ถึง 100% (ขาวดำสมบูรณ์) และสามารถ Transition/Animate ได้ Syntax selector { filter: grayscale(100%); -webkit-filter: grayscale(100%); /* Safari 旧版本 */ } ตัวอย่างที่ 1: สล

CSS Display Module Level 3 เปิดตัว Two-value Syntax สำหรับ display property แยกระบุ Outer Display Type (Layout ใน Flow) และ Inner Display Type (Layout ของ Children) ทำให้ควบคุม Layout ได้ละเอียดขึ้น Syntax selector { display: ; } Outer Display Types (Box Generation) ValueBehavior bloc

CSS Property text-decoration-color ใช้กำหนดสีของเส้นตกแต่งข้อความ (Underline, Overline, Line-through) แยกจากสีตัวอักษร (color) ได้ ตัวอย่างนี้แสดงการเปลี่ยนสี Underline ของ Paragraph และ Link Syntax selector { text-decoration-color: ; /* Shorthand: text-decoration: underline red; */ } ตัวอย่าง

CSS Pseudo-element ::file-selector-button (และ ::-webkit-file-upload-button) ใช้จัดสไตล์ปุ่ม Browse/Choose File ของ <input type=file> ได้โดยตรง ไม่ต้องใช้ Hack ซ่อน Input แล้วสร้างปุ่มแทน Syntax selector::file-selector-button { /* Standard (Firefox) */ property: value; } selector::-webkit

Checkbox เริ่มต้นของ Browser จำกัดการจัดสไตล์ ใช้ appearance: none ปิด Native UI แล้วสร้าง Checkbox เองด้วย CSS Pseudo-elements ตัวอย่างนี้แสดง 2 รูปแบบ: Checkbox กลม และ Checkbox กำลังสี่มุมโค้ง Syntax selector { appearance: none; -webkit-appearance: none; -moz-appearance: none; /* Custom

Radio Buttons เริ่มต้นของ Browser ยากต่อการจัดสไตล์ ใช้ appearance: none ปิด Native Rendering แล้วสร้าง UI เองด้วย CSS (Border, Background, Pseudo-elements) ตัวอย่างนี้แสดง 2 รูปแบบ: Radio Button กลม และ Checkbox Style Toggle Syntax selector { appearance: none; -webkit-appearance: none; -moz-

CSS appearance property ใช้ควบคุมการแสดงผล Native UI ของ Browser (เช่น Dropdown Arrow, Spin Buttons, Checkbox, Radio) ตัวอย่างนี้แสดงวิธีซ่อน Arrow ของ <select> และ Spin Buttons ของ <input type=number> Syntax selector { appearance: none; -webkit-appearance: none; /* Safari, Chrome *

CSS Flexbox Property flex ควบคุมการขยาย/หดตัวของ Flex Items การตั้งค่า Fixed Width ให้ Item บางตัว ขณะที่อีกตัวเติมพื้นที่ว่าง ใช้ flex: 0 0 width (ไม่ Grow, ไม่ Shrink, Basis = Width) Syntax selector { flex: ; /* shorthand */ flex: none | auto | initial | | ; } Flex Values ValueMeanin

การเพิ่ม Animation ให้ Bullet Points ทำให้ List น่าสนใจและโต้ตอบได้มากขึ้น ตัวอย่างนี้แสดง 2 แบบ: Unordered List กับ Hover Effect และ Ordered List กับ Counter Animation Syntax li { list-style: /* value */; transition: /* properties */; } li:hover { /* hover styles */ } ตัวอย่างที่ 1: Unorder

CSS ::marker Pseudo-element ใช้จัดสไตล์ Bullet Points (หรือตัวเลขใน Ordered List) โดยตรง ไม่ต้องใช้ list-style-image หรือ Hack ด้วย ::before แล้ว Syntax selector::marker { property: value; } Properties ที่รองรับ Propertyคำอธิบาย colorสีของ Marker (Bullet/Number) font-sizeขนาด Marke

Comment Box (Speech Bubble) สร้างได้ง่ายด้วย CSS clip-path บน Pseudo-element (::after/::before) สร้าง หาง ชี้ไปที่ผู้พูด ตัวอย่างนี้แสดง 2 รูปแบบ: หางชี้ซ้าย และ หางชี้ขวา Syntax selector::after { content: ; position: absolute; clip-path: polygon(...); } ตัวอย่างที่ 1: Comment Box 2 ฝั่ง (Le

CSS clip-path property ทำให้เราตัดรูปทรง Element ได้ตาม Path ที่กำหนด สร้างสามเหลี่ยมได้ง่ายด้วย polygon() ไม่ต้องใช้ Border Hack แบบเก่า Syntax selector { clip-path: polygon(x1 y1, x2 y2, x3 y3); } ตัวอย่างที่ 1: สามเหลี่ยมมุมบนกึ่งกลาง (Upward Triangle) <!DOCTYPE html> <html> <h

CSS Properties writing-mode และ text-orientation ช่วยให้เราแสดงข้อความแนวตั้ง (Vertical Text) แต่ตัวอักษรยังคงอ่านได้แนวนอน (Horizontal Letters) เหมาะสำหรับภาษาเอเชียหรือ Design ที่ต้องการเอฟเฟกต์พิเศษ Syntax selector { writing-mode: /* value */; text-orientation: /* value */; } writing-mode V

4-Column Grid เป็น Layout พื้นฐานสำหรับ Dashboard, Product Grid, Feature List ตัวอย่างนี้สร้าง 4 คอลัมน์เท่าๆ กัน (25% แต่ละอัน) ใช้ Float Layout พร้อม Clearfix ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1 />

Expanding Grid คือ UI Pattern ที่คลิกที่ Item ใน Grid แล้ว Panel ขยายแสดงรายละเอียดเต็มความกว้าง (Full-width) ใต้ Item นั้นๆ ตัวอย่างนี้สร้าง 3 คอลัมน์ คลิกแล้วแสดง Tab Content ด้านล่าง ตัวอย่างโค้ด { item.style.display = none; }); document.getElementById(tabName).style.display = block;