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

เพื่อสร้าง Radial Gradient รูปวงกลม ให้ระบุคีย์เวิร์ด circle ในฟังก์ชัน radial-gradient() ตัวอย่างโค้ด ลองรันโค้ดด้านล่าง ตั้งค่ารูปร่างเป็นวงกลมใน radial gradient: <!DOCTYPE html> <html> <head> <style> #demo { height: 400px; background: radial-gradient(circ

ใช้คุณสมบัติ CSS box-shadow เพื่อเพิ่มเงาให้อิลิเมนต์ ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อทดสอบ box-shadow property: <!DOCTYPE html> <html> <head> <style> h2 { box-shadow: 10px 10px; height: 50px; background-color: yellow; } </style> </h

เพื่อสร้างเอฟเฟกต์ Transition (การเปลี่ยนแปลงอย่างนุ่มนวล) ให้กำหนดคุณสมบัติที่ต้องการให้มี transition และระบุระยะเวลา (duration) transition: height 5s; ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อสร้าง transition effect: <!DOCTYPE html> <html> <head> <style> div { width:

การสร้างแกลเลอรี่รูปภาพด้วย CSS ทำได้ง่ายมาก โดยใช้ float และการจัด layout แบบง่ายๆ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div.myGallery { margin: 3px; border: 2px solid orange; float: left; width: 220px; } div.myGallery:hover

ใช้คุณสมบัติ transform-origin เพื่อเปลี่ยนตำแหน่งจุดหมุนของอิลิเมนต์ที่ถูก transform ใน CSS ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อเรียนรู้การทำงานของ transform-origin property: <!DOCTYPE html> <html> <head> <style> .demo1 { width: 300px; height: 300px; b

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

เพื่อเปลี่ยนตำแหน่งจุดหมุน (transform origin) ของอิลิเมนต์ที่ถูก transform ให้ใช้คุณสมบัติ transform-origin ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อเปลี่ยนตำแหน่งจุดหมุน: <!DOCTYPE html> <html> <head> <style> .demo1 { width: 300px; height: 300px; backgroun

ใช้คุณสมบัติ transform-style เพื่อกำหนดว่าอิลิเมนต์ซ้อนกันจะถูกเรนเดอร์ในพื้นที่ 3D อย่างไร ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อทดสอบ transform-style property: <!DOCTYPE html> <html> <head> <style> .demo1 { width: 300px; height: 300px; background-color

เพื่อระบุว่าอิลิเมนต์ซ้อนกัน (nested) จะถูกเรนเดอร์ในพื้นที่ 3D อย่างไร ให้ใช้คุณสมบัติ transform-style ใน CSS ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อทดสอบ transform-style property: <!DOCTYPE html> <html> <head> <style> .demo1 { width: 300px; height: 300px;

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

ใช้คุณสมบัติ CSS perspective เพื่อระบุมุมมองว่าอิลิเมนต์ 3D จะถูกมองอย่างไร ค่ายิ่งน้อยยิ่งดูเด่นชัด (เอฟเฟกต์ 3D แรง) ตัวอย่างโค้ด ลองรันโค้ดด้านล่าง: <!DOCTYPE html> <html> <head> <style> .demo1 { position: relative; width: 150px; height: 150px;

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

เพื่อเลือกอิลิเมนต์ที่มีแอตทริบิวต์ที่ระบุ ให้ใช้ CSS [attribute] Selector ตัวอย่างเช่น แอตทริบิวต์ alt หรือ target เป็นต้น ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อทดสอบ CSS [attribute] Selector: <!DOCTYPE html> <html> <head> <style> img[alt] { border: 3px solid orang

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

เพื่อสร้างเอฟเฟกต์การจาง (Fading Effect) ด้วย CSS ให้ใช้ linear-gradient() ร่วมกับ rgba() ที่มีค่า alpha (ความโปร่งใส) ต่างกัน ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #demo { height: 100px; background: linear-gradient(to right, rgba(255,50,30,0),

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

เพื่อเพิ่มสีให้เงา ให้ใช้คุณสมบัติ box-shadow และระบุสีพร้อมกับตำแหน่งแนวนอนและแนวตั้ง ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อกำหนดสีเงา: <!DOCTYPE html> <html> <head> <style> h2 { box-shadow: 10px 10px green; height: 70px; background-color: red; }

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

เพื่อเพิ่มเอฟเฟกต์เบลอให้เงา ให้ใช้คุณสมบัติ box-shadow โดยระบุค่ารัศมีเบลอ (blur radius) เป็นค่าที่ 3 ตัวอย่างโค้ด ลองรันโค้ดด้านล่างเพื่อเพิ่มเอฟเฟกต์เบลอ: <!DOCTYPE html> <html> <head> <style> h2 { box-shadow: 10px 10px 7px green; height: 50px; back