Flip Effect (IE Legacy) เอฟเฟกต์ Flip เป็นฟิลเตอร์เก่าของ Internet Explorer สร้างภาพกระจก (mirror image) ขององค์ประกอบ พารามิเตอร์ 2 แบบ พารามิเตอร์คำอธิบาย FlipHสร้างภาพกระจกแนวนอน (flip horizontal - ซ้ายขวาสลับ) FlipVสร้างภาพกระจกแนวตั้ง (flip vertical - บนล่างสลับ) ตั

คุณสมบัติ play-during คุณสมบัติ play-during ระบุเสียงพื้นหลังที่เล่นขณะที่เนื้อหาขององค์ประกอบกำลังถูกอ่านออกเสียง ใช้ใน CSS Speech Module ค่าที่ใช้ได้ ค่าคำอธิบาย URIไฟล์เสียงเล่นเป็นพื้นหลังขณะอ่าน mixผสมเสียงกับของ parent element (ถ้าไม่มี mix จะแทนที่) repeatเล่นซ้ำหา

Chroma Filter (IE Legacy) Chroma Filter เป็นฟิลเตอร์เก่าของ Internet Explorer (IE 4-9) ใช้ทำให้สีที่กำหนดกลายเป็นโปร่งใส (transparent) ใช้บ่อยกับรูปภาพและสกролลบาร์ รูปแบบการใช้งาน filter: chroma(color=#RRGGBB); ตัวอย่างการใช้งาน <html> <head></head> <body> <img src=/

เอฟเฟกต์ Fade Out Up Big องค์ประกอบจางหายพร้อมลอยขึ้นระยะไกล (2000px) เวอร์ชัน Big ของ Fade Out Up โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left to

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

เอฟเฟกต์ Flip องค์ประกอบหมุนรอบแกน Y 360° พร้อมแอนิเมชัน timing function ที่ซับซ้อน (ease-out → ease-in) และการย่อ-ขยายเล็กน้อย สร้าง感覺ของการพลิกบัตร 3 มิติ โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); backgr

คุณสมบัติ cue-before คุณสมบัติ cue-before ระบุไฟล์เสียงที่จะเล่น ก่อน อ่านเนื้อหาขององค์ประกอบ เพื่อเป็นสัญญาณแบ่งแยกจากองค์ประกอบอื่น ค่าที่ใช้ได้ ค่าคำอธิบาย url()ที่อยู่ไฟล์เสียง (รองรับ .au, .wav, .aiff, .mp3, .ogg) noneไม่เล่นเสียง (ค่าเริ่มต้น) ตัวอย่างการใช้งาน &l

คุณสมบัติ cue (Shorthand) คุณสมบัติ cue เป็น shorthand รวม cue-before และ cue-after ใช้กำหนดไฟล์เสียงเล่นก่อนและหลังการอ่านเนื้อหา รูปแบบการใช้งาน ค่าเดียว: ใช้สำหรับ cue-before และ cue-after เท่ากัน สองค่า: ค่าแรก = cue-before, ค่าที่สอง = cue-after ตัวอย่าง: เทียบเท่ากัน <style> /

เอฟเฟกต์ Flip In X องค์ประกอบพลิกเข้ามาจากแกน X (แนวนอน) เริ่มจาก 90° (มองไม่เห็น) หมุนมาเป็น 0° พร้อมเด้ง ใช้สำหรับการ์ดพลิก โชว์ข้อมูล โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repe

เอฟเฟกต์ Flip In Y องค์ประกอบพลิกเข้ามาจากแกน Y (แนวตั้ง) เริ่มจาก 90° (มองไม่เห็น) หมุนมาเป็น 0° พร้อมเด้งเล็กน้อย (overshoot) ใช้ perspective สร้างความลึก โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); backgr

มุมโค้งมนใน CSS3 CSS3 นำเสนอคุณสมบัติ border-radius สำหรับสร้างมุมโค้งมนขององค์ประกอบ ไม่ต้องใช้ภาพประกอบแล้ว ไวยากรณ์พื้นฐาน #rcorners { border-radius: 60px / 15px; /* แนวนอน / แนวตั้ง */ background: #FF0000; padding: 20px; width: 200px; height: 150px; } คุณสมบัติย่อยสำหรับแต่ละมุม

คุณสมบัติ speech-rate คุณสมบัติ speech-rate ระบุอัตราการพูด (speaking rate) รองรับทั้งค่าสัมบูรณ์และค่าเกี่ยวข้อง (relative keywords) ค่าที่ใช้ได้ ค่าคำอธิบายคำต่อนาที (ประมาณ) numberระบุคำต่อนาทีโดยตรงเช่น 150 x-slowช้ามาก80 slowช้า120 mediumปานกลาง (default)180-200

เอฟเฟกต์ Flip Out X องค์ประกอบหมุนรอบแกน X (แนวนอน) จาก 0° ไป 90° พร้อมจางหาย คล้ายการพลิกบัตรหน้าที่ทิ้งไป ใช้ perspective สร้างความลึก โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repe

คุณสมบัติ background-image คุณสมบัติ background-image ใช้ระบุภาพพื้นหลังขององค์ประกอบ เป็นหนึ่งในคุณสมบัติพื้นฐานที่สุดของ CSS Background รูปแบบไวยากรณ์ background-image: url(path/to/image.jpg); background-image: linear-gradient(45deg, red, blue); background-image: url(img1.png), url(img2.png); /*

เอฟเฟกต์ Bounce Out Right องค์ประกอบเด้งซ้ายเล็กน้อย แล้วบินไปทางขวาจนหาย คู่คู่กับ Bounce Out Left โค้ดตัวอย่างสมบูรณ์ (แก้ไข typo ในต้นฉบับ) <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; back

เอฟเฟกต์ Bounce Out Up องค์ประกอบเด้งขึ้นเล็กน้อย แล้วบินขึ้นไปด้านบนจนหาย ใช้สำหรับ dismiss element แบบมีชีวิตชีวา โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-

เอฟเฟกต์ Fade Out Down Big องค์ประกอบจางหายพร้อมเลื่อนลงระยะไกล (2000px) เวอร์ชัน Big ของ Fade Out Down โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: le

กฎ @font-face กฎ @font-face ใช้สำหรับอธิบายลักษณะแบบอักษร (font face) อย่างครบถ้วนเพื่อใช้ในเอกสาร รวมถึงกำหนดที่อยู่ดาวน์โหลดแบบอักษร ตัวอย่างการใช้งาน <style> @font-face { font-family: Scarborough Light; src: url(https://www.font.site/s/scarbo-lt); } @font-face { font-fa

เอฟเฟกต์ Fade Out Right Big องค์ประกอบจางหายพร้อมเลื่อนไปทางขวาระยะไกล (2000px) เวอร์ชัน Big หมายถึงระยะทางการเคลื่อนที่มากกว่าปกติ โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat;

คุณสมบัติ speak คุณสมบัติ speech ระบุว่าข้อความจะถูกนำเสนอแบบเสียง (aurally) หรือไม่ และจะอ่านอย่างไร ค่าที่ใช้ได้ ค่าคำอธิบาย noneปิดการอ่านออกเสียง ไม่ใช้เวลาในการเรนเดอร์ normalอ่านตามกฎการออกเสียงของภาษา (ค่าเริ่มต้น) spell-outสะกดตัวอักษรทีละตัว (เช่น CSS → C-S-S)