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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
รู้จักกับระบบปฎิบัติการ Harmony OS ที่ไม่ได้มีไว้แค่มือถือเท่านั้น
โดย birdkritsna อ 17 ก.ย. 2019 11:06 am บอร์ด Mobile Application Developing- Android, iOS
0
35
อ 17 ก.ย. 2019 11:06 am โดย birdkritsna
งานประจำวันที่ 17 กันยายน 2562
โดย birdkritsna อ 17 ก.ย. 2019 10:35 am บอร์ด M094 - กฤษณะ จะโรจน์รัมย์
3
25
อ 17 ก.ย. 2019 7:22 pm โดย birdkritsna
R - mdsoft_seleniumTest_mzchelix_byM088 (MT33) ทำเทส selenium
โดย chatee supasand อ 17 ก.ย. 2019 10:30 am บอร์ด MT33 - นายชาตรี สุภาแสน
1
15
พ 18 ก.ย. 2019 1:40 pm โดย chatee supasand
R - mdsoft_seleniumTest_mzccart_byM084 (MT33) ทำเทส selenium
โดย chatee supasand อ 17 ก.ย. 2019 10:29 am บอร์ด MT33 - นายชาตรี สุภาแสน
1
15
พ 18 ก.ย. 2019 1:39 pm โดย chatee supasand
งานประจำวันที่ 17 กันยายน 2562
โดย Patipat อ 17 ก.ย. 2019 10:23 am บอร์ด M088 - ปฏิภัทร สารธรรม
3
15
อ 17 ก.ย. 2019 7:22 pm โดย Patipat
งานประจำวันที่ 17 กันยายน 2562
โดย chatee supasand อ 17 ก.ย. 2019 10:07 am บอร์ด MT33 - นายชาตรี สุภาแสน
1
7
อ 17 ก.ย. 2019 7:37 pm โดย chatee supasand
งานประจำวันที่ 17 กันยายน 2562
โดย jamepiyawat อ 17 ก.ย. 2019 10:02 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
1
8
อ 17 ก.ย. 2019 7:29 pm โดย jamepiyawat
งานประจำวันที่ 17 กันยายน 2562
โดย jirawoot อ 17 ก.ย. 2019 9:55 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
1
9
อ 17 ก.ย. 2019 7:27 pm โดย jirawoot
งานประจำวันที่ 17 กันยายน 2562
โดย EyePornnipa อ 17 ก.ย. 2019 9:44 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
9
50
อ 17 ก.ย. 2019 3:06 pm โดย EyePornnipa
สร้างบอร์ดขึ้นมาใหม่แล้วสมาชิกใหม่มองไม่
โดย Jumpapong จ 16 ก.ย. 2019 10:20 pm บอร์ด Programming - PHP
3
49
อ 17 ก.ย. 2019 4:17 pm โดย mindphp
ปัญหาติดตั้ง Mod slideshowck
โดย Anonymous จ 16 ก.ย. 2019 8:49 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
23
จ 16 ก.ย. 2019 8:54 pm โดย mindphp
อยากให้ไฟล์แสดงบนหน้าจอของ Tkinter ค่ะ
โดย mashato จ 16 ก.ย. 2019 8:21 pm บอร์ด Programming - C/C++ & java & Python
4
44
อ 17 ก.ย. 2019 3:22 pm โดย mindphp
Incomterms คืออะไร
โดย aninthana จ 16 ก.ย. 2019 6:41 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
29
จ 16 ก.ย. 2019 6:41 pm โดย aninthana
ติดตั้ง SSL ให้เว็บไซต์ ดีอย่างไร
โดย aninthana จ 16 ก.ย. 2019 6:36 pm บอร์ด Web Hosting Review - Free Host Share Host VPS
1
46
อ 17 ก.ย. 2019 2:14 pm โดย Pannarai2015
ข่าวแว่วมาตามลุ่มแม่น้ำ Surface Laptop 3 จะออกรุ่นหน้าจอ 15 เพิ่มจากรุ่นเดิมที่ 13.5
โดย chatee supasand จ 16 ก.ย. 2019 6:14 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
22
จ 16 ก.ย. 2019 6:14 pm โดย chatee supasand
การขอ STATEMENT ธนาคารออมสิน
โดย EyePornnipa จ 16 ก.ย. 2019 4:50 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
1
24
จ 16 ก.ย. 2019 5:11 pm โดย thatsawan
การขอ STATEMENT ธนาคารกรุงไทย
โดย EyePornnipa จ 16 ก.ย. 2019 4:50 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
2
36
อ 17 ก.ย. 2019 2:27 pm โดย EyePornnipa
การขอ STATEMENT ธนาคารธนชาต
โดย EyePornnipa จ 16 ก.ย. 2019 4:20 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
18
จ 16 ก.ย. 2019 4:20 pm โดย EyePornnipa
วิธีการเดินจากบ้าน บุรีรัมย์ - กรุงเทพฯ
โดย birdkritsna จ 16 ก.ย. 2019 4:18 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
37
จ 16 ก.ย. 2019 4:18 pm โดย birdkritsna
สร้าง tab ยังไงให้สามารถใช้งานได้ครับ
โดย jamepiyawat จ 16 ก.ย. 2019 3:33 pm บอร์ด HTML CSS
2
40
จ 16 ก.ย. 2019 4:04 pm โดย jamepiyawat