เงาวงกลม (Round Shadow)

เงาวงกลม (Round Shadow)

เงาเป็นเทคนิคสำคัญในการออกแบบเว็บที่ช่วยเพิ่มมิติและความลึกให้กับองค์ประกอบต่างๆ บทความนี้จะแนะนำวิธีการสร้างเงาให้กับองค์ประกอบทรงกลมด้วย CSS

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

การสร้างเงาให้กับองค์ประกอบทรงกลมประกอบด้วย 2 ขั้นตอนหลัก:

1. การสร้างองค์ประกอบทรงกลมด้วย border-radius
2. การเพิ่มเงาด้วย box-shadow

การสร้างองค์ประกอบทรงกลม

เราสามารถสร้างองค์ประกอบทรงกลมได้โดยใช้ border-radius ใน CSS:

.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: white;
}

โค้ดข้างต้นจะสร้างองค์ประกอบทรงกลมที่มีขนาด 150x150 พิกเซล โดยใช้ border-radius: 50% เพื่อทำให้มีรูปร่างเป็นวงกลม

การเพิ่มเงาให้กับองค์ประกอบทรงกลม

เมื่อสร้างองค์ประกอบทรงกลมแล้ว เราสามารถเพิ่มเงาให้กับมันโดยใช้ box-shadow:

.shadow-1 {
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

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

.shadow-3 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

โค้ดข้างต้นกำหนดเงา 3 แบบที่มีความเข้มและขนาดแตกต่างกัน

ตัวอย่างเงาวงกลม

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

การปรับแต่ง box-shadow

คุณสมบัติ box-shadow มีพารามิเตอร์ดังนี้:

box-shadow: h-offset v-offset blur spread color inset;

โดยที่:

• h-offset คือ ระยะห่างในแนวนอน (บวกคือขวา, ลบคือซ้าย)
• v-offset คือ ระยะห่างในแนวตั้ง (บวกคือล่าง, ลบคือบน)
• blur คือ ระยะการเบลอของเงา (ไม่บังคับ)
• spread คือ ขนาดของเงา (ไม่บังคับ)
• color คือ สีของเงา
• inset คือ การกำหนดให้เงาอยู่ด้านใน (ไม่บังคับ)

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

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

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

คุณสามารถใช้หลายเงาพร้อมกันเพื่อสร้างเอฟเฟกต์ที่ซับซ้อนขึ้น:

.multi-shadow {
    box-shadow: 
        0 5px 15px rgba(0,0,0,0.3),
        0 0 0 10px rgba(255,255,255,0.5),
        0 0 0 20px rgba(0,0,0,0.1);
}

2. การใช้ filter: drop-shadow()

นอกจาก box-shadow แล้ว คุณยังสามารถใช้ filter: drop-shadow() ซึ่งจะสร้างเงาที่ติดตามรูปร่างของเนื้อหาแทนที่จะเป็นกล่องสี่เหลี่ยม:

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

ลิงก์ไปยังตัวอย่างเพิ่มเติม

คุณสามารถดูตัวอย่างเพิ่มเติมได้ที่:

• Round Shadow 1 - ตัวอย่างเงาทรงกลมแบบที่ 1
• Round Shadow 2 - ตัวอย่างเงาทรงกลมแบบที่ 2