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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
wireframe คืออะไร
โดย aninthana ศ 06 ก.ย. 2019 4:36 pm บอร์ด Web Hosting Review - Free Host Share Host VPS
0
48
ศ 06 ก.ย. 2019 4:36 pm โดย aninthana
ทำไมกดปุ่ม wish list กับสินค้าที่มีให้เลือก attributes แล้วถึงได้ขึ้น Please select the product options
โดย jamepiyawat ศ 06 ก.ย. 2019 2:44 pm บอร์ด Joomla Development
1
61
ศ 06 ก.ย. 2019 2:48 pm โดย tsukasaz
เรื่อง หวย
โดย jataz2 ศ 06 ก.ย. 2019 11:20 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
50
ศ 06 ก.ย. 2019 11:20 am โดย jataz2
Meme ประจำวัน - จีเนียสสสสสสสไปเลยยยยยย
โดย chatee supasand พฤ 05 ก.ย. 2019 6:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
96
ศ 06 ก.ย. 2019 10:55 am โดย chatee supasand
ระบบช่วยนำทางตัวใหม่ของ google map ตัวใหม่ที่จะนำ AR เข้ามาช่วยบอกทาง
โดย jamepiyawat พฤ 05 ก.ย. 2019 5:38 pm บอร์ด Share Knowledge
0
57
พฤ 05 ก.ย. 2019 5:38 pm โดย jamepiyawat
สร้าง Infographics ด้วยโปรแกรม Edraw บน Windows
โดย chatee supasand พฤ 05 ก.ย. 2019 5:35 pm บอร์ด Share Knowledge
3
81
อ 08 ต.ค. 2019 10:45 am โดย mindphp
From นี้ใช้ดึงข้อมูลจากฐานข้อมูลหรือเปล่าครับ ?
โดย Patipat พฤ 05 ก.ย. 2019 5:34 pm บอร์ด Joomla Development
0
48
พฤ 05 ก.ย. 2019 5:34 pm โดย Patipat
อยากทราบโค้ดที่ ดึงค่าจาก xml มาใช้งานใน class ครับ
โดย Patipat พฤ 05 ก.ย. 2019 3:40 pm บอร์ด Joomla Development
0
40
พฤ 05 ก.ย. 2019 3:40 pm โดย Patipat
แนะนำเว็บไซต์โหลด Sound เสียงประกอบ VDO ฟรี ถูกลิขสิทธ์ พร้อมวิธีดาวน์โหลด
โดย chatee supasand พฤ 05 ก.ย. 2019 3:32 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
68
พฤ 05 ก.ย. 2019 3:32 pm โดย chatee supasand
Q - ต้องการแก้ไขรายการใบสำคัญจ่ายเงินสดย่อยที่ Approved แล้ว
โดย EyePornnipa พฤ 05 ก.ย. 2019 3:23 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
4
พฤ 05 ก.ย. 2019 3:23 pm โดย EyePornnipa
ผมเปลี่ยนคำสั่ง css ใน class แล้วแต่ class นั้นกลับไปใช้คำสั่งเดิมไม่ยอยให้คำสั่งใหม่ที่ Overrides ไปครับ
โดย jamepiyawat พฤ 05 ก.ย. 2019 3:11 pm บอร์ด HTML CSS
2
69
พฤ 05 ก.ย. 2019 3:26 pm โดย jamepiyawat
Q - ทำไมภาพที่ดึงออกมาแสดงถึงมีขนาดเล็ก ครับ
โดย jamepiyawat พฤ 05 ก.ย. 2019 2:23 pm บอร์ด Joomla Dev
2
8
พฤ 05 ก.ย. 2019 3:23 pm โดย jamepiyawat
Q - แก้โค้ดอย่างไรครับ ส่วนของ html
โดย Patipat พฤ 05 ก.ย. 2019 1:37 pm บอร์ด Joomla Development
2
89
พฤ 05 ก.ย. 2019 3:40 pm โดย Patipat
อยาบรายละเอียดเกียวกับปั้มลมพูม้า
โดย Payroj Udomkan พฤ 05 ก.ย. 2019 11:15 am บอร์ด Programming - PHP
0
60
พฤ 05 ก.ย. 2019 11:15 am โดย Payroj Udomkan
Q - ดึงค่าจากไฟล์ XML มาไม่ได้ครับ
โดย Patipat พ 04 ก.ย. 2019 7:15 pm บอร์ด Joomla Development
3
89
พฤ 05 ก.ย. 2019 12:11 pm โดย Oayanaki
เปิดตัว Android 10 พร้อมฟีเจอร์ใหม่มากมาย เช่นแสดงข้อความจากเสียง, API รักษาความเป็นส่วนตัว, อัพเดตให้เร็วขึ้น
โดย jamepiyawat พ 04 ก.ย. 2019 6:27 pm บอร์ด Share Knowledge
0
60
พ 04 ก.ย. 2019 6:27 pm โดย jamepiyawat
อยากทราบวิธีการวิธีการตรวจสอบการส่ง Email ใน phpbb
โดย Ittichai_chupol พ 04 ก.ย. 2019 4:55 pm บอร์ด Programming - PHP
2
79
พ 04 ก.ย. 2019 5:05 pm โดย Ittichai_chupol
ปิดตำนาน กว่า 30 ปี MSDN Magazine จะย้ายเนื้อหาไปอยู่บน ออนไลน์แล้ว
โดย chatee supasand พ 04 ก.ย. 2019 4:54 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
67
พ 04 ก.ย. 2019 4:54 pm โดย chatee supasand
อาชีพ Localization Project Manager คืออะไร
โดย MiyukiEamrucksa พ 04 ก.ย. 2019 3:52 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
69
พ 04 ก.ย. 2019 3:52 pm โดย MiyukiEamrucksa
ความหมาย และ ความสำคัญของ Localization สำหรับการแปลภาษา
โดย MiyukiEamrucksa พ 04 ก.ย. 2019 3:23 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
64
พ 04 ก.ย. 2019 5:01 pm โดย MiyukiEamrucksa