เลือกองค์ประกอบ p ลำดับที่ n นับจากท้าย ใช้ :nth-last-of-type(n) เพื่อเลือกองค์ประกอบ <p> ที่เป็นลำดับที่ n ของพาเรนต์ โดยนับจากลูกสุดท้าย ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p:nth-last-of-type(2) { background: blue; color: white; } &

คุณสมบัติ background-repeat: no-repeat ใช้ background-repeat: no-repeat เพื่อป้องกันไม่ให้ภาพพื้นหลังทำซ้ำ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { background-image: url("https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jp

คุณสมบัติ background-image โดยค่าเริ่มต้น background-image จะทำซ้ำภาพทั้งแนวนอนและแนวตั้งอัตโนมัติ ไม่ต้องกำหนดเพิ่มเติม ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { background-image: url("https://www.tutorialspoint.com/videotutorials/images/tutor_c

เมธอด translateY() ใช้ translateY(y) เพื่อย้ายองค์ประกอบตามแกน Y (แนวตั้ง) รูปแบบไวยากรณ์ translateY(y) y: ความยาว () แทนค่าสัมพัทธ์แกน Y ของเวกเตอร์การย้าย ตัวอย่าง div { width: 40px; height: 40px; background-color: black; } .trans { transform: translateY(20px); background-color: orange;

คุณสมบัติ border-bottom-style ใช้ border-bottom-style เพื่อกำหนดรูปแบบเส้นขอบล่าง ค่าที่ใช้ได้ ได้แก่ dotted, dashed, solid, double, inset, outset เป็นต้น ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p.dotted { border-bottom-style: dotted; } p.double { border-bot

การเลือกองค์ประกอบที่ได้รับโฟกัส ใช้ :focus selector เพื่อจัดสไตล์องค์ประกอบที่กำลังได้รับโฟกัส (เช่น เมื่อคลิกหรือแท็บเข้าไปในช่องกรอกข้อมูล) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:focus { background-color: green; } </style> </head&g

การใช้เมธอด translate3d() ใช้เมธอด translate3d(x, y, z) เพื่อย้ายตำแหน่งองค์ประกอบในพื้นที่ 3 มิติ โดยระบุระยะทางตามแกน X, Y และ Z รูปแบบไวยากรณ์ translate3d(tx, ty, tz) tx: ความยาว () แทนค่าสัมพัทธ์แกน X ของเวกเตอร์การย้าย ty: ความยาว () แทนค่าสัมพัทธ์แกน Y ของเวกเตอร์การย้าย tz: ความยาว () แทนค่า

เพื่อเลือกองค์ประกอบที่ได้รับโฟกัส ให้ใช้ :focus selector ลองรันโค้ดด้านล่างเพื่อใช้งาน :focus selector: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input:focus { background-color: green; } </style> </head> <body> &l

ใช้ CSS :hover selector เพื่อจัดสไตล์ลิงก์เมื่อเมาส์ชี้ (mouse over) ด้วย CSS ลองรันโค้ดด้านล่างเพื่อใช้งาน :hover selector: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> a:hover { background-color: orange; } </style> </head> &l

ใช้ CSS :valid selector เพื่อจัดสไตล์ทุก <input> element ที่มีค่า valid (ถูกต้องตามประเภท) ตัวอย่าง ลองรันโค้ดด้านล่างเพื่อใช้งาน :valid Selector: <!DOCTYPE html> <html> <head> <style> input:valid { background: red; color: white; }

ลองรันโค้ดด้านล่างเพื่อใช้งาน Z-axis 3D Transform ด้วย CSS3: ตัวอย่าง <html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#zDiv { -webkit-transform: rotateZ(9

ด้วย 3D Transforms เราสามารถย้ายองค์ประกอบได้ตามแกน X, Y และ Z ตัวอย่าง ตัวอย่างด้านล่างแสดง 3D Transforms บนแกน X: <html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } d

เมื่อพูดถึงการออกแบบและเลย์เอาท์ เราเรียกว่า Box Model (โมเดลกล่อง) องค์ประกอบทั้งหมดใน HTML ถูกพิจารณาว่าเป็นกล่อง CSS Box Model ประกอบด้วย: Margins (ขอบนอก), Borders (ขอบ), Padding (ระยะภายใน), และ Content (เนื้อหา)

ใช้เมธอด translateX(x) เพื่อย้ายองค์ประกอบตามแกน X รูปแบบไวยากรณ์: translateX(x) ที่นี่: x: เป็นความยาวแทนพิกัด X ของเวกเตอร์การย้าย ตัวอย่าง: div { width: 40px; height: 40px; background-color: black; } .trans { transform: translateX(20px); background-color: orange; }

เพื่อปิดการขึ้นบรรทัดใหม่อัตโนมัติ (text wrapping) ภายในองค์ประกอบ ให้ใช้คุณสมบัติ white-space ลองรันโค้ดด้านล่างเพื่อใช้งาน white-space property: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p { white-space: nowrap; } </style> </he

ตัวอย่างด้านล่างแสดง height, width, color, name, และ duration ของอนิเมชันพร้อมไวยากรณ์ keyframes: ตัวอย่าง <html> <head> <style type=text/css> h1 { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein;

ลองรันโค้ดด้านล่างเพื่อสร้างอนิเมชันเลื่อนซ้าย (Slide Left) ด้วย Keyframes ใน CSS3: ตัวอย่าง <html> <head> <style type=text/css> h1 { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-anim

CSS3 รองรับ Multi Columns เพื่อจัดเรียงข้อความในโครงสร้างแบบหนังสือพิมพ์ คุณสมบัติ Multi Columns ที่ใช้บ่อยที่สุด ดังนี้: คุณสมบัติ (Values) คำอธิบาย (Description) column-countกำหนดจำนวนคอลัมน์ที่องค์ประกอบควรแบ่ง column-fillตัดสินใจวิธีการเติมเนื้อหาลงในคอลั

คุณสมบัติ column-count ใน CSS3 Multi-column ใช้กำหนดจำนวนคอลัมน์ที่องค์ประกอบควรแบ่ง ลองรันโค้ดด้านล่างเพื่อใช้งาน column-count property ด้วย CSS: ตัวอย่าง <html> <head> <style> .multi { /* Column count property */ -webkit-column-count: 4; -moz-

ใช้เมธอด translateZ(z) เพื่อย้าย (transform) องค์ประกอบตามแกน Z รูปแบบไวยากรณ์: translateZ(z) ที่นี่: z: เป็นความยาวแทนองค์ประกอบ Z ของเวกเตอร์การย้าย ตัวอย่าง: div { width: 40px; height: 40px; background-color: black; } .trans { transform: perspective(400px) translateZ(100px); background