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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
แสดงสินค้าโดยที่ให้ สินค้าแสดงแบบสุ่ม และแสดงแค่ 3 อย่าง ทำอย่างไรครับ
โดย Patipat พฤ 12 ก.ย. 2019 6:13 pm บอร์ด Joomla Development
1
47
พฤ 12 ก.ย. 2019 6:28 pm โดย tsukasaz
Windows 10 สามารถใช้โปรแกรม PowerToys ได้แล้ว
โดย chatee supasand พฤ 12 ก.ย. 2019 6:12 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
38
พฤ 12 ก.ย. 2019 6:12 pm โดย chatee supasand
ดึงชื่อรูปภาพ และนำชื่อมาแสดงเป็นภาพอย่างไรครับ
โดย Patipat พฤ 12 ก.ย. 2019 5:13 pm บอร์ด Joomla Development
2
44
พฤ 12 ก.ย. 2019 5:20 pm โดย Patipat
ปุ่ม Remove กดแล้วไม่ยอมลบสินค้าให้ครับ
โดย jamepiyawat พฤ 12 ก.ย. 2019 4:20 pm บอร์ด Programming - PHP
4
61
พฤ 12 ก.ย. 2019 5:57 pm โดย jamepiyawat
ทำยังไงให้ hover ใน แท็ก div แล้วตัวอักษรใน แท็ก div มันเปลี่ยนสีครับ
โดย jamepiyawat พฤ 12 ก.ย. 2019 3:49 pm บอร์ด HTML CSS
4
51
พฤ 12 ก.ย. 2019 4:13 pm โดย jamepiyawat
VDO - การจ่ายชำระค่าใช้จ่ายต่างๆให้ supplier
โดย EyePornnipa พฤ 12 ก.ย. 2019 3:06 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
2
30
จ 16 ก.ย. 2019 3:09 pm โดย EyePornnipa
VDO - การบันทึกค่าใช้จ่ายเงินสดย่อย
โดย EyePornnipa พฤ 12 ก.ย. 2019 2:58 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
15
พฤ 12 ก.ย. 2019 2:58 pm โดย EyePornnipa
VDO - วิธีอัพเดท contact
โดย EyePornnipa พฤ 12 ก.ย. 2019 2:49 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
2
17
พฤ 12 ก.ย. 2019 6:00 pm โดย EyePornnipa
VDO - วิธีส่ง e-mail ให้ลูกค้า
โดย EyePornnipa พฤ 12 ก.ย. 2019 2:46 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
5
48
อ 17 ก.ย. 2019 12:06 pm โดย EyePornnipa
การบันทึกบัญชีค่าเบี้ยประกันภัยกลุ่ม
โดย EyePornnipa พฤ 12 ก.ย. 2019 2:39 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
1
59
ส 14 ก.ย. 2019 10:25 am โดย Amp_Audit
VDO - การรับชำระ เพื่อออกใบกำกับภาษี/ใบเสร็จรับเงิน และใบกำกับภาษี
โดย EyePornnipa พฤ 12 ก.ย. 2019 2:26 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
4
29
จ 16 ก.ย. 2019 7:21 pm โดย EyePornnipa
VDO - การสร้าง invoice จากการ cfm sale
โดย EyePornnipa พฤ 12 ก.ย. 2019 2:25 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
2
19
ศ 13 ก.ย. 2019 11:46 am โดย EyePornnipa
VDO - การสร้าง Contract
โดย EyePornnipa พฤ 12 ก.ย. 2019 2:21 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
2
24
อ 17 ก.ย. 2019 10:42 am โดย EyePornnipa
ใช้งานฟังก์ชันแล้วขึ้นเออเร่อครับ
โดย Patipat พฤ 12 ก.ย. 2019 2:19 pm บอร์ด Joomla Development
6
65
พฤ 12 ก.ย. 2019 3:27 pm โดย Patipat
B - ข้อความแจ้ง Error ไม่มีคำแปล
โดย mindphp พฤ 12 ก.ย. 2019 12:18 pm บอร์ด MDUpgrade
1
5
ศ 13 ก.ย. 2019 12:07 pm โดย mindphp
B - ติดตั้ง บน Joomla 2.5 Error
โดย mindphp พฤ 12 ก.ย. 2019 11:31 am บอร์ด MDUpgrade
1
2
พฤ 12 ก.ย. 2019 11:36 am โดย mindphp
5 เหตุผล รับเขียนเนื้อหาของบทความ เพราะเหตุใดจะต้องว่าจ้างคนเขียนบทความ
โดย articleheros พฤ 12 ก.ย. 2019 11:26 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
38
พฤ 12 ก.ย. 2019 11:26 am โดย articleheros
ใครติดตั้ง mjupgrade ไม่ได้ เจอ Error ตอนติดตั้ง Extension com_mjupgrade
โดย mindphp พฤ 12 ก.ย. 2019 11:24 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
37
พฤ 12 ก.ย. 2019 11:32 am โดย mindphp
สอบถามเกี่ยวกับการทำ log เก็บการเข้าใช้งานของโปรแกรม wed serviec
โดย jirawoot พฤ 12 ก.ย. 2019 11:19 am บอร์ด Programming - C/C++ & java & Python
1
42
พฤ 12 ก.ย. 2019 11:58 am โดย tatiya
อยากทราบวิธีการใช้งาน unserialize() กับ serialize() ใน phpbb
โดย Ittichai_chupol พฤ 12 ก.ย. 2019 11:04 am บอร์ด Programming - PHP
0
33
พฤ 12 ก.ย. 2019 11:04 am โดย Ittichai_chupol