คุณสมบัติ elevation คุณสมบัติ elevation กำหนดตำแหน่งแนวตั้งของแหล่งเสียง ในพื้นที่เสียง 3 มิติ (3D sound space) ใช้ใน CSS Speech Module ค่าที่ใช้ได้ ค่าคำอธิบาย angle (-90deg ถึง 90deg)มุมแนวตั้ง: 0deg = แนวราบ (ระดับหู), 90deg = ด้านบน, -90deg = ด้านล่าง belowเทียบเท่า -90de

เอฟเฟกต์ Fade Out Up องค์ประก्ञानจางหายพร้อมเลื่อนขึ้นเล็กน้อย ใช้สำหรับการ dismiss แบบนุ่มนวล ไม่มีการเด้ง (bounce) โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background

คุณสมบัติ size ใน @page คุณสมบัติ size ภายใน @page rule ใช้กำหนดขนาดและทิศทางของกล่องหน้า (page box) สำหรับการพิมพ์ (Print Media) ค่าที่ใช้ได้ 4 แบบ ค่าคำอธิบาย autoขนาดและทิศทางตามกระดาษเป้าหมาย (ค่าเริ่มต้น) landscapeบังคับทิศทางแนวนอน ด้านยาวแนวนอน ขนาดเท่ากระดาษเป้าหมาย

เอฟเฟกต์ Bounce In Down องค์ประกอบสไลด์ลงมาจากด้านบน เด้งเกินจุด แล้วกลับมาตรงตำแหน่ง ใช้สำหรับ header, notification bar, dropdown menu โค้ดตัวอย่างสมบูรณ์ (แก้ไข typo ในต้นฉบับ) <html> <head> <style> .animated { background-image: url(/css/images/logo.png); back

คุณสมบัติ background-size คุณสมบัติ background-size ควบคุมขนาดของภาพพื้นหลัง ช่วยให้ปรับภาพให้พอดีกับพื้นที่ได้อย่างยืดหยุ่น ค่าที่ใช้ได้ รูปแบบตัวอย่างคำอธิบาย ความกว้าง ความสูง200px 100pxกำหนดขนาดแน่นอน ค่าเดียว200pxความกว้าง = ค่าที่กำหนด, ความสูง = auto covercoverครอบ

เอฟเฟกต์ Bounce In Left องค์ประกอบสไลด์เข้ามาจากซ้าย เด้งเกินจุด แล้วกลับมาตรงตำแหน่ง คู่คู่กับ Bounce In Right โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-posi

คุณสมบัติ background-origin คุณสมบัติ background-origin ระบุตำแหน่งจุดเริ่มต้น (origin) ของภาพพื้นหลัง ว่าจะเริ่มวาดจากขอบเขตไหน ค่าที่ใช้ได้ ค่าจุดเริ่มต้น (0,0) border-boxมุมขอบด้านนอก (default) padding-boxมุมขอบ padding content-boxมุมขอบเนื้อหา ความแตกต่างระหว่าง

เอฟเฟกต์ Bounce In Right องค์ประกอบสไลด์เข้ามาจากขวา เด้งเกินจุด แล้วกลับมาตรงตำแหน่ง ใช้สำหรับ sidebar, panel, หรือ element ที่เข้ามาจากขวา โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-

เอฟเฟกต์ Bounce Out เอฟเฟกต์นี้แตกต่างจากทิศทางอื่นๆ โดยใช้ transform: scale() แทน translate องค์ประกอบจะขยายเล็กน้อย แล้วย่อลงจนหายไป ใช้เหมาะกับการ dismiss แบบเน้นจุดศูนย์กลาง โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/lo

เอฟเฟกต์ Bounce Out Down เอฟเฟกต์นี้ทำให้องค์ประกอบเด้งลงไปทางด้านล่างพร้อมจางหาย ใช้เหมาะกับการซ่อน element แบบมีชีวิตชีวา โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; bac

เอฟเฟกต์ Bounce In Up เอฟเฟกต์นี้ทำให้องค์ประกอบเด้งขึ้นมาจากด้านล่างพร้อมแอนิเมชัน overshoot (เกินจุดแล้วกลับมา) ใช้เหมาะกับการโชว์ modal, toast, หรือ element เข้ามาบนหน้าจอ โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.

เอฟเฟกต์ Bounce Out Left เอฟเฟกต์นี้ทำให้องค์ประกอบเด้งออกไปทางซ้ายพร้อมจางหาย คล้ายกับการโดนเตะออกทางซ้าย ใช้เหมาะกับการ dismiss element หรือ transition ระหว่างหน้า โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png);

