เงาวงกลม แบบที่ 2 (Round Shadow 2)

หมายเหตุ เอกสารฉบับนี้เป็นเอกสารแปลจากต้นฉบับภาษาอังกฤษอาจมีข้อบกพร่องหรือไม่ทันสมัย
เอกสารต้นฉบับเป็นของ W3C และถือเป็นเอกสารอย่างเป็นทางการ ท่านสามารถอ่านประกอบเพื่อความถูกต้อง
Original Document Round Shadow 2

เทคนิคขั้นสูงในการสร้างเงาให้กับองค์ประกอบทรงกลม

นอกจากการใช้ box-shadow พื้นฐานแล้ว ยังมีเทคนิคขั้นสูงอื่นๆ ที่สามารถใช้เพื่อสร้างเงาให้กับองค์ประกอบทรงกลมที่ดูสมจริงและน่าสนใจมากขึ้น บทความนี้จะแนะนำเทคนิคเหล่านั้น

เทคนิคการสร้างเงาขั้นสูง

เทคนิคขั้นสูงในการสร้างเงาให้กับองค์ประกอบทรงกลมมีหลายวิธี:

1. การใช้หลายเงาพร้อมกัน

การใช้หลายเงาพร้อมกันช่วยสร้างความลึกและมิติที่สมจริงมากขึ้น:

.shadow-advanced-1 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

2. การผสมผสานกับ Gradient

การผสมผสาน box-shadow กับ linear-gradient ช่วยสร้างเอฟเฟกต์ที่ดูเหมือนแสงตกกระทบบนวัตถุ:

.shadow-advanced-2 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
}

3. การใช้ Pseudo-element

การใช้ pseudo-element เช่น ::before หรือ ::after ช่วยให้สามารถสร้างเงาที่แยกออกจากองค์ประกอบหลัก:

.shadow-advanced-3 {
    background: white;
    position: relative;
}

.shadow-advanced-3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: -1;
}

ตัวอย่างเงาวงกลมขั้นสูง

นี่คือตัวอย่างของวงกลมที่มีเงาแบบขั้นสูง:

เงาซ้อนกัน
หลายชั้น

เงาผสม
Gradient

เงาด้วย
Pseudo-element

เทคนิคเพิ่มเติม

นอกจากเทคนิคที่กล่าวมาแล้ว ยังมีเทคนิคอื่นๆ ที่สามารถใช้เพื่อสร้างเงาให้กับองค์ประกอบทรงกลม:

1. การใช้ filter

คุณสามารถใช้ filter เพื่อสร้างเงาที่ติดตามรูปร่างของเนื้อหา:

.shadow-filter {
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}

2. การใช้ CSS 3D Transform

การใช้ transform ร่วมกับ perspective สามารถสร้างเอฟเฟกต์ 3 มิติได้:

.shadow-3d {
    transform: perspective(800px) rotateX(10deg);
    box-shadow: 0 30px 40px rgba(0,0,0,0.3);
}

3. การใช้ Animation

การใช้ animation หรือ transition สามารถสร้างเอฟเฟกต์เงาที่เคลื่อนไหวได้:

.shadow-animated {
    transition: box-shadow 0.3s ease;
}

.shadow-animated:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

ข้อควรระวัง

เมื่อใช้เทคนิคขั้นสูงในการสร้างเงา ควรคำนึงถึงสิ่งต่อไปนี้:

  • เทคนิคที่ซับซ้อนอาจส่งผลต่อประสิทธิภาพการแสดงผล โดยเฉพาะบนอุปกรณ์ที่มีประสิทธิภาพต่ำ
  • ควรทดสอบการแสดงผลในเบราว์เซอร์ที่หลากหลาย เนื่องจากบางเทคนิคอาจไม่รองรับในเบราว์เซอร์เก่า
  • การใช้เงาที่มากเกินไปอาจทำให้การออกแบบดูรกรุงรังและไม่เป็นมืออาชีพ

ลิงก์ไปยังหน้าที่เกี่ยวข้อง

  • Shadows - เงาทั่วไป
  • Round Shadow - เงาสำหรับองค์ประกอบทรงกลม
  • Round Shadow 1 - ตัวอย่างเงาทรงกลมแบบที่ 1