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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
หารายได้ ผ่านเน็ตทำได้จริง หรือ ค่ะ
โดย Anonymous ส 04 ธ.ค. 2004 2:37 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
4274
จ 06 ธ.ค. 2004 7:53 pm โดย บุคคลทั่วไป
แนะนำโปแกรม แปลง mp3 ให้หน่อยค่ะ
โดย Anonymous ศ 03 ธ.ค. 2004 2:50 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
3644
อ 03 พฤษภาคม 2005 3:23 pm โดย nun
google ที่ thainuke
โดย Anonymous พ 17 พ.ย. 2004 2:40 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
2866
พ 17 พ.ย. 2004 3:29 pm โดย บุคคลทั่วไป
หาเงินบนอินเตอร์เน็ต เรื่องง่าย ๆ ใครก็ทำได้
โดย Anonymous พ 10 พ.ย. 2004 8:25 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
3258
พ 10 พ.ย. 2004 9:35 am โดย บุคคลทั่วไป
หน้า add url ไปยัง search ต่างๆ
โดย Anonymous ศ 05 พ.ย. 2004 3:05 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
3006
ส 06 พ.ย. 2004 2:54 pm โดย บุคคลทั่วไป
ธนาคาร
โดย Anonymous ศ 29 ต.ค. 2004 11:24 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
2316
ศ 29 ต.ค. 2004 11:24 am โดย บุคคลทั่วไป
มาดูกัน คิดอ่านซักนิด
โดย Anonymous ศ 15 ต.ค. 2004 4:25 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
4004
ศ 17 ธ.ค. 2004 4:42 pm โดย บุคคลทั่วไป
ทำไม ถึงมีคนโพสหาสมาชิกสมัครเวปว่า หาเงินได้ กัน
โดย icphysics จ 11 ต.ค. 2004 10:34 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
2446
จ 11 ต.ค. 2004 10:34 pm โดย icphysics
กลลวง! หรอความป็นไปได้ กับการหางินผ่านเวป
โดย icphysics ศ 08 ต.ค. 2004 12:49 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
2685
อ 26 ต.ค. 2004 11:36 am โดย บุคคลทั่วไป
เวป แจกโค้ด
โดย Anonymous พ 06 ต.ค. 2004 3:30 pm บอร์ด Programming - C/C++ & java & Python
1
7643
ศ 16 ธ.ค. 2016 8:53 am โดย บุคคลทั่วไป
บทที่ 7
โดย icphysics จ 27 ก.ย. 2004 8:10 pm บอร์ด Programming - C/C++ & java & Python
6
6702
จ 27 ก.ย. 2004 8:21 pm โดย icphysics
บทที่ 6
โดย icphysics จ 27 ก.ย. 2004 7:49 pm บอร์ด Programming - C/C++ & java & Python
5
6198
จ 27 ก.ย. 2004 8:01 pm โดย icphysics
การติดตั้ง Driver
โดย Anonymous ส 25 ก.ย. 2004 11:28 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
2343
ส 25 ก.ย. 2004 11:28 am โดย บุคคลทั่วไป
บทที่ 5
โดย icphysics พ 22 ก.ย. 2004 7:33 pm บอร์ด Programming - C/C++ & java & Python
4
5764
พ 22 ก.ย. 2004 7:40 pm โดย icphysics
ภาษา C อ.คณิต
โดย icphysics พ 22 ก.ย. 2004 7:31 pm บอร์ด Programming - C/C++ & java & Python
0
4870
พ 22 ก.ย. 2004 7:31 pm โดย icphysics
แบบฝึก ภาษา C ของ อ.คณิต
โดย Anonymous พ 15 ก.ย. 2004 11:29 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
5
3886
อ 09 ม.ค. 2018 7:20 pm โดย mindphp
มากันแนะนำแป้นลัด การใช้โปแกรมต่างๆ กันดีกว่าครับ
โดย Anonymous อ 07 ก.ย. 2004 3:25 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
2936
อ 21 ก.ย. 2004 1:52 pm โดย บุคคลทั่วไป
ภาษาไทย สำหรับ dos
โดย Anonymous พ 04 ส.ค. 2004 3:40 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
3001
พ 04 ส.ค. 2004 3:40 pm โดย บุคคลทั่วไป
ความเหมือนของ PHP กับ C/C++
โดย Anonymous ศ 30 ก.ค. 2004 2:04 pm บอร์ด Programming - PHP
2
2858
ส 08 เม.ย. 2006 8:04 pm โดย บุคคลทั่วไป
ใครมี โปแกรม Visual c++ บ้าง ครับ
โดย icphysics พฤ 29 ก.ค. 2004 12:33 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
3982
พฤ 29 ก.ค. 2004 12:33 am โดย icphysics