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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีบันทึกข้อมูลเข้ารหัสmd5
โดย champp ศ 08 พฤษภาคม 2020 5:55 pm บอร์ด PHP Knowledge
0
1035
ศ 08 พฤษภาคม 2020 5:55 pm โดย champp
human error คืออะไร
โดย champp ศ 08 พฤษภาคม 2020 12:43 pm บอร์ด PHP Knowledge
0
80
ศ 08 พฤษภาคม 2020 12:43 pm โดย champp
Input Type สำหรับใช้งาน
โดย champp ศ 08 พฤษภาคม 2020 12:17 pm บอร์ด PHP Knowledge
0
85
ศ 08 พฤษภาคม 2020 12:17 pm โดย champp
วิธีเปลี่ยนภาพไปเรื่อยๆ ด้วย JavaScript
โดย champp ศ 08 พฤษภาคม 2020 12:14 pm บอร์ด PHP Knowledge
0
84
ศ 08 พฤษภาคม 2020 12:14 pm โดย champp
เครื่องมือในการคำนวณ Bandwidth
โดย prmindphp พฤ 07 พฤษภาคม 2020 6:50 pm บอร์ด MindPHP News & Feedback
0
167
พฤ 07 พฤษภาคม 2020 6:50 pm โดย prmindphp
วิธีตรวจสอบข้อมูลซ้ำ
โดย champp พฤ 07 พฤษภาคม 2020 6:15 pm บอร์ด PHP Knowledge
0
1411
พฤ 07 พฤษภาคม 2020 6:15 pm โดย champp
เขียน CSS ในลักษณะต่างๆ
โดย champp พฤ 07 พฤษภาคม 2020 5:35 pm บอร์ด CSS Knowledge
0
81
พฤ 07 พฤษภาคม 2020 5:35 pm โดย champp
เริ่มเเล้ว "โครงการตู้เย็นข้างบ้านต้านภัย COVID-19" แจกฟรี.. เมล็ดพันธุ์ผักสวนครัวแก่เกษตรกรและประชาชนทั่วไป 10,000 ชุด
โดย thatsawan พ 06 พฤษภาคม 2020 9:55 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
197
พฤ 07 พฤษภาคม 2020 5:05 pm โดย thatsawan
padding ต่างจาก margin อย่างไร
โดย champp พฤ 07 พฤษภาคม 2020 4:49 pm บอร์ด CSS Knowledge
0
169
พฤ 07 พฤษภาคม 2020 4:49 pm โดย champp
IR infrared obstacle detection sensor คืออะไร
โดย champp พฤ 07 พฤษภาคม 2020 4:16 pm บอร์ด IOT - Internet of things
0
84
พฤ 07 พฤษภาคม 2020 4:16 pm โดย champp
ตู้จดหมายแจ้งเตือนผ่านไลน์ได้อย่างไร
โดย champp พฤ 07 พฤษภาคม 2020 3:58 pm บอร์ด IOT - Internet of things
0
147
พฤ 07 พฤษภาคม 2020 3:58 pm โดย champp
วิธีการบันทึกข้อมูลหลายตารางพร้อมกัน
โดย champp พฤ 07 พฤษภาคม 2020 3:39 pm บอร์ด PHP Knowledge
0
1758
พฤ 07 พฤษภาคม 2020 3:39 pm โดย champp
R - เครียร์ข้อมูลทดสอบ ออกจากหน้าเว็บ
โดย mindphp พฤ 07 พฤษภาคม 2020 10:24 am บอร์ด OdooJob.com - Developer
0
1
พฤ 07 พฤษภาคม 2020 10:24 am โดย mindphp
เกษตรกรปลูกพืชเตรียมรับเงินเยียวยา มีขั้นตอนตรวจดังนี้
โดย thatsawan อ 05 พฤษภาคม 2020 5:20 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
148
พ 06 พฤษภาคม 2020 7:53 pm โดย arenaofblood
อัพเดทแบบดับเบิล! Joomla เวอร์ชั่น 3.9.17 กับ 3.9.18
โดย tsukasaz อ 05 พฤษภาคม 2020 2:18 pm บอร์ด MindPHP News & Feedback
0
126
อ 05 พฤษภาคม 2020 2:18 pm โดย tsukasaz
แนะนำเทคนิคการเล่นกีฬา หัวข้อแบตมินตัน
โดย champp อ 05 พฤษภาคม 2020 12:43 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
70
อ 05 พฤษภาคม 2020 12:43 pm โดย champp
แนวทางสร้าง การจัดเก็บแบบระบุตำแหน่ง
โดย tanapong จ 04 พฤษภาคม 2020 11:41 pm บอร์ด Programming - PHP
4
145
พ 13 พฤษภาคม 2020 8:38 pm โดย tanapong
TIP การใช้ SSL ของ cloudflare คู่กับ Let's Encrypt
โดย mindphp ส 02 พฤษภาคม 2020 8:17 pm บอร์ด Linux - Web Server
0
200
ส 02 พฤษภาคม 2020 8:17 pm โดย mindphp
กรมส่งเสริมการเกษตรเปิด "โครงการตู้เย็นข้างบ้านต้านภัย COVID-19" สนับสนุนเมล็ดพันธุ์พืชผักสวนครัวให้แก่เกษตรกรและประชาชน
โดย thatsawan ส 02 พฤษภาคม 2020 2:58 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
146
ส 02 พฤษภาคม 2020 2:58 pm โดย thatsawan
วิธีการจัดรูปแบบเลขบัตรประชาชนที่กรอกอัตโนมัติ
โดย Ittichai_chupol ศ 01 พฤษภาคม 2020 5:48 pm บอร์ด Jquery & Ajax Knowledge
0
264
ศ 01 พฤษภาคม 2020 5:48 pm โดย Ittichai_chupol