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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีนอน 8 ชั่วโมง ใน 4 ชั่วโมง
โดย Before Dong อ 16 ม.ค. 2018 10:21 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
18
อ 16 ม.ค. 2018 10:21 am โดย Before Dong
งานประจำวันที่ 16 มกราคม 2561
โดย Four อ 16 ม.ค. 2018 9:46 am บอร์ด MT22 - อิษยา งามสอาด
1
20
อ 16 ม.ค. 2018 10:56 am โดย AePongsak
งานประจำวันที่ 16 มกราคม 2561
โดย Jom07 อ 16 ม.ค. 2018 9:44 am บอร์ด MT23 - สุพรรษา พูลตา
1
11
อ 16 ม.ค. 2018 11:11 am โดย AePongsak
งานประจำวันที่ 16 มกราคม 2561
โดย Parichat อ 16 ม.ค. 2018 9:40 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
1
14
อ 16 ม.ค. 2018 10:05 am โดย AePongsak
เบอร์โทร ศูนย์บริการ ASUS ศูนย์บริการลูกค้าสัมพันธ์ (Call Center) ถามอะไหล่ ค่าบริการงานซ่อมได้
โดย mindphp อ 16 ม.ค. 2018 6:53 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
10
อ 16 ม.ค. 2018 6:53 am โดย mindphp
ตามหา พัดลมโน๊ตบุ๊ค ASUS รุ่น Pro36S ของ dc brushless
โดย mindphp อ 16 ม.ค. 2018 6:29 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
6
อ 16 ม.ค. 2018 6:29 am โดย mindphp
จะโหลด Android Studio กับ javaJDK ได้ที่ไหนค่ะ
โดย Anonymous จ 15 ม.ค. 2018 8:29 pm บอร์ด Mobile Programming - Android, iOS, Window Phone
1
19
จ 15 ม.ค. 2018 9:25 pm โดย thatsawan
การใช้งานคำสั่ง inner join ใน SQL(เอสคิวเเอล)
โดย Parichat จ 15 ม.ค. 2018 5:50 pm บอร์ด SQL Knowledge
0
17
จ 15 ม.ค. 2018 5:50 pm โดย Parichat
ประเภทของ Firewall (ไฟร์วอลล์)
โดย Jom07 จ 15 ม.ค. 2018 5:42 pm บอร์ด Software testing
0
13
จ 15 ม.ค. 2018 5:42 pm โดย Jom07
เทคนิคการโอนย้ายข้อมูล 2 คอมพิวเตอร์
โดย Jom07 จ 15 ม.ค. 2018 5:41 pm บอร์ด Software testing
0
15
จ 15 ม.ค. 2018 5:41 pm โดย Jom07
Android Studio ไม่อนุญาตให้กรอกข้อมูลใน EditText
โดย Four จ 15 ม.ค. 2018 4:53 pm บอร์ด Mobile Application Developing- Android, iOS
0
11
จ 15 ม.ค. 2018 4:53 pm โดย Four
Android Studio การกำหนดขนาดข้อความใน TextView
โดย Four จ 15 ม.ค. 2018 2:50 pm บอร์ด Mobile Application Developing- Android, iOS
0
11
จ 15 ม.ค. 2018 2:50 pm โดย Four
สวิตซ์ (Switch) คืออะไร
โดย Jom07 จ 15 ม.ค. 2018 1:35 pm บอร์ด IOT - Internet of things
0
15
จ 15 ม.ค. 2018 1:35 pm โดย Jom07
การใช้งาน Tabs(แท็บ) ใน Bootstrap 4(บูตสแตบ 4)
โดย Parichat จ 15 ม.ค. 2018 12:37 pm บอร์ด Booststap Knowledge
0
9
จ 15 ม.ค. 2018 12:37 pm โดย Parichat
ฮับ (HUB) คืออะไร
โดย Jom07 จ 15 ม.ค. 2018 12:33 pm บอร์ด IOT - Internet of things
0
19
จ 15 ม.ค. 2018 12:33 pm โดย Jom07
การใช้งาน Carousel(แครี่เซ้า) ใน Bootstrap 4(บูตสแตบ 4)
โดย Parichat จ 15 ม.ค. 2018 12:10 pm บอร์ด Booststap Knowledge
0
13
จ 15 ม.ค. 2018 12:10 pm โดย Parichat
Android Studio การนับจำนวนตัวอักษรใน TextView
โดย Four จ 15 ม.ค. 2018 11:50 am บอร์ด Mobile Application Developing- Android, iOS
0
11
จ 15 ม.ค. 2018 11:50 am โดย Four
การใช้งาน Popover(ป็อบโอเวอร์) ใน Bootstrap 4(บูตสแตบ 4)
โดย Parichat จ 15 ม.ค. 2018 11:43 am บอร์ด Booststap Knowledge
0
9
จ 15 ม.ค. 2018 11:43 am โดย Parichat
GAMEMAKER: STUDIO
โดย Jom07 จ 15 ม.ค. 2018 11:34 am บอร์ด Software testing
0
12
จ 15 ม.ค. 2018 11:34 am โดย Jom07
Android Studio การสั่งให้ Activity อื่นทำงาน เพื่อนำผลลัพธ์มาใช้
โดย Four จ 15 ม.ค. 2018 11:29 am บอร์ด Mobile Application Developing- Android, iOS
0
15
จ 15 ม.ค. 2018 11:29 am โดย Four