Log in with LINE
- 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
- 12.JPG (14.24 KiB) เปิดดู 109 ครั้ง
- แบบที่ 2
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 3px 3px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>- ผลลัพธ์แบบที่ 2
- 1-3.JPG (14.25 KiB) เปิดดู 109 ครั้ง
- แบบที่ 3
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>- ผลลัพธ์แบบที่ 3
- 1-4.JPG (12.84 KiB) เปิดดู 109 ครั้ง
- แบบที่ 4
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>- ผลลัพธ์แบบที่ 4
- 1-5.JPG (12.53 KiB) เปิดดู 109 ครั้ง
- แบบที่ 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
- 1-6.JPG (11.1 KiB) เปิดดู 109 ครั้ง
----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ HTML , CSS โดยสามารถศึกษาได้จากบทเรียน PHP ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________
----------------------------------------------------------------------------------------------------------------------------------------------------------------
