เมื่อออกแบบองค์ประกอบ CSS อาจต้องการเอฟเฟกต์เงารอบกรอบ เช่น รูปภาพที่มีเงาใต้ภาพ นั่นคือที่มาของ CSS box-shadow property เพิ่มเงารอบกรอบองค์ประกอบ거의ทุก HTML element รองรับ รวมถึง rounded corners บทเรียนนี้อธิบาย box-shadow property พร้อมตัวอย่าง จนจบคุณจะสร้าง CSS shadows อย่างมืออาชีพ CSS Box Sh

การจัดการเนื้อหาที่ล้น (overflowing content) เป็นฟีเจอร์สำคัญของเว็บดีไซน์ที่ดี เมื่อออกแบบองค์ประกอบ อาจมีสถานการณ์ที่เนื้อหาไม่พอดีในขอบเขต ทำให้หน้าเว็บแสดงผลไม่คาดคิด นั่นคือที่มาของ CSS overflow property คุณสมบัติ overflow จัดการกรณีที่เนื้อหาใหญ่เกินพื้นที่ที่กำหนด บทเรียนนี้อธิบายการใช้ ove

การสร้าง animated web elements สำคัญสำหรับเว็บดีไซน์ เช่น ปุ่มที่ skew เมื่อ hover นั่นคือที่มาของ CSS transform property ใช้ย้าย หมุน skew และ scale องค์ประกอบ ทำให้เว็บโต้ตอบได้มากขึ้น บทเรียนนี้อธิบาย 2D transforms ใน CSS ด้วย transform property พร้อมตัวอย่าง จนจบคุณจะใช้ CSS 2D transforms อย่า

เมื่อออกแบบองค์ประกอบเว็บ อาจต้องการ outline (ขอบนอก) รอบองค์ประกอบ เช่น กล่องที่ต้องการเน้น ใส่ outline สีสันรอบๆ เพื่อดึงดูดสายตา นั่นคือที่มาของ CSS outline property เพิ่มเส้นด้านนอกขอบ (border) เพื่อให้องค์ประกอบโดดเด่น บทเรียนนี้อธิบายพื้นฐาน outlines และการใช้ CSS outline property พร้อมตัวอย

การออกแบบเว็บไซต์ที่เข้ากันได้กับอุปกรณ์ต่างๆ สำคัญสำหรับ accessibility ให้ผู้ใช้มากที่สุด นั่นคือที่มาของ CSS Media Queries ใช้ CSS rule เฉพาะเมื่อเบราว์เซอร์ตรงตามเงื่อนไขที่กำหนด เช่น ใช้ rule เฉพาะมือถือ บทเรียนนี้อธิบาย responsive web design พื้นฐาน การทำงานของ media queries และการออกแบบ medi

การเพิ่มเงาให้องค์ประกอบเป็นส่วนหนึ่งของการสร้าง header ดึงดูดสายตา เช่น header หลักให้มีเงา เพื่อโดดเด่นจากข้อความอื่น นั่นคือที่มาของ CSS text-shadow property เพิ่มเอฟเฟกต์เงาให้ข้อความ บทเรียนนี้อธิบายพื้นฐาน text shadows และการใช้ text-shadow property พร้อมตัวอย่าง CSS Text Shadow Property เงา

เมื่อออกแบบข้อความบนเว็บ อาจต้องการตกแต่ง เช่น underline เน้นข้อความสำคัญ หรือ line-through ข้อความเก่า นั่นคือที่มาของ CSS text-decoration property เพิ่ม underline, overline, และ line-through ให้บล็อกข้อความ บทเรียนนี้อธิบาย text-decoration property และ sub-properties 3 ตัว พร้อมตัวอย่าง จนจบคุณจ

Web forms สำคัญสำหรับเว็บไซต์หลายแห่ง รับข้อมูลจากผู้ใช้ เช่น อีเมลสำหรับสมัคร newsletter ด้วย CSS สามารถจัดสไตล์ form inputs สร้างฟิลด์สวยงามสำหรับผู้เยี่ยมชม บทเรียนนี้อธิบายพื้นฐาน HTML inputs และการจัดสไตล์ input fields ด้วย CSS จนจบคุณจะจัดสไตล์ input fields อย่างเชี่ยวชาญ HTML และ CSS Input

เมื่อออกแบบหน้าเว็บ คุณมักต้องกำหนดขนาดเฉพาะให้องค์ประกอบ เช่น กล่องความสูงเท่าไหร่ หรือข้อความกว้างเท่าไหร่ นั่นคือที่มาของคุณสมบัติ CSS height และ width ใช้กำหนดความสูงและความกว้างขององค์ประกอบ บทเรียนนี้อธิบายพื้นฐาน height/width properties และ min/max properties สำหรับ responsive elements จนจบ

เมื่อออกแบบเว็บไซต์ คุณอาจต้องการแสดงข้อมูลเพิ่มเติมเมื่อผู้ใช้ hover (ชี้เมาส์) ไปที่องค์ประกอบ เช่น หน้า FAQ ต้องการอธิบายคำศัพท์เทคนิคเมื่อ hover สร้างได้ด้วย Tooltip — ไม่มี HTML element เริ่มต้นสำหรับ tooltip จึงต้องรวม HTML และ CSS เอง บทเรียนนี้อธิบายการสร้าง tooltip ใน CSS พร้อมตัวอย่าง จน

