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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การเขียน for loop ในภาษา C
โดย Grammanano อ 03 ธ.ค. 2019 6:24 pm บอร์ด Share Knowledge
1
1042
อ 03 ธ.ค. 2019 7:15 pm โดย chatee supasand
วิธีการทำ pulgin ให้ copy รูปภาพที่อยู่ในโฟนเดอร์ images ของ joomla
โดย jamepiyawat อ 03 ธ.ค. 2019 6:23 pm บอร์ด Joomla Developing Knowledge
0
1036
อ 03 ธ.ค. 2019 6:23 pm โดย jamepiyawat
วิธีการใช้ JQuery ทำค้นหาเฉพาะข้อมูลที่มีค่าตรงตามที่ตรงการ
โดย Ittichai_chupol อ 03 ธ.ค. 2019 6:19 pm บอร์ด Jquery & Ajax Knowledge
0
66
อ 03 ธ.ค. 2019 6:19 pm โดย Ittichai_chupol
การเขียน do while loop ในภาษา C
โดย Grammanano อ 03 ธ.ค. 2019 5:24 pm บอร์ด Share Knowledge
0
74
อ 03 ธ.ค. 2019 5:24 pm โดย Grammanano
บทความ Draft ภาพนับว่าละเมิดลิขสิทธิ์หรือไม่
โดย noppadonsk อ 03 ธ.ค. 2019 4:47 pm บอร์ด Share Knowledge
0
31
อ 03 ธ.ค. 2019 4:47 pm โดย noppadonsk
Module "Weather Forcecast" การพยากรณ์อากาศสำหรับประเทศไทยล่วงหน้า
โดย prmindphp อ 03 ธ.ค. 2019 4:43 pm บอร์ด MindPHP News & Feedback
0
177
อ 03 ธ.ค. 2019 4:43 pm โดย prmindphp
การเขียน while loop ในภาษา C
โดย Grammanano อ 03 ธ.ค. 2019 4:29 pm บอร์ด Share Knowledge
0
36
อ 03 ธ.ค. 2019 4:29 pm โดย Grammanano
ออนไลน์มาร์เก็ตติ้ง กับ ดิจิตอลมาเก็ตติ้ง แตกต่างกันอย่างไร
โดย noppadonsk อ 03 ธ.ค. 2019 4:16 pm บอร์ด Share Knowledge
0
37
อ 03 ธ.ค. 2019 4:16 pm โดย noppadonsk
มาทำความรู้จักกับ FYI (For your Information) FYI คืออะไร
โดย noppadonsk อ 03 ธ.ค. 2019 3:54 pm บอร์ด Share Knowledge
0
72
อ 03 ธ.ค. 2019 3:54 pm โดย noppadonsk
font ที่นิยมในการออกแบบให้ปัง
โดย noppadonsk อ 03 ธ.ค. 2019 3:38 pm บอร์ด Graphic design
0
63
อ 03 ธ.ค. 2019 3:38 pm โดย noppadonsk
จะ preg_match ยังไงให้ได้แค่ชื่อรูปครับ
โดย jamepiyawat อ 03 ธ.ค. 2019 3:03 pm บอร์ด Programming - PHP
2
114
อ 03 ธ.ค. 2019 3:20 pm โดย jamepiyawat
วิธีการการใช้ Node.js เพื่อสำหรับทำ Restful API
โดย Grammanano อ 03 ธ.ค. 2019 2:54 pm บอร์ด Jquery & Ajax Knowledge
0
124
อ 03 ธ.ค. 2019 2:54 pm โดย Grammanano
วิธีการใช้งาน Adobe permier pro เพื่อตัดต่อคลิปวีดิโอให้น่าสนใจ
โดย noppadonsk อ 03 ธ.ค. 2019 2:53 pm บอร์ด Graphic design
0
89
อ 03 ธ.ค. 2019 2:53 pm โดย noppadonsk
Module "Login" ของ MooZiicart ใช้งานง่ายเพียงติดตั้ง
โดย prmindphp อ 03 ธ.ค. 2019 11:43 am บอร์ด MindPHP News & Feedback
0
382
อ 03 ธ.ค. 2019 11:43 am โดย prmindphp
การเขียน if/else ในภาษา C
โดย Grammanano อ 03 ธ.ค. 2019 11:43 am บอร์ด Programming - C/C++ & java & Python
1
333
พ 11 ธ.ค. 2019 4:28 pm โดย Pragatisatpute
ออกแบบแบนเนอร์ให้เหมาะกับธุรกิจออนไลน์
โดย noppadonsk อ 03 ธ.ค. 2019 11:40 am บอร์ด Share Knowledge
0
31
อ 03 ธ.ค. 2019 11:40 am โดย noppadonsk
สร้างงานสวยด้วยASPECT RATIO
โดย noppadonsk อ 03 ธ.ค. 2019 11:03 am บอร์ด Share Knowledge
0
163
อ 03 ธ.ค. 2019 11:03 am โดย noppadonsk
วิธีแก้ไขรูปแบบวันที่ ในเอกสาร google sheet
โดย thatsawan อ 03 ธ.ค. 2019 10:47 am บอร์ด Microsoft Office Knowledge & line & Etc
1
88
อ 03 ธ.ค. 2019 1:35 pm โดย chatee supasand
สอบถาม ปุ่มส่งค่า Activityไปยังหน้าอื่นและกลับมาหน้าหลัก
โดย Dhanaporn Promchatsoonthorn จ 02 ธ.ค. 2019 10:01 pm บอร์ด Mobile Programming - Android, iOS, Window Phone
0
69
จ 02 ธ.ค. 2019 10:01 pm โดย Dhanaporn Promchatsoonthorn
วิธีการเพิ่ม - ลบ ช่องกรอกข้อมูล โดยใช้ jquery เพื่อปรับเพิ่มลดช่องกรอกข้อมูลได้ตามต้องการ
โดย Ittichai_chupol จ 02 ธ.ค. 2019 5:03 pm บอร์ด Jquery & Ajax Knowledge
0
86
จ 02 ธ.ค. 2019 5:03 pm โดย Ittichai_chupol