เพื่อทำซ้ำ Linear Gradients ให้ใช้ฟังก์ชัน repeating-linear-gradient() ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อทดสอบ: <!DOCTYPE html> <html> <head> <style> #demo { height: 100px; background: repeating-linear-gradient(red, yellow 30%, green 30%); } </sty

Shorthand property สำหรับกำหนดคุณสมบัติแอนิเมชันทั้งหมดคือ animation ตั้งค่า animation duration, name, เป็นต้นในบรรทัดเดียว ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อทำงานกับ animation shorthand property: <!DOCTYPE html> <html> <head> <style> div { width: 150px; h

ปุ่มประเภท input สามารถเป็น submit, reset, หรือ button ด้วย CSS เราสามารถจัดสไตล์ปุ่มทุกประเภทได้ ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อจัดสไตล์ input type button: <!DOCTYPE html> <html> <head> <style> input[type=button] { background-color: orange; border: non

กำหนดอย่างน้อย 2 จุดสี (color stops) เพื่อสร้าง Radial Gradient ที่มีระยะห่างสีเท่ากัน ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #demo { height: 100px; background: radial-gradient(orange, green, yellow); } </style> </head> <body

ใช้คุณสมบัติ animation-delay เพื่อกำหนดหน่วงเวลาก่อนเริ่มต้นแอนิเมชัน ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 200px; background-color: yellow; animation-name: myanim; animation-duration: 2s; anim

ใช้คุณสมบัติ animation-direction เพื่อกำหนดว่าแอนิเมชันควรเล่นไปข้างหน้า ถอยหลัง หรือสลับทิศทาง ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อตั้งค่าแอนิเมชันเล่นถอยหลัง: <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 200px; background-color:

เพื่อตั้งค่า fill mode สำหรับแอนิเมชัน ให้ใช้คุณสมบัติ animation-fill-mode ค่าที่มี: forwards, backwards, both (ทั้งสองทิศทาง) ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อตั้งค่า fill mode สำหรับแอนิเมชัน: <!DOCTYPE html> <html> <head> <style> div { width: 150px; he

ใช้คุณสมบัติ animation-fill-mode ค่า both เพื่อขยายคุณสมบัติแอนิเมชันในทั้งสองทิศทาง (ก่อนเริ่มและหลังจบ) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 200px; position: relative; background: red; animation-n

ใช้ Selector [attribute|=value] เพื่อเลือกอิลิเมนต์ที่มีแอตทริบิวต์ขึ้นต้นด้วยค่าที่ระบุ (คั่นด้วย hyphen) ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อทดสอบ CSS [attribute|=value] Selector: <!DOCTYPE html> <html> <head> <style> [alt|=Tutor] { border: 5px solid orange;

เพื่อเลือกอิลิเมนต์ที่ค่าแอตทริบิวต์ลงท้ายด้วยค่าที่ระบุ ให้ใช้ Selector [attribute$=value] ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อทดสอบ CSS [attribute$=value] Selector: <!DOCTYPE html> <html> <head> <style> [alt$=Connect] { border: 5px solid blue; border-radiu

เพื่อให้อิลิเมนต์คงค่าสไตล์ที่ตั้งค่าไว้ใน keyframe สุดท้าย (หลังแอนิเมชันจบ) ให้ใช้คุณสมบัติ animation-fill-mode: forwards ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 200px; position: relative; background: red;

ใช้ Selector [attribute*=value] เพื่อเลือกอิลิเมนต์ที่ค่าแอตทริบิวต์มีข้อความที่ระบุอยู่ ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อทดสอบ CSS [attribute*=value] selector: <!DOCTYPE html> <html> <head> <style> [href*=java] { border: 5px solid orange; border-radius:

ใช้คุณสมบัติ CSS background-origin กำหนดค่า border-box ด้วยค่านี้ รูปภาพพื้นหลังจะเริ่มจากมุมซ้ายบนของขอบ (border) ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อทดสอบ border-box value: <!DOCTYPE html> <html> <head> <style> #value1 { border: 3px solid blue; padding: 30

Shorthand property สำหรับกำหนดคุณสมบัติแอนิเมชันทั้งหมดในบรรทัดเดียวคือ animation รวมถึง animation-duration, animation-name, และอื่นๆ ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อเรียนรู้ Animation Shorthand property: <!DOCTYPE html> <html> <head> <style> div { width: 150p

ใช้คุณสมบัติ animation-iteration-count เพื่อกำหนดจำนวนครั้งที่แอนิเมชันควรเล่น ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อทดสอบ animation-iteration-count property: <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 200px; position: relative;

เพื่อสร้าง Sticky Navbar (แถบนำทางที่ติดอยู่เมื่อเลื่อนจนถึงตำแหน่ง) ให้ใช้คุณสมบัติ position: sticky ร่วมกับ top: 0 ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อสร้าง Sticky Navbar: <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; position: sticky;

ใช้ Selector [attribute$=value] เพื่อเลือกอิลิเมนต์ที่ค่าแอตทริบิวต์ลงท้ายด้วยค่าที่ระบุ เช่น .htm ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อทดสอบ CSS [attribute$=value] Selector: <!DOCTYPE html> <html> <head> <style> [href$=htm] { border: 5px solid orange; border

เพื่อหน่วงเวลาแอนิเมชัน ให้ใช้คุณสมบัติ CSS animation-delay ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 200px; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-dela

ใช้คุณสมบัติ animation-iteration-count เพื่อกำหนดจำนวนครั้งที่แอนิเมชันควรทำงาน ตัวอย่างโค้ด ตัวอย่างต่อไปนี้ตั้งค่าจำนวนรอบของแอนิเมชันเป็น 2: <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 200px; background-color: yellow; ani

ใช้คุณสมบัติ animation-direction ค่า alternate-reverse เพื่อรันแอนิเมชันถอยหลังก่อน แล้วค่อยไปข้างหน้า สลับกัน ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 200px; position: relative; background-color: yellow;