ตัวอย่างการสร้างแอนิเมชันเปลี่ยนระยะห่างซ้าย (margin-left) ของ element ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { background-color: gray; animation: myanim 3s infinite; color: white; } @keyframes myanim { 30% { marg

คุณสมบัติ opacity เป็นหนึ่งในคุณสมบัติที่เหมาะสมที่สุดสำหรับการสร้างแอนิเมชัน เพราะได้รับการ GPU acceleration และไม่ทำให้เกิด layout reflow ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #demo1 { position: absolute; top: 60px; width: 300px;

คุณสมบัติ voice-volume ใน CSS Speech Module ใช้ปรับระดับเสียงดัง (volume) ของการพูดออกเสียง รูปแบบไวยากรณ์ voice-volume: [x-soft | soft | medium | loud | x-loud] | <decibel> | <keyword> <decibel> ตัวอย่างการใช้งาน /* ใช้ keyword */ p { voice-volume: soft; } /* ใช้ decibel */ p {

ตัวอย่างการสร้างแอนิเมชันเปลี่ยนระยะห่างขวา (margin-right) ของ element ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { background-color: blue; animation: myanim 4s infinite; color: white; } @keyframes myanim { 30% { marg

คุณสมบัติ voice-stress ใช้ใน CSS Speech Module เพื่อกำหนดระดับความเน้น (emphasis/stress) ของเสียงพูด ส่งผลต่อพื้นฐานเสียง (pitch), ความดัง และความเร็ว รูปแบบไวยากรณ์ voice-stress: normal | strong | moderate | none | reduced คำอธิบายค่า normal (default): ความเน้นปกติ strong: เน้นอย่างมาก (พูดด

คุณสมบัติ rest เป็น shorthand สำหรับ rest-before และ rest-after ใช้ใน CSS Speech Module เพื่อกำหนดการหยุดพัก (pause) ก่อนและหลัง element เมื่ออ่านออกเสียง (Text-to-Speech) รูปแบบไวยากรณ์ rest: <rest-before> <rest-after> rest-before: ระยะหยุดพักก่อน element (เวลา หรือ strength) res

คุณสมบัติ align-content ควบคุมการจัดวาง flex lines (หลายแถว) ตาม cross axis เมื่อมี flex-wrap: wrap ค่า flex-start จะชิด flex lines ไปที่จุดเริ่มต้นของ cross axis ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; height: 300px

คุณสมบัติ all เป็น shorthand ที่ใช้รีเซ็ตคุณสมบัติ CSS ทั้งหมด (ยกเว้น unicode-bidi และ direction) ให้กลับสู่ค่าเริ่มต้น การสืบทอด หรือไม่ระบุ ค่าที่ใช้ได้ initial: ตั้งค่าทุกคุณสมบัติเป็นค่าเริ่มต้น (initial value) ของแต่ละคุณสมบัติ inherit: บังคับให้สืบทอดค่าจาก parent element ทุกคุณสมบัติ

คุณสมบัติ white-space ควบคุมการจัดการช่องว่าง (whitespace), แท็บ, และการขึ้นบรรทัดใหม่ ภายใน element ค่าหลักที่ใช้ได้ ค่าคำอธิบาย normalรวมช่องว่างหลายช่องเป็นช่องเดียว ขึ้นบรรทัดใหม่เฉพาะ <br> หรือ block element preรักษาช่องว่างและขึ้นบรรทัดใหม่ทุกอย่าง ไม่ wrap ข้อความ

คุณสมบัติ caret-color ใช้กำหนดสีของเคอร์เซอร์ (text cursor / insertion point) ในช่องกรอกข้อมูล (input, textarea) หรือ element ที่มี contenteditable ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> .demo { caret-color: blue; } </style> </head>

ฟังก์ชัน repeating-radial-gradient() สร้างลายเส้นแบบรัศมีซ้ำๆ (concentric rings pattern) โดยอัตโนมัติจาก color-stop ที่กำหนด ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #demo { height: 300px; background: repeating-radial-gradient(green 20%, orange 40

ฟังก์ชัน hsla() เป็นส่วนขยายของ hsl() โดยเพิ่มค่า Alpha (ความทึบแสง/ความโปร่งใส) เข้าไปเป็นพารามิเตอร์ที่ 4 รูปแบบไวยากรณ์ hsla(hue, saturation%, lightness%, alpha) hue: 0-360 (องศา) saturation: 0%-100% lightness: 0%-100% alpha: 0.0 (โปร่งใส) - 1.0 (ทึบ) ตัวอย่างโค้ด <!DOCTYPE html>

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

ตัวอย่างพื้นฐานของการสร้างแอนิเมชันเปลี่ยนความสูง (height) ของ element ด้วย @keyframes ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { border: 2px solid black; width: 300px; height: 100px; animation: myanim 5s infinite; } @keyfr

สามารถสร้างแอนิเมชันให้กับคุณสมบัติ letter-spacing (ระยะห่างระหว่างตัวอักษร) ได้อย่างราบรื่นด้วย @keyframes ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> p { letter-spacing: 3px; animation: mymove 3s infinite; } @keyframes mymove { 70% {

ตัวอย่างนี้แสดงการสร้างแอนิเมชันเปลี่ยนสีเส้นแบ่งคอลัมน์ (column-rule-color) ร่วมกับการเปลี่ยนตำแหน่งและ box-shadow ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 600px; height: 300px; background: white; border: 10px solid red;

คุณสมบัติ font (shorthand) สามารถนำไปใช้ในแอนิเมชันได้ แต่ต้องระวังว่าเป็น shorthand ของหลายคุณสมบัติ (font-style, font-variant, font-weight, font-size, line-height, font-family) การ animate shorthand อาจให้ผลลัพธ์ที่คาดการณ์ยาก ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <sty

ใน Flexbox ใช้คุณสมบัติ justify-content: center เพื่อจัดให้ flex items อยู่กึ่งกลางตาม main axis (แนวนอนโดยปกติ) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; background-color: red; justify-content: center; }

คุณสมบัติ user-select ใช้ควบคุมว่าผู้ใช้สามารถเลือก (highlight/select) ข้อความภายใน element ได้หรือไม่ ค่าที่ใช้ได้ auto (default): ตามพฤติกรรมปกติของบราวเซอร์ none: ห้ามเลือกข้อความได้เลย text: เลือกข้อความได้ (สำหรับ element ที่ปกติเลือกไม่ได้ เช่น input) all: คลิกครั้งเดียวเลือกทั้ง ele

คุณสมบัติ grid-auto-flow ควบคุมอัลกอริทึมการวางไอเท็มอัตโนมัติ (auto-placement algorithm) ใน CSS Grid เมื่อไอเท็มไม่ได้ถูกจัดตำแหน่งอย่างชัดเจนด้วย grid-area หรือ line-based placement ค่าที่ใช้ได้ row (default): เติมแถวก่อน แล้วค่อยขยับไปคอลัมน์ถัดไป column: เติมคอลัมน์ก่อน แล้วค่อยขยับไปแถวถั