คุณสมบัติ border-image-width ใช้เพื่อกำหนดความกว้างของภาพขอบ (border image) ตัวอย่าง ลองรันโค้ดด้านล่างเพื่อใช้งานคุณสมบัติ border-image-width: <html> <head> <style> #borderimg1 { border: 15px solid transparent; padding: 15px; border-image-sourc

คุณสมบัติ border-image-repeat ใช้เพื่อกำหนดการแสดงภาพขอบ (border image) ให้เป็น rounded, repeated หรือ stretched ตัวอย่าง ลองรันโค้ดด้านล่างเพื่อใช้งานคุณสมบัติ border-image-repeat: <html> <head> <style> #borderimg1 { border: 15px solid transparent; pad

คุณสมบัติ User Interface (UI) ใน CSS3 ช่วยให้คุณเปลี่ยนองค์ประกอบใดๆ ให้กลายเป็นองค์ประกอบ UI มาตรฐานได้หลายรูปแบบ คุณสมบัติทั่วไปที่ใช้ใน CSS3 User Interface: ค่า (Values) คำอธิบาย appearanceใช้เพื่อให้ผู้ใช้ทำให้องค์ประกอบกลายเป็นองค์ประกอบ UI box-sizingช่ว

เพื่อทำให้สีเป็นแบบ X-Ray (Grayscale และ Flatten color depth) ต้องใช้ฟิลเตอร์ X-Ray พารามิเตอร์ที่ใช้ในฟิลเตอร์นี้: ลำดับ พารามิเตอร์ & คำอธิบาย 1 Xrayทำให้เป็นโทนสีเทา (Grayscale) และลดความลึกสี (Flatten color depth) ตัวอย่าง ลองรันโค้ด

ตัวอย่าง หากต้องการสร้างเอฟเฟกต์อนิเมชันสั่น (Wobble) ด้วย CSS สามารถทดลองรันโค้ดด้านล่างได้: <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; pad

ใช้ pseudo-element :first-line เพื่อเพิ่มเอฟเฟกต์พิเศษให้กับบรรทัดแรกขององค์ประกอบในเอกสาร ตัวอย่าง ลองรันโค้ดด้านล่างเพื่อเพิ่มสไตล์พิเศษให้บรรทัดแรกของข้อความ: <html> <head> <style> p:first-line { text-decoration: underline; } p.noline:first-line

ตัวอย่าง หากต้องการสร้างเอฟเฟกต์อนิเมชันหมุนเข้าจากมุมซ้ายล่าง (Rotate In Up Left) ด้วย CSS สามารถทดลองรันโค้ดด้านล่างได้ (แก้ไขข้อผิดพลาดในโค้ดต้นฉบับแล้ว): <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repea

ใช้ pseudo-element :after เพื่อแทรกเนื้อหาเพิ่มเติมหลังจากองค์ประกอบที่ระบุ ตัวอย่างด้านล่างแสดงวิธีใช้ :after เพื่อเพิ่มเนื้อหาหลังองค์ประกอบ ตัวอย่าง <html> <head> <style> p:after { content: url(/images/bullet.gif); } </style> </head>

ตัวอย่าง หากต้องการสร้างเอฟเฟกต์อนิเมชันหมุนเข้าจากมุมขวาล่าง (Rotate In Up Right) ด้วย CSS สามารถทดลองรันโค้ดด้านล่างได้: <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-po

ตัวอย่าง หากต้องการสร้างเอฟเฟกต์อนิเมชันหมุนออก (Rotate Out) ด้วย CSS สามารถทดลองรันโค้ดด้านล่างได้: <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top;

สร้างเอฟเฟกต์ Animation หมุนออกไปทางซ้ายล่าง (Rotate Out Down Left) ด้วย CSS Keyframes ตัวอย่าง <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top

เอฟเฟกต์ Shake องค์ประกอบสั่นซ้าย-ขวา คล้ายการสั่นหัว ไม่ หรือ error state ใช้ translateX สลับเครื่องหมาย โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position:

Pseudo-element :before (หรือ ::before) ใช้ ::before (รูปแบบใหม่) หรือ :before (รูปแบบเก่า) เพื่อแทรกเนื้อหา ก่อน เนื้อหาขององค์ประกอบ ไวยากรณ์ selector::before { content: ข้อความหรือค่า; /* สไตล์อื่นๆ */ } ตัวอย่าง: เพิ่ม bullet ก่อนแต่ละย่อหน้า <html> <head> <style> p

เอฟเฟกต์ Roll In องค์ประกอบบินเข้ามาจากซ้าย พร้อมหมุนจาก -120° สู่ 0° คล้ายลูกกลิ้งมาถึง จบที่ตำแหน่งปกติ โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position:

เอฟเฟกต์ Roll Out องค์ประกอบหมุนไปพร้อมเลื่อนออกไปขวา จางหาย คล้ายลูกกลิ้งลุยไป ใช้ translateX + rotate ร่วมกัน โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-posi

คุณสมบัติ Aural Media CSS ทั้งหมด CSS Speech Module ให้คุณสมบัติครบชุดสำหรับควบคุมการนำเสนอเอกสารแบบเสียง (Aural Rendering) 主要ใช้โดย Screen Readers ตารางคุณสมบัติครบ 18 รายการ คุณสมบัติหมวดหมู่คำอธิบายสั้น azimuth3D Positionตำแหน่งเสียงแนวนอน (ซ้าย-ขวา) elevation3D Positionตำ

ทำไมต้องมี Aural Rendering? Aural Rendering (การนำเสนอเอกสารแบบเสียง) ใช้หลักโดย ผู้พิการทางสายตา (visually impaired) แต่ก็มีประโยชน์ในสถานการณ์อื่นๆ อีกมาก สถานการณ์ที่ใช้ Aural Rendering สถานการณ์คำอธิบาย เรียนรู้การอ่าน (Learning to read)เด็กหรือผู้ใหญ่ที่กำลังเรียนอ่าน ฟังขณะ

เอฟเฟกต์ Rotate In Down Left องค์ประกอบหมุนเข้ามาจากมุมซ้ายล่าง (bottom left) เริ่มจาก -90° จางหาย → 0° มองเห็น ใช้ transform-origin: left bottom โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat

คุณสมบัติ volume คุณสมบัติ volume ควบคุมระดับเสียงกลาง (median volume) ของเสียงพูด ใช้ใน CSS Speech Module ค่าที่ใช้ได้ ค่าคำอธิบายเทียบเท่า number (0-100)0 = เบามากที่สุดได้ยิน, 100 = ดังสบายที่สุด- percentageคำนวณจากค่าที่สืบทอด มาตัดช่วง 0-100- silentไม่มีเสียงเลย (ต่า

เอฟเฟกต์ Rotate In องค์ประกอบหมุนเข้ามาจาก -200° (หมุนหลายรอบ) ไปสู่ 0° พร้อมจางเข้ามา จุดหมุนอยู่กึ่งกลาง (center center) โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; back