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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ไม่เข้าใจคำสั่ง preg_replace
โดย profess79 ส 20 มิ.ย. 2020 11:56 am บอร์ด Programming - PHP
1
112
ส 20 มิ.ย. 2020 6:19 pm โดย profess79
วิธีการทำทศนิยม 3 ตำแหน่ง ด้วย python
โดย bolue ศ 19 มิ.ย. 2020 4:49 pm บอร์ด Python Knowledge
0
84
ศ 19 มิ.ย. 2020 4:49 pm โดย bolue
วิธีการ เพิ่มข้อมูล ลงฐานข้อมูล พร้อม รีเทิร์น id กลับมา ด้วยคำสั่ง sql
โดย bolue ศ 19 มิ.ย. 2020 3:25 pm บอร์ด SQL Knowledge
0
554
ศ 19 มิ.ย. 2020 3:25 pm โดย bolue
เจอปัญหา ส่งเมลผิดพลาด : Language string failed to load: from_failed บน phpmailer
โดย mindphp ศ 19 มิ.ย. 2020 3:26 am บอร์ด Programming - PHP
2
1610
ศ 19 มิ.ย. 2020 5:47 pm โดย mindphp
กฎหมายที่ใช้ควบคุมโรค โควิด-19 ฝ่าฝืนได้รับโทษอย่างไรบ้าง?
โดย Decha Thaweeumanjvaroj พฤ 18 มิ.ย. 2020 10:17 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
106
พฤ 18 มิ.ย. 2020 10:17 am โดย Decha Thaweeumanjvaroj
ไม่สามารถ start openerp-server ของ openerp 7 ได้
โดย bolue พฤ 18 มิ.ย. 2020 10:09 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
10
176
ศ 19 มิ.ย. 2020 12:49 pm โดย bolue
ติดตั้ง ERP 7 ไม่ได้ค่ะ
โดย bolue พ 17 มิ.ย. 2020 4:01 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
12
165
ส 27 มิ.ย. 2020 12:47 am โดย mindphp
การ count ตาราง จากการรวมข้อมูล 2 ตารางเข้าด้วยกันด้วยคำสั่ง sql
โดย bolue อ 16 มิ.ย. 2020 5:01 pm บอร์ด SQL Knowledge
0
169
อ 16 มิ.ย. 2020 5:01 pm โดย bolue
การใส่ไวยากรณ์สำหรับความคิดเห็นใน php พื้นฐาน
โดย phennapa อ 16 มิ.ย. 2020 3:28 pm บอร์ด PHP Knowledge
0
47
อ 16 มิ.ย. 2020 3:28 pm โดย phennapa
ตัวแปร php พื้นฐาน
โดย phennapa อ 16 มิ.ย. 2020 1:45 pm บอร์ด PHP Knowledge
0
52
อ 16 มิ.ย. 2020 1:45 pm โดย phennapa
แนะนำ php พื้นฐาน
โดย phennapa อ 16 มิ.ย. 2020 12:37 pm บอร์ด PHP Knowledge
0
52
อ 16 มิ.ย. 2020 12:37 pm โดย phennapa
เริ่มต้นการเขียน PHP
โดย phennapa อ 16 มิ.ย. 2020 11:46 am บอร์ด PHP Knowledge
0
51
อ 16 มิ.ย. 2020 11:46 am โดย phennapa
การใช้ Style ตกแต่งเว็บเพจ ด้วยภาษา(CSS)ขั้นพื้นฐาน
โดย phennapa อ 16 มิ.ย. 2020 6:20 am บอร์ด CSS Knowledge
0
56
อ 16 มิ.ย. 2020 6:20 am โดย phennapa
การออกแบบหน้าlogin ขั้นพื้นฐาน php
โดย phennapa อ 16 มิ.ย. 2020 5:23 am บอร์ด PHP Knowledge
0
76
อ 16 มิ.ย. 2020 5:23 am โดย phennapa
Android - การออกแบบUI หน้าlogin พื้นฐาน
โดย phennapa จ 15 มิ.ย. 2020 6:39 pm บอร์ด Mobile Application Developing- Android, iOS
1
194
อ 16 มิ.ย. 2020 2:59 am โดย บุคคลทั่วไป
การจับ error ใน ฟังก์ชั่น ด้วยการใช้ current_app ใน python
โดย bolue จ 15 มิ.ย. 2020 6:18 pm บอร์ด Python Knowledge
0
44
จ 15 มิ.ย. 2020 6:18 pm โดย bolue
วิธีการเดินทางจาก อำเภอกันทรลักษ์ จังหวัดศรีสะเกษ มา กรุงเทพ.
โดย phennapa จ 15 มิ.ย. 2020 5:12 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
37
จ 15 มิ.ย. 2020 5:12 pm โดย phennapa
อยากทราบว่าใส่รูปยังไงคะในกระทู้ค่ะ
โดย phennapa จ 15 มิ.ย. 2020 4:49 pm บอร์ด MindPHP News & Feedback
1
63
จ 15 มิ.ย. 2020 5:01 pm โดย thatsawan
ไม่สามารถใช้ route methods get ได้ ใน flask_classful
โดย bolue จ 15 มิ.ย. 2020 1:08 pm บอร์ด Programming - C/C++ & java & Python
2
69
จ 15 มิ.ย. 2020 3:28 pm โดย bolue
สอบถามค่ะ บาง url ที่ดึงมา ใช้ไม่ได้ค่ะ
โดย bolue พฤ 11 มิ.ย. 2020 2:40 pm บอร์ด Programming - C/C++ & java & Python
7
177
จ 15 มิ.ย. 2020 8:52 am โดย bolue