การเพิ่มเงาให้กับองค์ประกอบเป็นองค์ประกอบหนึ่งของการสร้างส่วนหัวที่น่าดึงดูด ตัวอย่างเช่น หากคุณกำลังออกแบบเว็บไซต์ คุณอาจต้องการเพิ่มเงาให้กับส่วนหัวด้านบนทั้งหมดเพื่อทำให้ส่วนหัวโดดเด่นกว่าข้อความส่วนหัวอื่นๆ บนหน้าเว็บ
นั่นคือที่มาของคุณสมบัติเงาข้อความ CSS คุณสมบัติ text-shadow ช่วยให้คุณเพิ่มเอฟเฟกต์เงาให้กับองค์ประกอบข้อความ บทช่วยสอนนี้จะกล่าวถึงตัวอย่าง พื้นฐานของเงาข้อความ และวิธีใช้คุณสมบัติ text-shadow เพื่อเพิ่มเงาให้กับข้อความบนหน้าเว็บ
เงาข้อความ CSS
เงาเป็นวิธีหนึ่งในการแยกแยะองค์ประกอบบนหน้าเว็บ ตัวอย่างเช่น บรรทัดข้อความที่มีเงาสีเขียว มีแนวโน้มที่จะดึงดูดสายตาของผู้ใช้มากกว่าบรรทัดมาตรฐานของข้อความสีดำ
คุณสมบัติ text-shadow ให้คุณเพิ่มเงารอบ ๆ องค์ประกอบข้อความใน CSS คุณสามารถใช้องค์ประกอบเงาข้อความกับส่วนหัว ข้อความย่อหน้า และองค์ประกอบแบบข้อความอื่นๆ ใน HTML ได้
ไวยากรณ์พื้นฐานสำหรับคุณสมบัติ text-shadow มีดังนี้:
text-shadow: offset-x offset-y blur-radius color;
ไวยากรณ์สำหรับคุณสมบัติ text-shadow จะคล้ายกับไวยากรณ์สำหรับคุณสมบัติ box-shadow ซึ่งใช้เพื่อใช้เงากับองค์ประกอบ HTML แบบอิงกล่อง หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเงาของกล่องใน CSS โปรดอ่านคู่มือเริ่มต้นของเราเกี่ยวกับเงากล่อง CSS
นี่คือองค์ประกอบหลักของไวยากรณ์สำหรับคุณสมบัติ text-shadow:
- offset-x คือออฟเซ็ตแนวนอน (แกน x) สำหรับเงา (จำเป็น)
- offset-y คือค่าชดเชยแนวตั้ง (แกน y) สำหรับเงา (จำเป็น)
- blur-radius คือรัศมีของเอฟเฟกต์เบลอสำหรับเงา (ไม่บังคับ)
- สีคือสีของเงา สีเริ่มต้นสำหรับเงาข้อความคือสีดำ (ไม่บังคับ)
มาดูตัวอย่างการใช้งานคุณสมบัติ text-shadow เพื่อแสดงวิธีใช้คุณสมบัตินี้เพื่อสร้างเงาข้อความของคุณเอง สำหรับจุดประสงค์ของบทช่วยสอนนี้ เราจะใช้องค์ประกอบ HTML ต่อไปนี้:
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
<html>
<h1>Career Karma</h1>
<style>
h1 {
color: lightblue;
}
ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS
เมื่อเรารันโค้ด องค์ประกอบ
จะแสดงข้อความว่า Career Karma บนหน้าจอ. เป็นองค์ประกอบส่วนหัวที่ใหญ่ที่สุดที่สนับสนุนโดย HTML โค้ด CSS ของเราตั้งค่าคุณสมบัติสีในส่วนหัวเป็น lightblue . ซึ่งหมายความว่าส่วนหัวของเราจะปรากฏเป็นข้อความสีฟ้าอ่อน
เงาข้อความพื้นฐาน
lightblue . ซึ่งหมายความว่าส่วนหัวของเราจะปรากฏเป็นข้อความสีฟ้าอ่อน เงาข้อความพื้นฐาน
มีเพียงสองแอตทริบิวต์ที่จำเป็นที่คุณต้องระบุเมื่อทำงานกับคุณสมบัติ text-shadow:offset-x และ offset-y หากเราระบุคุณสมบัติทั้งสองนี้ เราก็สามารถสร้างข้อความที่มีเงาแนวนอนและแนวตั้งได้
ต่อไปนี้คือตัวอย่างคุณสมบัติ text-shadow ที่ระบุค่าทั้งสองนี้:
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 1px 1px;
}
ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS
ในโค้ดของเรา เราใช้ text-shadow แบบง่าย ๆ กับส่วนหัวของเรา เงานี้ถูกชดเชย 1px บนแกนทั้งแนวนอนและแนวตั้ง หากคุณดูผลลัพธ์ของโค้ดของเรา คุณจะเห็นว่ามีเงาสีดำเล็กน้อยอยู่ใต้ข้อความของเรา สีดำเป็นสีเริ่มต้นสำหรับเงา
สีเงา
เมื่อคุณออกแบบเงาข้อความ คุณอาจตัดสินใจว่าคุณต้องการระบุสีที่กำหนดเองสำหรับเงาของคุณ นั่นคือที่มาของแอตทริบิวต์สี
สมมติว่าเราต้องการให้เงาของเราเป็นสีชมพูอ่อน เราสามารถเปลี่ยนสีเงาเป็นสีชมพูได้โดยใช้โค้ดนี้:
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 1px 1px pink;
}
ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS
ในโค้ดของเรา เราได้ระบุแอตทริบิวต์ color และตั้งค่าเป็น pink . ทำให้เราสามารถสร้างเงาสีชมพูใต้ข้อความของเราได้ เช่นเดียวกับในตัวอย่างแรก เงาของเราถูกชดเชย 1px บนแกนทั้งแนวนอนและแนวตั้ง
เงาเบลอ
สามารถใช้คุณสมบัติ text-shadow ร่วมกับแอตทริบิวต์ blur-radius เพื่อสร้างเงาเบลอ
ในตอนนี้ สมมติว่าเราต้องการสร้างเงาที่ชดเชย 3px บนแกนแนวนอนและแนวตั้ง และมีเอฟเฟกต์เบลอ 2px รอบเงา เราสามารถสร้างเงานี้โดยใช้รหัสต่อไปนี้:
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 3px 3px 2px pink;
}
ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS
อย่างที่คุณเห็น เงาของเราถูกชดเชยด้วย 3px บนทั้งสองแกน และเงาของเราล้อมรอบด้วยเอฟเฟกต์เบลอ เพื่อเพิ่มความเบลอของเอฟเฟกต์ เราสามารถเพิ่มค่าของแอตทริบิวต์ blur-radius ได้ หากเราต้องการเงาที่เบลอมากขึ้น เราสามารถตั้งค่ารัศมีการเบลอเป็น 5px หรือ 10px หรือสูงกว่านั้น ขึ้นอยู่กับการเบลอที่เราต้องการใช้ ในตัวอย่างนี้ เงาของเราเป็นสีชมพู
หลายเงา
จนถึงตอนนี้ เราได้พูดคุยถึงวิธีการใช้คุณสมบัติ text-shadow เพื่อนำเงาหนึ่งเงาไปใช้กับกลุ่มข้อความ อย่างไรก็ตาม คุณสมบัติ text-shadow ยังสามารถใช้เพื่อเพิ่มเงาหลายเงาให้กับองค์ประกอบข้อความได้
หากต้องการเพิ่มเงาหลายเงาลงในบล็อกข้อความ คุณควรสร้างรายการเงาที่คั่นด้วยเครื่องหมายจุลภาค ไวยากรณ์สำหรับการสร้างเงาข้อความหลายแบบมีดังนี้:
text-shadow: shadowOne, shadowTwo;
คุณสามารถระบุเงาได้มากเท่าที่ต้องการ ตราบใดที่แต่ละเงาถูกคั่นด้วยเครื่องหมายจุลภาค อย่างไรก็ตาม ค่า x-offset และ y-offset ที่คุณระบุสำหรับแต่ละเงาจะต้องเพิ่มขึ้นเมื่อเวลาผ่านไป มิฉะนั้น เงาของคุณจะทับซ้อนกันและอาจมองไม่เห็น
เงาจะปรากฏตามลำดับที่ระบุไว้ ดังนั้น shadowOne จะปรากฏขึ้นก่อน shadowTwo
สมมติว่าเราต้องการสร้างแบนเนอร์ข้อความที่มีเงาสีชมพูและสีส้มอยู่ด้านหลังข้อความ เราสามารถทำได้โดยใช้รหัสนี้:
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 3px 3px 2px pink, 6px 6px 5px orange;
}
ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS
ในโค้ดของเรา เราได้ระบุเงาสองอัน นี่คือค่าที่เราระบุสำหรับเงาแต่ละอันของเรา:
| ชื่อพร็อพเพอร์ตี้ | เงาหนึ่ง | เงาสอง |
| offset-x | 3px | 6px |
| ออฟเซ็ต-y | 3px | 6px |
| เบลอรัศมี | 2px | 5px |
| สี | สีชมพู | สีส้ม |
อย่างที่คุณเห็น เราสร้างเงาสองอันในโค้ดของเรา แต่ละอันมีค่าต่างกัน
บทสรุป
คุณสมบัติ text-shadow ใช้เพื่อเพิ่มเงาให้กับกลุ่มข้อความใน HTML สามารถใช้เงาข้อความกับองค์ประกอบที่เป็นข้อความได้ เช่น ส่วนหัวและย่อหน้า
บทช่วยสอนนี้กล่าวถึงโดยอ้างอิงถึงตัวอย่าง พื้นฐานของเงาข้อความและวิธีใช้คุณสมบัติ text-shadow เพื่อสร้างเงาข้อความที่กำหนดเอง ตอนนี้คุณมีความรู้ที่จำเป็นในการเริ่มต้นออกแบบเงาข้อความ CSS ของคุณเองเหมือนนักออกแบบเว็บไซต์ผู้เชี่ยวชาญ!
