ตัวอย่างนี้แสดงการสร้างแอนิเมชันเปลี่ยนสีเส้นขอบบน (border-top-color) ของตาราง พร้อมกับการเปลี่ยนสีพื้นหลังและ border-spacing ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> table, th, td { border: 2px solid black; } #newTable { width: 500px;

คุณสมบัติ font-size-adjust ใช้รักษาความอ่านง่ายของข้อความเมื่อฟอนต์หลัก (first-choice font) ไม่พร้อมใช้งาน และบราวเซอร์ต้อง fallback ไปใช้ฟอนต์สำรอง ซึ่งอาจมี aspect ratio (อัตราส่วนความสูงของตัวอักษร x-height ต่อ font-size) ต่างกัน ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <

คุณสมบัติ nav-down (รวมถึง nav-up, nav-left, nav-right) เป็นส่วนหนึ่งของ CSS Navigation Module Level 1 ใช้สำหรับกำหนดลำดับการโฟกัส (focus navigation) เมื่อผู้ใช้กดปุ่มลูกศรบนแป้นพิมพ์หรือรีโมตคอนโทรล สถานะปัจจุบัน: คุณสมบัตินี้ถูกยกเลิก (deprecated) และถูกแทนที่ด้วย focus-navigation ใน CSS UI Module

ตัวอย่างนี้แสดงการสร้างแอนิเมชันบนคุณสมบัติ border-bottom พร้อมกับการเปลี่ยนแปลงพื้นหลังและตำแหน่งภาพพื้นหลังพร้อมกัน ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 500px; height: 400px; background: yellow; border: 5px dashed ye

ใช้ฟังก์ชัน radial-gradient() เพื่อสร้างไล่สีแบบรัศมี (radial gradient) เป็นภาพพื้นหลัง โดยสีจะกระจายจากจุดศูนย์กลางไปรอบข้าง ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #demo { height: 200px; background: radial-gradient(green, orange, maroon); }

สามารถสร้างแอนิเมชันให้กับคุณสมบัติ margin-bottom ได้โดยใช้ @keyframes ตัวอย่างด้านล่างแสดงการเปลี่ยนแปลงระยะห่างด้านล่างของพารากราฟแบบวนซ้ำ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> p { animation: mymove 3s infinite; margin-bottom: 20px; }

ใน CSS Grid Layout สามารถตั้งชื่อพื้นที่ (named grid areas) ได้โดยใช้คุณสมบัติ grid-template-areas บน container และ grid-area บน items เพื่อจัดวาง layout อย่างชัดเจนและอ่านง่าย ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> .container { display: grid; b

ฟังก์ชัน cubic-bezier() ใช้กำหนดฟังก์ชันการเร่งช้าของการเปลี่ยนแปลง (transition timing function) ด้วยเส้นโค้ง Bézier ระดับ 3 (Cubic Bézier Curve) ซึ่งให้ความควบคุมที่ละเอียดกว่าคีย์เวิร์ดสำเร็จรูป เช่น ease, linear, ease-in, ease-out, ease-in-out รูปแบบไวยากรณ์ cubic-bezier(x1, y1, x2, y2) จุดคว

ฟังก์ชัน repeating-linear-gradient() ใช้สร้างลายเส้นแบบเส้นตรงซ้ำๆ (striped pattern) โดยไม่ต้องระบุ color-stop หลายจุด ค่าจะทำซ้ำอัตโนมัติตามระยะที่กำหนด ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #demo { height: 300px; background: repeating-linear-

คุณสมบัติ grid-auto-columns ใช้กำหนดขนาดคอลัมน์เริ่มต้นสำหรับคอลัมน์ที่ถูกสร้างขึ้นโดยอัตโนมัติ (implicit grid columns) เมื่อมี grid items มากกว่าที่กำหนดใน grid-template-columns ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> .container { display: grid;

ฟังก์ชัน rgba() ใช้สำหรับกำหนดสีในโมเดล RGB พร้อมกับค่า Alpha (ความทึบแสง/ความโปร่งใส) ซึ่งแตกต่างจาก rgb() ที่ไม่มีค่า Alpha rgb(r, g, b): ค่าสีแดง เขียว น้ำเงิน (0-255) rgba(r, g, b, a): เพิ่มค่า Alpha (0.0 ถึง 1.0) โดย 0.0 = โปร่งใสเต็มที่, 1.0 = ทึบเต็มที่ ตัวอย่างโค้ด <!DOCTYPE html&g

ตัวอย่างนี้แสดงวิธีสร้างแอนิเมชันเพื่อเปลี่ยนแปลงค่า column-width ร่วมกับคุณสมบัติอื่นๆ เช่น bottom, box-shadow, column-rule-color โดยใช้ @keyframes ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 600px; height: 300px; background: whit

สามารถนำการเคลื่อนไหวไปใช้กับคุณสมบัติ columns (รวมถึง column-count, column-width, column-rule เป็นต้น) ได้โดยใช้ @keyframes ตัวอย่างด้านล่างแสดงการเปลี่ยนแปลงจำนวนคอลัมน์ ความกว้างคอลัมน์ และสีเส้นแบ่งคอลัมน์พร้อมกัน ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style>

ฟังก์ชัน hsl() ใน CSS ใช้สำหรับกำหนดสีโดยใช้โมเดล Hue-Saturation-Lightness (HSL) ซึ่งประกอบด้วย 3 ค่า คือ Hue (สีพื้นฐาน): ค่า 0 ถึง 360 องศา (0=แดง, 120=เขียว, 240=น้ำเงิน) Saturation (ความอิ่มตัวของสี): ค่าเปอร์เซ็นต์ 0% ถึง 100% Lightness (ความสว่าง): ค่าเปอร์เซ็นต์ 0% ถึง 100% ตัวอย่างโ

หากต้องการนำการเคลื่อนไหว (animation) ไปใช้กับคุณสมบัติ filter ใน CSS สามารถทำได้โดยใช้ @keyframes ร่วมกับคุณสมบัติ animation ตัวอย่างโค้ดด้านล่างแสดงการเปลี่ยนแปลงค่า contrast ของรูปภาพแบบวนซ้ำ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 600p

หากต้องการนำ animation ไปใช้กับคุณสมบัติ flex-shrink ใน CSS สามารถทดลองรันโค้ดตัวอย่างด้านล่างได้ ตัวอย่างโค้ด <!DOCTYPE html> <html>    <head>       <style>          .mycontainer {            

ใช้คุณสมบัติ border-top-left-radius เพื่อกำหนดรัศมีของมุมโค้งที่มุมบนซ้ายของ element สามารถทดลองรันโค้ดตัวอย่างด้านล่างได้ ตัวอย่างโค้ด <html>    <head>       <style>          #rcorner {             b

ใช้คุณสมบัติ flex-direction กับค่า row เพื่อจัดวาง flex items แนวนอน (ซ้ายไปขวา) ซึ่งเป็นค่าเริ่มต้นของ flex container ตัวอย่างโค้ด <!DOCTYPE html> <html>    <head>       <style>          .mycontainer {      

หากต้องการนำ animation ไปใช้กับคุณสมบัติ column-rule (shorthand) ใน CSS สามารถทดลองรันโค้ดตัวอย่างด้านล่างได้ ตัวอย่างโค้ด <!DOCTYPE html> <html>    <head>       <style>          div {           &nbs

หากต้องการนำ animation ไปใช้กับคุณสมบัติ column-rule-width ใน CSS สามารถทดลองรันโค้ดตัวอย่างด้านล่างได้ ตัวอย่างโค้ด <!DOCTYPE html> <html>    <head>       <style>          div {             wid