- 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 คือ ข้อความที่ต้องการจะใส่เงาลงไป
ตัวอย่างโค้ด
- แบบที่ 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 ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________
----------------------------------------------------------------------------------------------------------------------------------------------------------------