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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ทำยังไง เมื่อผู้ใช้ต้องการแชร์ รูปแบบแผนการเล่น แล้ว ให้รูปภาพแผนการเล่นนี้แสดงในส่วนของ og image
โดย bankjittapol อ 12 พ.ย. 2019 11:18 am บอร์ด JavaScript & Jquery Ajax
1
46
อ 12 พ.ย. 2019 11:38 am โดย jamepiyawat
จะทำยังไง เมื่อผู้ใช้ กดบันทึกรูปภาพ และให้รุปภาพนั้น เก็บไว้บน server เพื่อที่จะดึงรูปมาให้ ผุ้ใช้ download หรือแสดงภา
โดย bankjittapol อ 12 พ.ย. 2019 11:07 am บอร์ด JavaScript & Jquery Ajax
4
76
อ 12 พ.ย. 2019 8:17 pm โดย thatsawan
ต้องการแสดงรูปภาพ ของนักเตะที่เลือกลงแทนตัว block ตำแหน่งครับ
โดย bankjittapol อ 12 พ.ย. 2019 10:37 am บอร์ด JavaScript & Jquery Ajax
3
73
อ 12 พ.ย. 2019 8:45 pm โดย mindphp
งานประจำวันที่ 12 พฤศจิกายน 2562
โดย numtan5839 อ 12 พ.ย. 2019 10:31 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
14
73
พ 13 พ.ย. 2019 10:44 am โดย numtan5839
งานประจำวันที่ 12 พฤศจิกายน 2562
โดย chaiyasitpraphut อ 12 พ.ย. 2019 9:51 am บอร์ด MT35 - นายชัยยะสิทธิ์ พระพุทธ
6
64
อ 12 พ.ย. 2019 7:03 pm โดย chaiyasitpraphut
การใช้ click กับ onclick เพื่อ hide หรือ show ข้อความ
โดย bankjittapol จ 11 พ.ย. 2019 8:27 pm บอร์ด Jquery & Ajax Knowledge
0
51
จ 11 พ.ย. 2019 8:27 pm โดย bankjittapol
เทคนิคการ Contrast สำหรับงาน Graphic
โดย numtan5839 จ 11 พ.ย. 2019 6:57 pm บอร์ด Graphic design
0
29
จ 11 พ.ย. 2019 6:57 pm โดย numtan5839
การใช้ .attr() jquery เพื่อดึงค่าจาก attribute ของ element หรือกำหนดค่าให้กับ attribute
โดย bankjittapol จ 11 พ.ย. 2019 6:47 pm บอร์ด Jquery & Ajax Knowledge
0
31
จ 11 พ.ย. 2019 6:47 pm โดย bankjittapol
การเดินทางจากจังหวัดศรีสะเกษมากรุงเทพมหานคร
โดย chaiyasitpraphut จ 11 พ.ย. 2019 5:50 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
41
จ 11 พ.ย. 2019 5:50 pm โดย chaiyasitpraphut
จะทำอย่างไรไม่ให้ Xampp รัน PHP สองเวอร์ชั่น เวอร์ชั่น 7 start ขึ้นมาตอนกด start Xampp เวอร์ชั่น 5 ครับ
โดย jamepiyawat จ 11 พ.ย. 2019 5:16 pm บอร์ด Programming - PHP
2
95
จ 11 พ.ย. 2019 6:29 pm โดย jamepiyawat
Email Client คืออะไร
โดย chatee supasand จ 11 พ.ย. 2019 4:54 pm บอร์ด Share Knowledge
0
25
จ 11 พ.ย. 2019 4:54 pm โดย chatee supasand
เเชร์ความรู้ การใช้ Java script ในการลบ และเลือกใช้ข้อมูล
โดย chaiyasitpraphut จ 11 พ.ย. 2019 4:49 pm บอร์ด MT35 - นายชัยยะสิทธิ์ พระพุทธ
0
27
จ 11 พ.ย. 2019 4:49 pm โดย chaiyasitpraphut
ประโยชน์และการนำค่าเฉลี่ยเคลื่อนที่ไปใช้งาน
โดย numtan5839 จ 11 พ.ย. 2019 2:54 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
30
จ 11 พ.ย. 2019 2:54 pm โดย numtan5839
ค่าเฉลี่ยเคลื่อนที่ (Moving Average)
โดย numtan5839 จ 11 พ.ย. 2019 11:57 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
29
จ 11 พ.ย. 2019 11:57 am โดย numtan5839
Note
โดย chaiyasitpraphut จ 11 พ.ย. 2019 11:26 am บอร์ด MT35 - นายชัยยะสิทธิ์ พระพุทธ
0
2
จ 11 พ.ย. 2019 11:26 am โดย chaiyasitpraphut
การใช้ฟังก์ชัน SQRT ใน Excel
โดย numtan5839 จ 11 พ.ย. 2019 11:06 am บอร์ด Microsoft Office Knowledge & line & Etc
0
29
จ 11 พ.ย. 2019 11:06 am โดย numtan5839
งานประจำวันที่ 11 พฤศจิกายน 2562
โดย chaiyasitpraphut จ 11 พ.ย. 2019 10:39 am บอร์ด MT35 - นายชัยยะสิทธิ์ พระพุทธ
3
69
จ 11 พ.ย. 2019 6:05 pm โดย chaiyasitpraphut
list ความรู้ที่มี ว่าเคยเรียน หรือ เคยทำอะไรมาบ้าง
โดย chaiyasitpraphut จ 11 พ.ย. 2019 10:44 am บอร์ด MT35 - นายชัยยะสิทธิ์ พระพุทธ
2
56
อ 12 พ.ย. 2019 2:09 pm โดย chaiyasitpraphut
งานประจำวันที่ 11 พฤศจิกายน 2562
โดย numtan5839 จ 11 พ.ย. 2019 10:08 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
5
21
จ 11 พ.ย. 2019 7:05 pm โดย numtan5839
คู่เงินยอดนิยมใน Forex สำหรับเทรดเดอร์มือใหม่
โดย numtan5839 ส 09 พ.ย. 2019 5:40 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
77
ส 09 พ.ย. 2019 5:40 pm โดย numtan5839