คุณสมบัติ CSS border ใช้กำหนดขอบขององค์ประกอบ HTML คุณสมบัติย่อคือ border-width, border-color, และ border-style การเพิ่มขอบรอบองค์ประกอบบนหน้าเว็บเป็นฟีเจอร์สำคัญของเว็บดีไซน์ ขอบช่วยแยกเนื้อหา ทำให้ผู้คนอ่านข้อมูลง่ายขึ้น คุณสมบัติ border ใน CSS เป็น shorthand ของ 3 sub-properties ที่กำหนด styl

เมื่อออกแบบเว็บไซต์ คุณอาจต้องการเพิ่มเอฟเฟกต์เบลอ (blur) ให้ภาพ เช่น เว็บร้านกาแฟ ต้องการเบลอภาพเพื่อวางข้อความทับด้านหน้าให้อ่านง่าย นั่นคือที่มาของ CSS blur function ฟังก์ชัน blur ใช้เพิ่มเอฟเฟกต์เบลอให้ภาพ input ที่ระบุ ซึ่งนำไปใช้กับคุณสมบัติ filter เพื่อเบลอภาพ บทเรียนนี้อธิบายพื้นฐาน CSS bl

เมื่อออกแบบเว็บไซต์ คุณอาจต้องการนำสไตล์ไปใช้กับองค์ประกอบเมื่อผู้ใช้ เปิดใช้งาน (activate) เช่น เปลี่ยนสีปุ่มหรือลิงก์เมื่อผู้ใช้คลิก นั่นคือที่มาของ CSS :active pseudo-class ซึ่งเลือกองค์ประกอบที่ถูกเปิดใช้งานโดยผู้ใช้ เพื่อนำสไตล์ไปใช้ บทเรียนนี้อธิบายพื้นฐาน CSS pseudo-classes และการใช้ :activ

หัวข้อแรกที่คุณต้องเรียนรู้ก่อนเขียนโค้ด CSS คือ Syntax (ไวยากรณ์) คำว่า syntax อาจดูน่ากลัว แต่จริงๆ แค่หมายถึงกฎเกณฑ์ที่เราใช้เขียนโค้ด CSS กฎเหล่านี้เป็นมาตรฐาน ทำให้อ่านโค้ดของคนอื่นได้ง่าย ส่วนสำคัญที่สุดของ CSS syntax คือ 2 ส่วน: Selectors (ตัวเลือก) และ Declaration Blocks (บล็อกการประกาศ) Se

การเพิ่มพื้นที่ว่างระหว่างองค์ประกอบบนหน้าเว็บเป็นสิสำคัญสำหรับการออกแบบประสบการณ์ผู้ใช้ที่สวยงามและทำงานได้อย่างมีประสิทธิภาพ Margin ใช้สร้างพื้นที่ว่างรอบๆ องค์ประกอบ HTML เพื่อแยกองค์ประกอบนั้นจากวัตถุอื่นๆ บนหน้าเว็บ CSS Margin คืออะไร? คุณสมบัติ margin ใน CSS ใช้สร้างพื้นที่รอบๆ องค์ประกอบ พื้

Gradient คืออะไร? การเปลี่ยนสีแบบต่อเนื่องระหว่าง 2 สีขึ้นไป ใช้ผ่าน Property background หรือ background-image 2 ประเภทหลัก Linear Gradient: ไล่สีตามเส้นตรง Radial Gradient: ไล่สีแฉออกจากจุดศูนย์กลาง Linear Gradient ไวยากรณ์ background: linear-gradient(direction, color1, color2, ...); ทิศทา

Float Property จัดตำแหน่งองค์ประกอบให้ลอย (Float) ไปทางซ้ายหรือขวาของ Container ใช้กันทั่วไปสำหรับ **Wrap Text รอบรูปภาพ** และ **Layout แบบเก่า (Legacy)** ค่าหลัก left: ลอยซ้าย right: ลอยขวา none: ไม่ลอย (Default) inherit: 繼承จาก Parent ตัวอย่าง: รูปภาพลอยขวาข้อความ img { float: right; }

Opacity Property ควบคุมความโปร่งใส (Transparency) ค่า 0 ถึง 1 0 = โปร่งใสสมบูรณ์ (Invisible) 1 = ปกติ (Fully Opaque) 0.5 = โปร่งใส 50% img { opacity: 0.7; } ข้อควรระวัง: สืบทอดไปยัง Child Elements opacity ส่งผลต่อ **ทุก Child Elements** ภายใน ถ้าตั้ง Parent opacity: 0.5 → ลูกทุกตัวจะโปร่งใส

CSS Transition คืออะไร? ทำให้การเปลี่ยนแปลงค่า CSS Property เกิดขึ้น **อย่างนุ่มนวล (Smooth)** ภายในระยะเวลาที่กำหนด แทนที่จะเปลี่ยนทันที องค์ประกอบ 2 ส่วน CSS Property ที่ต้องการให้ Transition (เช่น background-color, width) Duration (ระยะเวลา) - ค่าเริ่มต้น 0s = ไม่มี Transition ตัวอย่าง: ป

ประเภท List ใน HTML Unordered List (<ul>): จุด (Bullet Points) Ordered List (<ol>): ตัวเลข/ตัวอักษร ลำดับ Definition List (<dl>): คำและคำอธิบาย CSS List Properties Propertyหน้าที่ list-style-typeรูปแบบ Marker (จุด, เลข, โรมัน, อักษร) list-style-positi