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

กฎ @page กฎ @page ใช้กำหนดขนาด ทิศทาง ขอบเขต ของกล่องหน้า (page box) สำหรับสื่อพิมพ์ (Print Media) ใช้ร่วมกับ @media print คุณสมบัติหลักใน @page คุณสมบัติหน้าที่ sizeขนาดและทิศทางหน้ากระดาษ marginขอบหน้ากระดาษ margin-top/bottom/left/rightขอบแต่ละด้าน marksเครื่องหมายต

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

Motion Blur Filter (IE Legacy) Motion Blur เป็นฟิลเตอร์เก่าของ Internet Explorer สร้างภาพเบลอ (blurred) ตามทิศทางและความเข้มที่กำหนด ใช้กับรูปภาพหรือข้อความ พารามิเตอร์ 3 ตัว พารามิเตอร์คำอธิบายค่า Addtrue=รวมภาพต้นฉบับ, false=ไม่รวมtrue/false Directionทิศทางเบลอ (ตามเข็มนาฬิ

เอฟเฟกต์ Hinge องค์ประกอบหมุนรอบมุมซ้ายบน (top left) คล้ายประตูพลิ้ว แล้วตกหล่นลงไป ใช้ transform-origin: top left และ ease-in-out timing โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-rep

เอฟเฟกต์ Light Speed In องค์ประกอบบินเข้ามาจากขวา พร้อม skew เงาเอียง แล้วปรับกลับมาตรง เร็วมาก (0.5s) คู่คู่กับ Light Speed Out โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat;

@font-face สำหรับดาวน์โหลดฟอนต์ กฎ @font-face ใช้กำหนดที่ตั้ง (location) ของไฟล์ฟอนต์เพื่อให้เบราว์เซอร์ดาวน์โหลดมาใช้ แม้จะอาจมีข้อจำกัดจากการติดตั้ง (implementation-specific limits) ตัวอย่าง <style> @font-face { font-family: Scarborough Light; src: url(https://www.font.site/s/sca

กฎ @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-fam

กฎ CSS หลัก (CSS At-rules) CSS มีกฎพิเศษ (at-rules) เริ่มต้นด้วย @ ที่ควบคุมพฤติกรรมระดับสูงของสไตล์ชีต 1. @import - นำเข้าสไตล์ชีตอื่น @import layout.css; @import url(theme.css) screen; @import print.css print; ต้องอยู่บรรทัดแรกสุดของสไตล์ชีท 2. @charset - กำหนดชุดอักขระ @charset UTF-8; ต้องอยู่

กฎ !important กฎ !important ทำให้คุณสมบัติ CSS นั้นมี ความสำคัญสูงสุด จะถูกนำไปใช้เสมอ ไม่ว่าจะอยู่ที่ไหนในเอกสาร CSS จะชนะ specificity ทุกอย่าง ตัวอย่าง: ถ้าไม่มี !important <style> p { color: #ff0000; } /* แดง */ p { color: #000000; } /* ดำ - ชนะเพราะอยู่หลัง */ </style> <p&

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

กฎ @import กฎ @import ใช้สำหรับนำเข้า (import) ไฟล์สไตล์ชีตอื่นเข้าไปในสไตล์ชีตปัจจุบัน ต้องอยู่ บรรทัดแรกสุด ก่อนกฎอื่นๆ ทั้งหมด รูปแบบการใช้งาน <style> @import mystyle.css; /* หรือ */ @import url(mystyle.css); /* CSS rules อื่นๆ ตามมา */ body { font-family: sans-serif; } </

เอฟเฟกต์ Pulse องค์ประกอบขยาย-ย่อซ้ำๆ คล้ายการเต้นของหัวใจ ใช้สำหรับดึงดูดความสนใจ loading indicator หรือ notification badge โค้ดตัวอย่างสมบูรณ์ <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; ba

Mask Effect (IE Legacy) เอฟเฟกต์ Mask เป็นฟิลเตอร์เก่าของ Internet Explorer ทำให้พิกเซลโปร่งใสกลายเป็นสีที่กำหนด และพิกเซลทึบกลายเป็นโปร่งใส (กลับกันกับปกติ) พารามิเตอร์ พารามิเตอร์คำอธิบาย Colorสีที่พื้นที่โปร่งใสจะกลายเป็น ตัวอย่างการใช้งาน <html> <head></he

Invert Effect เอฟเฟกต์ Invert ใช้สลับสีของออบเจกต์เป็นค่าตรงข้ามในสเปกตรัมสี สร้างภาพลบ (negative image) มีทั้งรูปแบบ IE Legacy และ CSS Filter มาตรฐาน รูปแบบ IE Legacy (Deprecated) filter: invert; รูปแบบมาตรฐาน CSS Filter (แนะนำ) .invert-full { filter: invert(100%); } .invert-half { filter: inver

Wave Effect (IE Legacy) Wave Effect เป็นฟิลเตอร์เก่าของ Internet Explorer ให้ออบเจกต์มีการบิดเบี้ยวคลื่นไซน์ (sine wave distortion) ทำให้ดูคลื่นคลอน พารามิเตอร์ 5 ตัว พารามิเตอร์คำอธิบายช่วงค่า Add1 = รวมภาพต้นฉบับ, 0 = ไม่รวม0 หรือ 1 Freqจำนวนคลื่นตัวเลข LightStrengthควา

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

Grayscale Effect (IE Legacy) เอฟเฟกต์ Grayscale เป็นฟิลเตอร์เก่าของ Internet Explorer แปลงสีของออบเจกต์เป็น 256 ระดับสีเทา พารามิเตอร์ พารามิเตอร์คำอธิบาย Grayแปลงสีเป็น 256 ระดับสีเทา ตัวอย่างการใช้งาน <html> <head></head> <body> <img src=/css/i

Drop Shadow Filter (IE Legacy) Drop Shadow เป็นฟิลเตอร์เก่าของ Internet Explorer สร้างเงาของออบเจกต์ที่ตำแหน่ง X, Y ที่กำหนดพร้อมสี พารามิเตอร์ พารามิเตอร์คำอธิบาย colorสีเงาในรูปแบบ #RRGGBB offXอフセตแนวนอน (px) บวก=ขวา, ลบ=ซ้าย offYออฟเซตแนวตั้ง (px) บวก=ล่าง, ลบ=บน p

Invert Effect (IE Legacy) เอฟเฟกต์ Invert เป็นฟิลเตอร์เก่าของ Internet Explorer ใช้สลับสีขององค์ประกอบเป็นค่าตรงข้ามในสเปกตรัมสี (สร้างภาพลบ / negative image) พารามิเตอร์ พารามิเตอร์คำอธิบาย Invertสลับสีเป็นค่าตรงข้ามในสเปกตรัมสี (สร้าง negative) ตัวอย่างการใช้งาน <html&g