คุณสมบัติ background-clip คุณสมบัติ background-clip ใช้ประกาศพื้นที่ที่พื้นหลังจะถูกวาด (painting area) คล้ายกับบทความก่อนหน้าแต่เน้นการใช้งานจริง ค่าที่ใช้ได้ ค่าพื้นที่ที่วาด border-boxครอบคลุมถึงขอบด้านนอก (default) padding-boxครอบคลุมถึง padding (ไม่รวม border) conten

คุณสมบัติ background (Shorthand) คุณสมบัติ background เป็น shorthand ที่รวมคุณสมบัติพื้นหลังทั้งหมดไว้ในบรรทัดเดียว ช่วยลดโค้ดและเพิ่มความอ่านง่าย ลำดับค่าที่แนะนำ background: <color> <image> <repeat> <attachment> <position>; คุณสมบัติย่อยคำอธิบาย ba

คุณสมบัติ pause (Shorthand) คุณสมบัติ pause เป็น shorthand property ที่รวม pause-before และ pause-after ไว้ในการประกาศเดียว รูปแบบการใช้งาน ค่าเดียว: ใช้สำหรับ pause-before และ pause-after เท่ากัน สองค่า: ค่าแรก = pause-before, ค่าที่สอง = pause-after ตัวอย่าง <style> /* pause-befor

วัตถุประสงค์ของ pause-before คุณสมบัติ pause-before ระบุช่วงเวลาหน่วง (pause) ที่ควรสังเกต ก่อน อ่านเนื้อหาขององค์ประกอบนั้นๆ ใช้ในบริบทของ Speech Media (สื่อเสียง) เพื่อปรับปรุงประสบการณ์การอ่านออกเสียง ค่าที่รองรับ ค่าคำอธิบาย time (วินาที/มิลลิวินาที)ระบุเวลาหน่วงแบบสัมบูรณ์ เ

คุณสมบัติ background-clip คุณสมบัติ background-clip ใช้กำหนดพื้นที่ที่พื้นหลัง (สีหรือภาพ) จะถูกวาด แสดงผล จะครอบคลุมถึงขอบเขตไหน ค่าที่ใช้ได้ ค่าคำอธิบาย border-boxวาดพื้นหลังจนถึงขอบด้านนอก (ค่าเริ่มต้น) padding-boxวาดพื้นหลังจนถึงขอบ padding (ไม่รวม border) content-box

คุณสมบัติ background-image คุณสมบัติ background-image ใน CSS ใช้สำหรับระบุภาพพื้นหลังขององค์ประกอบ ใช้ได้กับทุก element ที่เป็นบล็อกหรือ inline-block ตัวอย่างการใช้งาน โค้ดด้านล่างสาธิตการตั้งค่าภาพพื้นหลังพร้อมขอบและระยะห่างภายใน: <html> <head> <style> #demo { border

ทำความเข้าใจ CSS Animation แอนิเมชัน (Animation) คือกระบวนการสร้างเอฟเฟกต์การเคลื่อนไหวและเปลี่ยนแปลงลักษณะขององค์ประกอบบนหน้าเว็บ CSS รองรับเอฟเฟกต์แอนิเมชันหลากหลายรูปแบบเพื่อควบคุมการเคลื่อนไหวของอีเวนต์ต่างๆ บทบาทของ Keyframes ภายใต้แนวคิดของ Animation แล้ว Keyframes เป็นกลไกสำคัญที่ใช้ควบคุมข

คุณสมบัติ background-origin ใช้ระบุตำแหน่งเริ่มต้นของ Background Image เทียบกับ Box Model ตัวอย่าง <html> <head> <style> #demo { border: 5px dashed red; padding: 10px; background-image: url(https://www.tutorialspoint.com/css/images/cs