ผลลัพธ์เงาของ CSS

คอฟฟี
Shadows

สร้างผลลัพธ์เงาด้วย CSS!

เลื่อนหลังจากนี้!

ผลลัพธ์เงาของ CSS

ด้วยการใช้ CSS คุณสามารถเพิ่มเงาสำหรับข้อความและองค์ประกอบ:

ในหลักสูตรของเรา คุณจะเรียนรู้ถึงนิยามต่อไปนี้:

  • text-shadow
  • box-shadow

CSS ฝายข้อความ

CSS text-shadow นิยามนี้เพื่อเพิ่มเงาสำหรับข้อความ:

วิธีใช้งานที่ง่ายที่สุดคือเพียงแค่กำหนดเงาน้ำตายแบบระดับน้ำตาย (2px) และเงาตายแบบตั้งแต่ตรงด้านล่าง (2px):

ผลลัพธ์ของเงาข้อความ!

ตัวอย่าง

h1 {
  text-shadow: 2px 2px;
}

ทดลองด้วยตัวเอง

ต่อมา แสดงการที่จะเพิ่มสีสำหรับเงา:

ผลลัพธ์ของเงาข้อความ!

ตัวอย่าง

h1 {
  text-shadow: 2px 2px red;
}

ทดลองด้วยตัวเอง

ดังนั้น แสดงการที่จะเพิ่มผลลัพธ์ที่มีฝันสงสัยสำหรับเงา:

ผลลัพธ์ของเงาข้อความ!

ตัวอย่าง

h1 {
  text-shadow: 2px 2px 5px red;
}

ทดลองด้วยตัวเอง

ตัวอย่างด้านล่างนี้แสดงให้เห็นข้อความขาวที่มีเงาสีดำ:

ผลลัพธ์ของเงาข้อความ!

ตัวอย่าง

h1 {
  color: ขาว;
  text-shadow: 2px 2px 4px #000000;
}

ทดลองด้วยตัวเอง

ตัวอย่างด้านล่างนี้แสดงให้เห็นเงาสีแดงที่มีการปรากฎของไฟแฟล็ช:

ผลลัพธ์ของเงาข้อความ!

ตัวอย่าง

h1 {
  text-shadow: 0 0 3px #FF0000;
}

ทดลองด้วยตัวเอง

เงาหลายอัน

ถ้าต้องการเพิ่มเงาหลายอันในข้อความ คุณสามารถเพิ่มรายชื่อเงาที่แยกด้วยคมฝังของไปยังรายชื่อเงาของคุณ:

ตัวอย่างด้านล่างนี้แสดงให้เห็นเงาสีแดงและสีสมุนไพรที่มีการปรากฎของไฟแฟล็ช:

ผลลัพธ์ของเงาข้อความ!

ตัวอย่าง

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

ทดลองด้วยตัวเอง

ตัวอย่างด้านล่างนี้แสดงข้อความขาวที่มีเงาดำ สีน้ำเงิน และสีดำเข้ม:

ผลลัพธ์ของเงาข้อความ!

ตัวอย่าง

h1 {
  color: ขาว;
  text-shadow: 1px 1px 2px ดำ, 0 0 25px สีน้ำเงิน, 0 0 5px สีดำเข้ม;
}

ทดลองด้วยตัวเอง

คุณยังสามารถใช้คุณสมบัติ text-shadow ในรอบของข้อความเพื่อสร้างขอบเขตเพียงขอบเท่านั้น (ไม่มีเงา):

ขอบเขตของข้อความที่เรียกเข้ามา!

ตัวอย่าง

h1 {
  color: แก้ว;
  text-shadow: -1px 0 ดำ, 0 1px ดำ, 1px 0 ดำ, 0 -1px ดำ;
}

ทดลองด้วยตัวเอง