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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
กดภาพเล็กๆ ด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ ทำยังไง
โดย bolue ส 06 มิ.ย. 2020 11:20 am บอร์ด JavaScript & Jquery Ajax
2
97
จ 08 มิ.ย. 2020 1:52 pm โดย LEG
Celeb net worth?
โดย Bailey99 ศ 05 มิ.ย. 2020 7:03 pm บอร์ด PHP Knowledge
1
75
ศ 05 มิ.ย. 2020 7:28 pm โดย rajneeskumar
วิธีการ ใช้งาน vuetify คู่กับ vue.js
โดย bolue ศ 05 มิ.ย. 2020 6:02 pm บอร์ด CSS Knowledge
0
39
ศ 05 มิ.ย. 2020 6:02 pm โดย bolue
วิธีการ ติดตั้ง vue.js สำหรับผู้เริ่มต้น หัดเขียน สอนติดตั้ง
โดย bolue ศ 05 มิ.ย. 2020 4:55 pm บอร์ด Jquery & Ajax Knowledge
0
103
ศ 05 มิ.ย. 2020 4:55 pm โดย bolue
วิธีการ ใช้ Grid ออกแบบเป็น responsive design โดย vuetify
โดย bolue ศ 05 มิ.ย. 2020 3:36 pm บอร์ด CSS Knowledge
0
73
ศ 05 มิ.ย. 2020 3:36 pm โดย bolue
วิธีการ เรียนใช้ dialog จาก components โดย vue.js
โดย bolue ศ 05 มิ.ย. 2020 1:45 pm บอร์ด Jquery & Ajax Knowledge
0
67
ศ 05 มิ.ย. 2020 1:45 pm โดย bolue
วิธีการ การเรียกใช้ methods โดย vue.js
โดย bolue ศ 05 มิ.ย. 2020 1:17 pm บอร์ด Jquery & Ajax Knowledge
0
34
ศ 05 มิ.ย. 2020 1:17 pm โดย bolue
วิธีการ ค้นหาด้วยการใช้ watch โดย vue.js
โดย bolue ศ 05 มิ.ย. 2020 12:45 pm บอร์ด Jquery & Ajax Knowledge
0
29
ศ 05 มิ.ย. 2020 12:45 pm โดย bolue
วิธีการ แสดงผลข้อมูล จากน้อยไปมาก มากไปน้อย โดย Python
โดย bolue ศ 05 มิ.ย. 2020 11:56 am บอร์ด Python Knowledge
0
36
ศ 05 มิ.ย. 2020 11:56 am โดย bolue
วิธีการ ค้นหาแบบช่วงวันที่ โดย Python
โดย bolue ศ 05 มิ.ย. 2020 11:25 am บอร์ด Python Knowledge
0
41
ศ 05 มิ.ย. 2020 11:25 am โดย bolue
กองทุนประกันสังคม มีผู้ประกันตนกี่ประเภท ??
โดย natthanit.r2538 พฤ 04 มิ.ย. 2020 5:53 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
36
พฤ 04 มิ.ย. 2020 5:53 pm โดย natthanit.r2538
วิธีการ ลงเวลา โดย Python
โดย bolue พฤ 04 มิ.ย. 2020 4:09 pm บอร์ด Python Knowledge
0
71
พฤ 04 มิ.ย. 2020 4:09 pm โดย bolue
การยื่นแบบ ภ.ง.ด. 53 ออนไลน์ สอนวิธีการยื่นแบบออนไล์ ทำได้ด้วยตัวเอง
โดย natthanit.r2538 พฤ 04 มิ.ย. 2020 3:51 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
1
64
พฤ 04 มิ.ย. 2020 4:16 pm โดย natthanit.r2538
วิธีการ โชว์ข้อมูลด้วยการ Format วันที่ โดย Python
โดย bolue พฤ 04 มิ.ย. 2020 3:38 pm บอร์ด Python Knowledge
0
63
พฤ 04 มิ.ย. 2020 3:38 pm โดย bolue
การยื่นแบบ ภ.ง.ด. 3 ออนไลน์ สรุปขั้นตอนยื่นแบบภาษี ออนไลน์
โดย natthanit.r2538 พฤ 04 มิ.ย. 2020 2:54 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
1
52
พฤ 04 มิ.ย. 2020 3:08 pm โดย natthanit.r2538
วิธีการเดินทางจาก ปทุมธานี มา กรุงเทพฯ
โดย bolue พฤ 04 มิ.ย. 2020 1:59 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
40
พฤ 04 มิ.ย. 2020 1:59 pm โดย bolue
วิธีการ Search database แบบพื้นฐานๆ โดย Python
โดย bolue พฤ 04 มิ.ย. 2020 1:55 pm บอร์ด Python Knowledge
0
70
พฤ 04 มิ.ย. 2020 1:55 pm โดย bolue
การยื่นแบบ ภ.ง.ด.1 ออนไลน์ ขั้นตอนการยืนแบบออนไลน์
โดย natthanit.r2538 พฤ 04 มิ.ย. 2020 12:35 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
2
58
พฤ 04 มิ.ย. 2020 1:40 pm โดย natthanit.r2538
สอบถามเรื่องการแนบรูปในกระทู้ค่ะ
โดย natthanit.r2538 พฤ 04 มิ.ย. 2020 12:34 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
2
65
พฤ 04 มิ.ย. 2020 2:31 pm โดย natthanit.r2538
B - ยังขาดหน้าผลการค้นหา จาก search.php
โดย mindphp ศ 29 พฤษภาคม 2020 6:11 am บอร์ด FDD (Main)
0
1
ศ 29 พฤษภาคม 2020 6:11 am โดย mindphp