ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 4 CSS3 Text Effects

ในบทนี้เราจะพูดถึงการใส่เอฟเฟคให้กับตัวอักษร ดังนี้
  -text shadow (การใส่เงาให้ตัวอักษร) ไม่สามารถใช้ได้กับ Internet Explorer
  -text wrapping (การจัดวางตัวอักษรให้อยู่ในกรอบภาพ) สามารถใช้ได้กับทุกบราวเวอร์
ตัวอย่างเช่น

   1.text shadow
เราสามารถกำหนดลักษณะของเงานที่จะเกิดขึ้น ไม่ว่าจะแนวตั้ง, แนวนอน, มีความเบลอมากหรือเบลอน้อย, และสีของเงาที่ต้องการให้เกิดขึ้น

<html>
<head>
<style>
h1
{text-shadow: 5px 5px 5px #46b830;}
</style>
</head>
<body>

<h1>ข้อความของฉัน</h1>

</body>
</html>

ผลลัพธ์คือ

คำอธิบาย

-ค่าตัวแรก เป็นระยะห่างที่เงานั้นห่างจากตัวอักษรเป็นระยะเท่าไหร่ในแนวนอน (ค่าที่แรก นี่ถ้าเป็นบวก เงาจะทอดไปทางด้านซ้าย)
-ค่าตัวที่สอง เป็นระยะห่างที่เงานั้นห่างจากตัวอักษรเป็นระยะเท่าไหร่ในแนวตั้ง (ค่าที่สอง นี่ถ้าเป็นบวก เงาจะทอดไปทางด้านบน)
-ค่าตัวที่สาม เป็นความเบลอของเงา หรือ blur radius ยิ่งค่ามาก เงาก็จะยิ่งเบลอขึ้น
-ค่าตัวสุดท้าย สีของเงา สามารถใส่เป็นค่าสีตามตัวอย่าง หรือใส่เป็นชื่อสีภาษาอังกฤษ และใส่แบบ rgba ก็ได้ทั้งนั้น

  1.1 การใส่เงาหลายๆ ชั้น
   เราสามารถใส่ค่าให้ได้มากกว่า 1 ชั้น โดยแต่ละชั้นนั้น เราจะคั่นด้วย , อย่างเช่น

<html>
<head>
<style>
h1
{text-shadow:0px 0px 4px green, 0px -5px 4px yellow, 2px -10px 6px orange, -2px -15px 11px red, 2px -25px 18px black;}
</style>
</head>
<body>

<h1>ข้อความของฉัน</h1>

</body>
</html>

ผลลัพธ์คือ


1.2 การทำตัวอักษรนูน

<html>
<head>
<style>
h1
{color:#CCC;
text-shadow:-1px -1px #FFFFFF, 1px 1px #333333;}
</style>
</head>
<body>

<h1>ข้อความของฉัน</h1>

</body>
</html>

ผลลัพธ์คือ


1.3 การทำข้อความแบบยุบ

<html>
<head>
<style>
h1
{color: #CCC;
text-shadow : 0px -1px 1px #333333}
</style>
</head>
<body>
<h1>ข้อความของฉัน</h1>

</body>
</html>

ผลลัพธ์คือ

   ลักษณะอักษรแบบนูนและแบบยุบจะมีการใส่ค่าคล้ายๆกัน แต่ต่างกันที่ทิศทางของเงา ซึ่งเงานี่เองเป็นตัวที่ทำให้อักษรมีลักษระนูนและยุบแตกต่างกันไป

อ่านเพิ่มเติม
บทที่ 4 CSS3 Text Effects ตอน 2

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 11 กันยายน 2562
โดย aninthana พ 11 ก.ย. 2019 10:18 am บอร์ด M092 - อนินธนา บุญยัง
2
18
พ 11 ก.ย. 2019 7:10 pm โดย aninthana
งานประจำวันที่ 11 กันยายน 2562
โดย jamepiyawat พ 11 ก.ย. 2019 10:06 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
1
11
พ 11 ก.ย. 2019 7:57 pm โดย jamepiyawat
งานประจำวันที่ 11 กันยายน 2562
โดย jirawoot พ 11 ก.ย. 2019 10:05 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
1
5
พ 11 ก.ย. 2019 7:45 pm โดย jirawoot
งานประจำวันที่ 11 กันยายน 2562
โดย EyePornnipa พ 11 ก.ย. 2019 10:02 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
2
52
พ 11 ก.ย. 2019 7:21 pm โดย EyePornnipa
งานประจำวันที่ 11 กันยายน 2562
โดย chatee supasand พ 11 ก.ย. 2019 9:33 am บอร์ด MT33 - นายชาตรี สุภาแสน
0
10
พ 11 ก.ย. 2019 9:33 am โดย chatee supasand
Q - ขอสอบถามเว็บไซด์สั่งสินค้าถ้าเราปิดเว็บแล้ว [2019-09][004]
โดย aninthana อ 10 ก.ย. 2019 5:57 pm บอร์ด Diageo - Web Ordering - Tester
8
28
พฤ 12 ก.ย. 2019 11:31 am โดย aninthana
อยากทราบวิธีการปรับค่าการแจ้งเตือน ในเว็บบอร์ด phpbb เมื่อมีการแจ้งเตือนเพิ่มเข้ามา
โดย Ittichai_chupol อ 10 ก.ย. 2019 5:14 pm บอร์ด Programming - PHP
1
49
อ 10 ก.ย. 2019 6:22 pm โดย mindphp
Tile ผู้ผลิตอุปกรณ์ Tracker สำหรับตามหาสิ่งของหายสามารถสั่งการได้ด้วย Google Assistant
โดย jamepiyawat อ 10 ก.ย. 2019 5:10 pm บอร์ด Share Knowledge
0
44
อ 10 ก.ย. 2019 5:10 pm โดย jamepiyawat
การรับชำระค่าส่วนกลางล่วงหน้า
โดย EyePornnipa อ 10 ก.ย. 2019 4:58 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
1
25
อ 10 ก.ย. 2019 6:15 pm โดย mindphp
E-Bidding คืออะไร
โดย EyePornnipa อ 10 ก.ย. 2019 4:19 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
49
อ 10 ก.ย. 2019 4:19 pm โดย EyePornnipa
จากฟังก์ชันเรียกใช้รูปภาพ ใช้งานอย่างไรครับ
โดย Patipat อ 10 ก.ย. 2019 3:37 pm บอร์ด Joomla Development
2
43
อ 10 ก.ย. 2019 4:06 pm โดย Patipat
เรียกใช้ อาเรย์ forech อย่างไรครับ
โดย Patipat อ 10 ก.ย. 2019 11:53 am บอร์ด Joomla Development
4
76
อ 10 ก.ย. 2019 3:14 pm โดย Patipat
R - การคำนวณค่าไฟที่ประหยัดไฟจากการปรับอุณหภูมิแอร์ เพิ่มขึ้น 1 องศา [2019-09][003]
โดย aninthana อ 10 ก.ย. 2019 10:49 am บอร์ด IIEC - Feedback Service System - Tester
1
5
อ 10 ก.ย. 2019 8:45 pm โดย tsukasaz
งานประจำวันที่ 10 กันยายน 2562
โดย Patipat อ 10 ก.ย. 2019 10:26 am บอร์ด M088 - ปฏิภัทร สารธรรม
1
8
อ 10 ก.ย. 2019 7:24 pm โดย Patipat
งานประจำวันที่ 10 กันยายน 2562
โดย aninthana อ 10 ก.ย. 2019 10:25 am บอร์ด M092 - อนินธนา บุญยัง
2
14
พ 11 ก.ย. 2019 4:48 am โดย mindphp
งานประจำวันที่ 10 กันยายน 2562
โดย EyePornnipa อ 10 ก.ย. 2019 10:17 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
3
43
อ 10 ก.ย. 2019 7:22 pm โดย EyePornnipa
งานประจำวันที่ 10 กันยายน 2562
โดย jirawoot อ 10 ก.ย. 2019 10:11 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
1
4
อ 10 ก.ย. 2019 7:33 pm โดย jirawoot
งานประจำวันที่ 10 กันยายน 2562
โดย jamepiyawat อ 10 ก.ย. 2019 10:10 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
1
17
อ 10 ก.ย. 2019 7:36 pm โดย jamepiyawat
งานประจำวันที่ 10 กันยายน 2562
โดย chatee supasand อ 10 ก.ย. 2019 9:33 am บอร์ด MT33 - นายชาตรี สุภาแสน
2
8
อ 10 ก.ย. 2019 7:21 pm โดย chatee supasand
ฟีเจอร์ Ambient Mode ฟีเจอร์ใหม่ของ Google Assistant ที่จะเปลี่ยนมือถือ-แท็บเล็ตให้เป็นหน้าจออัจฉริยะ
โดย jamepiyawat จ 09 ก.ย. 2019 6:48 pm บอร์ด Share Knowledge
0
48
จ 09 ก.ย. 2019 6:48 pm โดย jamepiyawat