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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 20 พฤษภาคม 2563
โดย sirirat พ 20 พฤษภาคม 2020 10:02 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
4
34
พ 20 พฤษภาคม 2020 8:29 pm โดย sirirat
R - template อีเมล
โดย tsukasaz อ 19 พฤษภาคม 2020 9:23 pm บอร์ด OdooJob.com - Developer
1
5
พฤ 21 พฤษภาคม 2020 1:55 am โดย mindphp
สรุปการเรียนรู้ประจำวัน 19/05/63
โดย sirirat อ 19 พฤษภาคม 2020 6:58 pm บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
0
6
อ 19 พฤษภาคม 2020 6:58 pm โดย sirirat
สรุปการคุยกับลูกค้าครั้งแรก
โดย sirirat อ 19 พฤษภาคม 2020 6:18 pm บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
0
11
อ 19 พฤษภาคม 2020 6:18 pm โดย sirirat
สรุปงานที่เคยทำ (เคยฝึกงาน)
โดย sirirat อ 19 พฤษภาคม 2020 4:42 pm บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
0
14
อ 19 พฤษภาคม 2020 4:42 pm โดย sirirat
งานประจำวันที่ 19 พฤษภาคม 2563
โดย sirirat อ 19 พฤษภาคม 2020 10:01 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
9
74
พ 20 พฤษภาคม 2020 11:15 pm โดย sirirat
การตรวจสอบข้อผิดผลาดในโปรแกรม ERP
โดย sirirat อ 19 พฤษภาคม 2020 3:29 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
81
อ 19 พฤษภาคม 2020 3:29 pm โดย sirirat
วิธีการตรวจสอบว่า ใครเป็น Admin สูงสุดในเว็บบอร์ด phpbb
โดย Ittichai_chupol อ 19 พฤษภาคม 2020 3:10 pm บอร์ด Programming - PHP
1
110
อ 19 พฤษภาคม 2020 3:23 pm โดย thatsawan
การกำหนดสิทธิ์การใช้งานโปรแกรม ERP
โดย sirirat อ 19 พฤษภาคม 2020 2:56 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
73
อ 19 พฤษภาคม 2020 2:56 pm โดย sirirat
การกำหนดสิทธิ์การใช้งานโปรแกรม ERP
โดย Anonymous อ 19 พฤษภาคม 2020 2:35 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
77
อ 19 พฤษภาคม 2020 2:35 pm โดย บุคคลทั่วไป
การสร้าง flowchart ด้วยโปรแกรม Visio
โดย sirirat อ 19 พฤษภาคม 2020 12:43 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
204
อ 19 พฤษภาคม 2020 12:43 pm โดย sirirat
ทำความรู้จัก Mindjet MindManager
โดย sirirat อ 19 พฤษภาคม 2020 12:01 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
111
อ 19 พฤษภาคม 2020 12:01 pm โดย sirirat
อยากทราบวิธีการตั้งค่า php เพื่อที่จะให้ cron ใน phpbb สามารถทำงานได้
โดย Ittichai_chupol อ 19 พฤษภาคม 2020 10:16 am บอร์ด Programming - PHP
0
99
อ 19 พฤษภาคม 2020 10:16 am โดย Ittichai_chupol
ขอความช่วยเหลือ PyCharm
โดย kaao_19 จ 18 พฤษภาคม 2020 10:35 pm บอร์ด Programming - C/C++ & java & Python
2
1038
อ 19 พฤษภาคม 2020 1:23 am โดย kaao_19
สรุปการเรียนรู้ประจำวัน 18/05/63
โดย sirirat จ 18 พฤษภาคม 2020 9:42 pm บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
0
14
จ 18 พฤษภาคม 2020 9:42 pm โดย sirirat
มาทำความรู้จักกับจังหวัดกระบี่ สำหรับผู้สนใจจะมาท่องเที่ยว
โดย sirirat จ 18 พฤษภาคม 2020 5:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
102
ศ 19 มิ.ย. 2020 1:03 am โดย mindphp
สอบถาม ผมกำลังทำ gitlab CI สร้างไฟล์ yml มาแล้วแต่ตอนทำงานมันเป็นแบบนี้ครับเป็นเพราะอะไรครับ
โดย jirawoot จ 18 พฤษภาคม 2020 5:04 pm บอร์ด Programming - C/C++ & java & Python
1
184
อ 19 พฤษภาคม 2020 7:33 pm โดย jirawoot
วิธีการเดินทางจาก จ.กระบี่ มา กทม.
โดย sirirat จ 18 พฤษภาคม 2020 2:49 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
87
จ 18 พฤษภาคม 2020 2:49 pm โดย sirirat
อยากทราบวิธีการ แปลง ไฟล์ html มาเป็น pdf
โดย Ittichai_chupol จ 18 พฤษภาคม 2020 12:26 pm บอร์ด Programming - PHP
2
114
พ 20 พฤษภาคม 2020 1:39 pm โดย Ittichai_chupol
งานประจำวันที่ 18 พฤษภาคม 2563
โดย sirirat จ 18 พฤษภาคม 2020 10:50 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
3
44
จ 18 พฤษภาคม 2020 6:43 pm โดย sirirat