- CSS ย่อมาจาก Cascading Style Sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ
- คุณสมมบัติของ CSS เราจะสามารถเพิ่มเงาข้อความและองค์ประกอบได้ โดยสามารถเพิ่มเงาให้กับ text (ข้อความ) หรือ box (กล่องข้อความ) ได้
รูปแบบโค้ด
โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <head> <style> h1 { text-shadow: xpx xpx; } </style> </head> <body> <h1>Text_edit</h1> </body> </html>
- อธิบายโค้ด
- - xpx ตัวเลข x คือ ตัวเลขที่สามารถกำหนดได้ว่าจะใส่เลขอะไรก็ได้
- Text_edit คือ ข้อความที่ต้องการจะใส่เงาลงไป
- - xpx ตัวเลข x คือ ตัวเลขที่สามารถกำหนดได้ว่าจะใส่เลขอะไรก็ได้
- แบบที่ 1
โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 3px 3px; } </style> </head> <body> <h1>Text-shadow effect!</h1> </body> </html>
- ผลลัพธ์แบบที่ 1
- แบบที่ 2
โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 3px 3px red; } </style> </head> <body> <h1>Text-shadow effect!</h1> </body> </html>
- ผลลัพธ์แบบที่ 2
- แบบที่ 3
โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 2px 2px 5px red; } </style> </head> <body> <h1>Text-shadow effect!</h1> </body> </html>
- ผลลัพธ์แบบที่ 3
- แบบที่ 4
โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 0 0 3px #FF0000; } </style> </head> <body> <h1>Text-shadow effect!</h1> </body> </html>
- ผลลัพธ์แบบที่ 4
- แบบที่ 5
โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <head> <style> h1 { color: white; text-shadow: 2px 2px 4px #000000; } </style> </head> <body> <h1>Text-shadow effect!</h1> </body> </html>
- ผลลัพธ์แบบที่ 5
----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ HTML , CSS โดยสามารถศึกษาได้จากบทเรียน PHP ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________
----------------------------------------------------------------------------------------------------------------------------------------------------------------