CSS Tips: box-shadow สร้างเงาให้กับ box element

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
โพสต์: 361
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

CSS Tips: box-shadow สร้างเงาให้กับ box element

โพสต์ที่ยังไม่ได้อ่าน โดย abdkode »

ใน CSS จะมีproperty box-shadow ช่วยให้เราสามารถสร้างเงาให้กับ box element เห็นเป็นมิติได้ เช่นเดียวกับเงาของข้อความ box-shadow สามารถใช้งานค่อนข้างดีในเบราว์เซอร์ แต่ถ้าใน IE ต้อง IE9 + เท่านั้น ผู้ใช้เวอร์ชัน IE ที่เก่ากว่าเราอาจไม่สามารถเห็นเงานได้ครับ แนะนำให้ทดสอบกับเบราเซอร์เวอร์ชันใหม่ไม่พบปัญหาแน่นอน เพราะส่วนใหญ่แล้วรองรับการแสดงผลเหล่านี้

ตัวอย่างโค้ดHTML ที่มีคลาสชื่อว่า simple

โค้ด: เลือกทั้งหมด

<article class="simple">
  <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p>
</article>
และ css style เรากำหนดไว้ดังนี้ คลาสชื่อ simple ได้กำหนดเป็น box-shadow

โค้ด: เลือกทั้งหมด

p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}  

.simple {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
ผลลัพธ์ที่ได้คือ
2019-04-11_13-53-34.jpg
2019-04-11_13-53-34.jpg (9.51 KiB) Viewed 1943 times
เราสามารถสร้างเงาเป็นหลายๆชั้นได้ดังนี้

โค้ด: เลือกทั้งหมด

<article class="multiple">
      <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p>
    </article>
ส่วน CSS style ในคลาสชื่อ multiple ได้กำหนด box-shadow หลายๆชั้นดังนี้

โค้ด: เลือกทั้งหมด

p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}  

.multiple {
  box-shadow: 1px 1px 1px black,
              2px 2px 1px black,
              3px 3px 1px red,
              4px 4px 1px red,
              5px 5px 1px black,
              6px 6px 1px black;
}
ผลลัพธ์ที่ได้
2019-04-11_13-55-41.jpg
2019-04-11_13-55-41.jpg (11.66 KiB) Viewed 1943 times
จะเห็นว่าเรามีสี่ตำแหน่งในค่าของproperty box-shadow ดังนี้:
  • ค่าความยาวแรกคือออฟเซ็ตแนวนอน(horizontal offset) - ระยะห่างไปทางขวาเงาถูกใส่จากกล่องเดิม (หรือซ้ายถ้าค่าเป็นลบ)
  • ค่าความยาวที่สองคือออฟเซ็ตแนวตั้ง(vertical offset) - ระยะห่างด้านล่างที่เงาถูกใส่จากกล่องเดิม (หรือด้านบนหากค่าเป็นลบ)
  • ค่าความยาวที่สามคือรัศมีเบลอ - จำนวนการเบลอที่ใช้กับเงา
  • ค่าตำแหน่งทร่สีคือสีพื้นฐานของเงา
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 74