ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Q - สอบถามเรื่องอีเมล์แจ้งสถานะ Order ครับ [2019-09][002]
โดย aninthana พ 04 ก.ย. 2019 3:32 pm บอร์ด Diageo - Web Ordering - Tester
4
19
ศ 06 ก.ย. 2019 6:39 pm โดย tsukasaz
ความหมาย และ ความสำคัญของ Localization สำหรับการแปลภาษา
โดย MiyukiEamrucksa พ 04 ก.ย. 2019 3:23 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
50
พ 04 ก.ย. 2019 5:01 pm โดย MiyukiEamrucksa
วิธีการสร้าง cookie เพื่อใช่ใน internet explorer ของ phpbb
โดย Ittichai_chupol พ 04 ก.ย. 2019 3:10 pm บอร์ด PHP Knowledge
0
34
พ 04 ก.ย. 2019 3:10 pm โดย Ittichai_chupol
Joomla Form Database add edit del search
โดย Anonymous พ 04 ก.ย. 2019 2:47 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
44
พ 04 ก.ย. 2019 2:55 pm โดย mindphp
Q - แจ้งเตือนว่า Warning: file_put_contents(/190904.ini): failed to open stream: Permission denied แก้ยังไงครับ
โดย jamepiyawat พ 04 ก.ย. 2019 1:49 pm บอร์ด Joomla Development
2
53
พ 04 ก.ย. 2019 2:12 pm โดย jamepiyawat
Q - อยากทราบตัวดึงข้อมูลจากฐานข้อมูลครับ
โดย Patipat พ 04 ก.ย. 2019 12:19 pm บอร์ด Joomla Development
0
36
พ 04 ก.ย. 2019 12:19 pm โดย Patipat
Q - แปลภาษาใช้งานไม่ได้ครับ
โดย Patipat พ 04 ก.ย. 2019 11:27 am บอร์ด Joomla Development
2
40
พ 04 ก.ย. 2019 11:49 am โดย Patipat
line
โดย โมทีฟ ฉากกั้นอาบน้ำ พ 04 ก.ย. 2019 10:40 am บอร์ด Programming - PHP
0
45
พ 04 ก.ย. 2019 10:40 am โดย โมทีฟ ฉากกั้นอาบน้ำ
งานประจำวันที่ 4 กันยายน 2562
โดย Patipat พ 04 ก.ย. 2019 10:37 am บอร์ด M088 - ปฏิภัทร สารธรรม
2
16
พ 04 ก.ย. 2019 8:02 pm โดย Patipat
สอบถามครับปิดเดือนภาษี คืออะไร
โดย tatiya พ 04 ก.ย. 2019 10:33 am บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
2
73
พ 04 ก.ย. 2019 1:42 pm โดย tatiya
งานประจำวันที่ 4 กันยายน 2562
โดย jirawoot พ 04 ก.ย. 2019 10:06 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
3
7
พฤ 05 ก.ย. 2019 10:08 am โดย jirawoot
งานประจำวันที่ 4 กันยายน 2562
โดย jamepiyawat พ 04 ก.ย. 2019 10:04 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
2
15
พ 04 ก.ย. 2019 8:04 pm โดย jamepiyawat
งานประจำวันที่ 4 กันยายน 2562
โดย chatee supasand พ 04 ก.ย. 2019 10:04 am บอร์ด MT33 - นายชาตรี สุภาแสน
1
8
พ 04 ก.ย. 2019 7:20 pm โดย chatee supasand
งานประจำวันที่ 4 กันยายน 2562
โดย MiyukiEamrucksa พ 04 ก.ย. 2019 9:57 am บอร์ด M093 - มิยูกิ เอี่ยมรักษา
3
48
พ 04 ก.ย. 2019 7:11 pm โดย MiyukiEamrucksa
งานประจำวันที่ 4 กันยายน 2562
โดย EyePornnipa พ 04 ก.ย. 2019 9:56 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
3
62
พฤ 05 ก.ย. 2019 10:09 am โดย EyePornnipa
งานประจำวันที่ 4 กันยายน 2562
โดย aninthana พ 04 ก.ย. 2019 9:32 am บอร์ด M092 - อนินธนา บุญยัง
3
21
พ 04 ก.ย. 2019 6:59 pm โดย aninthana
อยากทราบว่า multiple profile ที่ใช้ใน chrome คืออะไรครับ
โดย Ittichai_chupol อ 03 ก.ย. 2019 7:34 pm บอร์ด Programming - PHP
0
60
อ 03 ก.ย. 2019 7:34 pm โดย Ittichai_chupol
Colocation คืออะไร
โดย aninthana อ 03 ก.ย. 2019 6:48 pm บอร์ด Web Hosting Review - Free Host Share Host VPS
0
51
อ 03 ก.ย. 2019 6:48 pm โดย aninthana
VDO สอนสร้างหน้าเว็บไซต์ด้วย class ของ Bootstrap
โดย jamepiyawat อ 03 ก.ย. 2019 6:42 pm บอร์ด M084 - นายปิยวัช เชาว์วิมล
1
9
ส 14 ก.ย. 2019 12:26 pm โดย mindphp
ปุ่ม Rebuild ที่เอาไว้ใช้เมือแก้เมื่อเมนูย่อยของเราไปอยู่ในเมนูหลักที่ไม่ได้ตั้งค่าไว้
โดย jamepiyawat อ 03 ก.ย. 2019 6:22 pm บอร์ด Joomla user Guide Knowledge
0
39
อ 03 ก.ย. 2019 6:22 pm โดย jamepiyawat