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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีแก้ปัญหา ปัญหา string conversion [phpBB Debug] PHP Notice: ใน phpBB 3
โดย mindphp จ 15 ต.ค. 2018 12:27 pm บอร์ด Programming - PHP
1
11
จ 15 ต.ค. 2018 12:28 pm โดย mindphp
Review C71 Barcode Mobile Computer Android 4G 1D&2D Scan Head HF RFID/NFC Fingerprint/Iris InfraRed/PSAM Camera/GPS
โดย Barcode Retail จ 15 ต.ค. 2018 12:09 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
11
จ 15 ต.ค. 2018 12:09 pm โดย Barcode Retail
Chainway C71 Barcode Mobile Computer Android 6.0 OS 4G/Dual-band WIFI 5.2'' IPS 1080P Screen 5000mAh Powerful Battery IP
โดย Barcode Retail จ 15 ต.ค. 2018 11:54 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
13
จ 15 ต.ค. 2018 11:54 am โดย Barcode Retail
Restore ฐานข้อมูลขนาดใหญ่ ที่ backup มาจาก mysqldump
โดย mindphp จ 15 ต.ค. 2018 11:53 am บอร์ด SQL Knowledge
0
53
จ 15 ต.ค. 2018 11:53 am โดย mindphp
งานประจำวันที่ 15 ตุลาคม 2561
โดย Ittichai_chupol จ 15 ต.ค. 2018 10:15 am บอร์ด M070 - อิทธิชัย ชูผล
1
5
จ 15 ต.ค. 2018 11:14 am โดย mindphp
php เมื่อเลือกข้อมูลใน select แล้ว text กรอกได้แค่อักษร
โดย pppp อ 14 ต.ค. 2018 1:51 pm บอร์ด JavaScript & Jquery Ajax
0
13
อ 14 ต.ค. 2018 1:51 pm โดย pppp
Q - วิธีการ Add Module แล้วในไปแสดงที่แถบเมนูในส่วนของหน้า ACP ในphpbb
โดย Ittichai_chupol ศ 12 ต.ค. 2018 5:50 pm บอร์ด Programming - PHP
9
68
ศ 12 ต.ค. 2018 6:43 pm โดย thatsawan
การทำไอศครีม กระทิ
โดย Ittichai_chupol ศ 12 ต.ค. 2018 5:14 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
22
ศ 12 ต.ค. 2018 5:14 pm โดย Ittichai_chupol
VDO - Module Search (โมดูล เสิร์ช) สำหรับค้นหาสินค้าในร้านค้า
โดย pprn ศ 12 ต.ค. 2018 5:14 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
4
ศ 12 ต.ค. 2018 5:14 pm โดย pprn
การทำขนมตาล
โดย Ittichai_chupol ศ 12 ต.ค. 2018 5:13 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
21
ศ 12 ต.ค. 2018 5:13 pm โดย Ittichai_chupol
VDO - รีวิว Module Category (โมดูล แคตตากอรี่) สำหรับแสดงหมวดหมู่สินค้า
โดย pprn ศ 12 ต.ค. 2018 4:28 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
3
ศ 12 ต.ค. 2018 4:28 pm โดย pprn
งานประจำวันที่ 12 ตุลาคม 2561
โดย nice_13 ศ 12 ต.ค. 2018 9:48 am บอร์ด M071 - พิชญ์สินี คงจร
1
3
ศ 12 ต.ค. 2018 8:29 pm โดย nice_13
งานประจำวันที่ 12 ตุลาคม 2561
โดย prakon ศ 12 ต.ค. 2018 9:47 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
6
ศ 12 ต.ค. 2018 6:58 pm โดย prakon
งานประจำวันที่ 12 ตุลาคม 2561
โดย pprn ศ 12 ต.ค. 2018 9:09 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
4
ศ 12 ต.ค. 2018 6:12 pm โดย pprn
งานประจำวันที่ 12 ตุลาคม 2561
โดย Ittichai_chupol ศ 12 ต.ค. 2018 9:01 am บอร์ด M070 - อิทธิชัย ชูผล
2
8
ศ 12 ต.ค. 2018 6:37 pm โดย thatsawan
การทำขนมฝอยทอง
โดย Ittichai_chupol พฤ 11 ต.ค. 2018 5:45 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
36
พฤ 11 ต.ค. 2018 5:58 pm โดย daday0807
VDO - รีวิว Module Cart (โมดูล คาร์ท) บอกจำนวนสินค้าและราคาสินค้าในตะกร้าผู้ใช้
โดย pprn พฤ 11 ต.ค. 2018 3:41 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
5
พฤ 11 ต.ค. 2018 3:41 pm โดย pprn
ทดสอบ VS ใช้งานจริง
โดย tai14 พฤ 11 ต.ค. 2018 1:24 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
38
พฤ 11 ต.ค. 2018 1:24 pm โดย tai14
เวลาโปรแกรมมีปัญหา ลูกค้ามักจะบอกว่า...
โดย tai14 พฤ 11 ต.ค. 2018 11:03 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
45
พฤ 11 ต.ค. 2018 11:03 am โดย tai14
งานประจำวันที่ 11 ตุลาคม 2561
โดย pprn พฤ 11 ต.ค. 2018 10:22 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
9
พฤ 11 ต.ค. 2018 7:09 pm โดย pprn