ตัวอย่างการสร้างแอนิเมชันเปลี่ยนระยะห่างระหว่างคำ (word-spacing) ของข้อความ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { border: 2px solid blue; background: orange; animation: myanim 3s infinite; } @keyframes myanim { 50% {

CSS มีหน่วยวัดหลายแบบ สำคัญ 3 แบบคือ px (absolute), em (relative to font-size), และ % (relative to parent context) 1. PX (Pixels) - หน่วยคงที่ กำหนดขนาดคงที่ในหน่วยพิกเซลของหน้าจอ ไม่เปลี่ยนแปลงตาม context div { padding: 40px; } 2. EM - หน่วยสัมพัทธ์กับ font-size 1em = font-size ของ element นั้นๆ

คุณสมบัติ z-index ควบคุมลำดับการซ้อนทับ (stacking order) ของ positioned elements การ animate z-index จะทำให้ element กระโดด ขึ้นลงระหว่างชั้น (discrete steps) เพราะ z-index เป็น integer ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { position: absolute; }

Pseudo-class :active ใช้จับสถานะที่ element กำลังถูก กระทำ (activated) โดยผู้ใช้ เช่น กำลังถูกคลิก (mousedown) กำลังถูกกดปุ่มบนแป้นพิมพ์ หรือ กำลังถูกแตะ (touch) รูปแบบไวยากรณ์ a:active { color: green; } ตัวอย่างที่ 1: เปลี่ยนสีลิงก์ขณะคลิก <html> <head> <style> a:active {

Pseudo-class ใช้สำหรับจับสถานะพิเศษของ element เช่น :hover, :active, :focus และ :visited สำหรับลิงก์ (<a>) ที่ผู้ใช้เคยคลิก/เยี่ยมชมแล้ว รูปแบบไวยากรณ์ a:visited { color: green; } ตัวอย่างที่ 1: เปลี่ยนสีลิงก์ที่เคยเยี่ยมชม <html> <head> <style> a:visited { color: gre

คุณสมบัติ text-decoration-color ใช้กำหนดสีของเส้นประดับข้อความ (underline, overline, line-through) แยกต่างหากจากสีข้อความ (color) ตัวอย่างที่ 1: Overline สีเหลือง <!DOCTYPE html> <html> <head> <style> .demo { text-decoration: overline; text-decoration-color

ตัวอย่างการสร้างแอนิเมชันเปลี่ยน padding บน (padding-top) ของ element ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 350px; height: 150px; outline: 3px solid maroon; animation: myanim 3s infinite; } @keyframes myanim {

คุณสมบัติ voice-pitch ใน CSS Speech Module ใช้กำหนดพื้นฐานเสียง (baseline pitch) ของเสียงพูด คือ ความถี่พื้นฐานของเสียง รูปแบบไวยากรณ์ voice-pitch: [x-low | low | medium | high | x-high] | <frequency> ตัวอย่าง p { voice-pitch: low; } คำอธิบายค่า: Keywords: x-low (ต่ำมาก), low (ต่ำ),

คุณสมบัติ perspective กำหนดระยะห่างจากผู้ชมถึง z=0 plane (จุดที่ element ขนาดจริง) ค่ายิ่งน้อย = 3D effect ยิ่งเข้มข้น การ animate perspective จะทำให้ความลึกของ 3D transforms เปลี่ยนไป ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #demo1 { position: relative

ตัวอย่างการสร้างแอนิเมชันเปลี่ยนสี outline (outline-color) แยกต่างหาก ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 550px; height: 350px; outline: 2px solid blue; animation: myanim 3s infinite; } @keyframes myanim {

คุณสมบัติ perspective-origin กำหนดตำแหน่งจุดมอง (vanishing point) สำหรับ 3D transforms ของ child elements การ animate คุณสมบัตินี้จะทำให้มุมมอง 3D เปลี่ยนไปเรื่อยๆ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #demo1 { position: relative; margin: auto;

ตัวอย่างการสร้างแอนิเมชันเปลี่ยนสีของ text decoration (text-decoration-color) ร่วมกับการเลื่อน element ด้วย right ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #demo { position: absolute; right: 0; width: 300px; height: 200px; backgro

ตัวอย่างการสร้างแอนิเมชันเปลี่ยนเงาของข้อความ (text-shadow) เพื่อสร้างเอฟเฟกต์ glowing, floating, หรือ 3D ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { height: 200px; background-color: orange; border: 2px solid blue; animation: myanim

ตัวอย่างการสร้างแอนิเมชันเปลี่ยนการเยื้องบรรทัดแรก (text-indent) ของข้อความ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { background-color: orange; border: 2px solid blue; animation: myanim 3s infinite; } @keyframes myanim { 3

ตัวอย่างการสร้างแอนิเมชันเลื่อน element แนวตั้งด้วยคุณสมบัติ top (ต้องใช้ร่วมกับ position: absolute/relative/fixed) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { position: absolute; width: 300px; height: 200px; background-color: orang

คุณสมบัติ outline-offset ใช้กำหนดระยะห่างระหว่าง outline กับ border (หรือขอบของ element) การ animate คุณสมบัตินี้สร้างเอฟเฟกต์ outline ลอย ไปไกลจาก element ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 350px; height: 150px; outline:

คุณสมบัติ voice-range ใน CSS Speech Module ใช้กำหนดช่วงพื้นฐานเสียง (pitch range) ของเสียงพูด คือ ความหลากหลายของระดับเสียง (monotone vs expressive) รูปแบบไวยากรณ์ voice-range: [x-low | low | medium | high | x-high] | <frequency> ตัวอย่าง p { voice-range: 90Hz; } คำอธิบายค่า: Keyword

ตัวอย่างการสร้างแอนิเมชันเปลี่ยนความหนาของ outline (outline-width) แยกต่างหาก ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 350px; height: 150px; outline: 2px solid yellow; animation: myanim 3s infinite; } @keyframes my

ตัวอย่างการสร้างแอนิเมชันเปลี่ยน outline (เส้นขอบนอก) ของ element รวมถึงความกว้าง รูปแบบ และสี ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 550px; height: 350px; outline: 1px solid blue; animation: myanim 3s infinite; }

ตัวอย่างการสร้างแอนิเมชันกับคุณสมบัติ padding แบบ shorthand (ทั้ง 4 ด้านพร้อมกัน) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 350px; height: 150px; outline: 2px solid orange; animation: myanim 3s infinite; } @keyframe