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

ใช้คุณสมบัติ animation-timing-function ค่า ease เพื่อตั้งค่าแอนิเมชันเริ่มช้า เร็วกลาง จบช้า ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 200px; position: relative; background-color: yellow; animation-name:

ใช้คุณสมบัติ animation-timing-function เพื่อตั้งค่าโค้งความเร็วของแอนิเมชัน ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อตั้งค่า ease และ ease-in animation effect: <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 200px; position: relative;

เพื่อเลือกอิลิเมนต์ทั้งหมดที่มี class=mydemo ให้ใช้ Class Selector .class ใน CSS ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> .demo { border: 2px dashed orange; } </style> </head> <body> <h1 class=demo>Heading 1</h1> &

ใช้คุณสมบัติ animation-timing-function ค่า ease-in-out เพื่อตั้งค่าแอนิเมชันเริ่มช้า จบช้า ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 200px; position: relative; background-color: #808000; animation-name:

เพื่อเพิ่ม transition effect ให้ทั้ง width และ height ของอิลิเมนต์ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 150px; background: blue; transition: width 3s; } div:hover { width: 250px; heigh

ใช้คุณสมบัติ transition-timing-function เพื่อตั้งค่าโค้งความเร็วของ transition effect ค่าที่ใช้ได้: ease, ease-in, ease-out, linear, เป็นต้น ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อตั้งค่าโค้งความเร็ว transition effect: <!DOCTYPE html> <html> <head> <style> div { widt

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

ใช้คุณสมบัติ transition-delay เพื่อหน่วงเวลา transition effect ใน CSS ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อตั้งค่าหน่วงเวลา 1 วินาที: <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 150px; background: blue; transition: width 3s;

ใช้คุณสมบัติ CSS transition เพื่อกำหนด transition properties ทั้ง 4 ค่าในบรรทัดเดียว คุณสามารถลองรันโค้ดด้านล่างเพื่อทดสอบ transition property: ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 150px; background: blue;

ใช้คุณสมบัติ transition-delay เพื่อกำหนดหน่วงเวลาก่อนเริ่ม transition effect ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อตั้งค่าหน่วงเวลา 2 วินาที: <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 150px; background: blue; transition: wid

ใช้คุณสมบัติ transition-duration เพื่อกำหนดระยะเวลาของ transition ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 150px; background: blue; transition-property: height; transition-duration: 2s; } div:ho

ใช้คุณสมบัติ transition-duration ใน CSS เพื่อกำหนดว่า transition effect ใช้เวลาเท่าไร (วินาทีหรือมิลลิวินาที) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 150px; background: blue; transition-property: height;

เพื่อกำหนดชื่อคุณสมบัติ CSS ที่ transition effect จะใช้งาน ให้ใช้ transition-property ในตัวอย่างด้านล่าง เรากำหนด property เป็น width และ duration ด้วย: ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 150px; background: b

เพื่อตั้งค่าโค้งความเร็ว (speed curve) ของ transition ให้ใช้คุณสมบัติ transition-timing-function ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; transition: width 4s; } #effect1 { tra

เพื่อระบุตำแหน่งด้านล่างของอิลิเมนต์ 3D ให้ใช้คุณสมบัติ perspective-origin ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อทดสอบ perspective-origin property: <!DOCTYPE html> <html> <head> <style> .demo1 { position: relative; width: 150px; height: 150px; back

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

เพื่อกำหนดว่าอิลิเมนต์ควรมองเห็นได้เมื่อไม่ได้หันหน้าจอหรือไม่ ให้ใช้คุณสมบัติ backface-visibility ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> .demo1 { position: relative; width: 150px; height: 150px; background-color: yellow; perspe

เพื่อกำหนดว่าอิลิเมนต์ควรมองเห็นได้หรือไม่เมื่อไม่ได้หันหน้าจอ (หมุนไปด้านหลัง) ให้ใช้คุณสมบัติ backface-visibility ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> .demo1 { position: relative; width: 150px; height: 150px; background-color: yel

ด้วยเอฟเฟกต์ Transition คุณสามารถเปลี่ยนแปลงค่าคุณสมบัติได้อย่างนุ่มนวล และสามารถกำหนดระยะเวลา (duration) ได้ ลองเปลี่ยนความสูงของอิลิเมนต์ดู: ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 150px; background: blue;