ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{ font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; } ul { list-style: none; } ul li{

ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .vLine { border-left: 6px solid rgb(128, 0, 128); height: 500px; margin-left: 5%; } </style> </head

ตัวอย่างโค้ด <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1" /> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .dashed { border-top: 3px da

ตัวอย่างโค้ด <!DOCTYPE html> <html> <style> body { height: 100vh; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 0; } .timer { text-align: center; font-size: 60px; margin-top: 0px; color: white; } .b

ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0 auto; max-width: 800px; padding: 0 20px; font-family: Segoe UI, Tahoma, Geneva, Verdana, s

ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box;

ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: Arial; color: white; } h1{ padding:20px; } .left,.right { height: 100%;

Responsive Testimonial Cards: การ์ดรับรอง/รีวิวที่ปรับตัวตามหน้าจอ ใช้ Flexbox/Float + Media Query ทำให้รูปโปรไฟล์และข้อความจัดเรียงแนวนอนบน Desktop และซ้อนแนวตั้ง (center) บน Mobile (max-width: 500px) โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=wid

Cross-browser Image Opacity: รองรับ IE 8 และ Browser เก่าทั้งหมด เหมือนบทก่อนหน้าแต่เน้น <img> tag โดยเฉพาะ ใช้ opacity (standard) + filter: alpha(opacity=...) (IE 5-9) + -moz-opacity (Firefox < 0.9) + -khtml-opacity (Safari 1.x) โค้ดตัวอย่าง <!DOCTYPE html> <html> <head>

Advanced CSS Selectors: เลือก Element ได้ละเอียดและยืดหยุ่น รวม Combinators, Attribute selectors, Pseudo-classes, Pseudo-elements ที่ทรงพลังกว่า class/id selectors ธรรมดา Combinators Selectorชื่อคำอธิบาย A BDescendantB ภายใน A (ทุกระดับ) BDirect ChildB เป็นลูกโดยตรงของ A A + BAdj

Word-break Property: ควบคุมการขึ้นบรรทัดใหม่ของข้อความยาว Property word-break กำหนดว่าข้อความยาว (URL, คำยาว, string ไม่มี space) จะขึ้นบรรทัดใหม่อย่างไรเมื่อพื้นที่ไม่พอ โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, V

CSS Pseudo-classes: เลือก Element ตามสถานะพิเศษ Pseudo-class keywords (ขึ้นต้นด้วย :) เลือก element ตาม state: :hover, :focus, :active, :visited, :first-child, :nth-child(), :not(), :checked, :disabled, :valid, :invalid ฯลฯ โค้ดตัวอย่าง: Link States <!DOCTYPE html> <html> <head>

Cross-browser Opacity: รองรับ IE เก่า, Firefox เก่า, Safari เก่า Property opacity (standard) รองรับ Firefox 0.9+, Safari 2, Opera 9+, IE 9+, Chrome ทุก version สำหรับ browser เก่ากว่า ใช้ vendor prefixes และ filter โค้ดตัวอย่าง Cross-browser <!DOCTYPE html> <html> <head> <sty

Gradient Color Stops Position: ควบคุมตำแหน่งสีเปลี่ยนด้วย % หรือ Length ใน linear-gradient() และ radial-gradient()

2D Transformation: เปลี่ยนรูปทรงองค์ประกอบ 2 มิติ CSS3 2D Transforms ใช้ transform property กับฟังก์ชัน: matrix, translate, scale, rotate, skew เปลี่ยน visual rendering ไม่กระทบ layout flow ตารางฟังก์ชัน 2D Transform Sr.No.Value & Description 1matrix(n,n,n,n,n,n) – Matrix transforms 6 ค่า

2D Transform Functions: Translate, Scale, Rotate, Skew ฟังก์ชัน 2D transform ใช้กับ property transform เปลี่ยนรูปทรง/ตำแหน่งองค์ประกอบแบบ 2 มิติ ไม่กระทบ document flow ฟังก์ชันหลัก 4 ตัว Functionคำอธิบายตัวอย่าง Translateเลื่อนตาม X และ Y axistranslate(30px, 20px) Scaleขยาย/หด ขนาด X,

Flexbox Centering: จัดกึ่งกลางสมบูรณ์แบบ 2 แกน ใช้ display: flex + justify-content: center (main axis) + align-items: center (cross axis) จัด child ให้อยู่กึ่งกลาง container ทั้งแนวนอนและแนวตั้ง โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: Seg

Responsive Column Width: Media Query ปรับ Width ตาม Breakpoint ใช้ @media query ตรวจสอบ viewport width เปลี่ยน width ของคอลัมน์ เช่น 50% → 100% เมื่อจอแคบกว่า 700px โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana

Multiple Transitions: Transition หลาย Property พร้อมกัน ใช้ transition shorthand ระบุหลาย property คั่นด้วย comma แต่ละ property มี duration/timing/delay แยกกันได้ โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> .container div { width: 300px; height: 100px; bo

Transition Shorthand: รวม property, duration, timing, delay ในบรรทัดเดียว transition shorthand รวม 4 longhand properties สามารถระบุหลาย transitions คั่นด้วย comma โค้ดตัวอย่าง <!DOCTYPE html> <html> <head> <style> .container div { width: 300px; height: 100px; bor