18
Aug

รวม CSS สำหรับทำเงารูปแบบต่างๆ

Category: Blog / 113 views

ผมชอบรูปแบบการใส่เงาให้กับองค์ประกอบในเว็บไซต์มากๆครับ ผมมองว่ามันคือศิลปะเล็กๆที่ช่วยให้งานโดดเด่นออกมามากขึ้น ยิ่งในยุคที่เน้นออกแบบแนว Flat Design ที่ทุกอย่างดูแบนราบ การนำเอาเงามาใช้งานด้วย ก็จะทำให้งานดูไม่จืดจนเกินไป

สำหรับบทความนี้ผมเลยรวบรวมนำเงาต่างๆที่ผมชอบมาไว้ เพื่อที่ครั้งหน้าเวลาทำเว็บแล้วอยากจะได้เงาแบบไหนก็เข้ามาก็อบโค้ด CSS ไปใช้งานได้เลยครับ

.boxshadow-2{ box-shadow: 0 0.313rem 0.875rem rgba(45,49,54,0.1); }
.boxshadow-3{ box-shadow: 0px 20px 40px 0px rgba(0, 12, 31, 0.1); }
.boxshadow-4{ box-shadow: 0px 10px 30px 0px rgba(2, 13, 70, 0.1); } }
.boxshadow-5{ box-shadow: 0px 20px 40px 0px rgba(0, 12, 31, 0.1); border-radius: 4px; }
.boxshadow-6{ box-shadow: 0 10px 55px 5px rgba(137,173,255,.35); }
.boxshadow-7{ box-shadow: 0 10px 25px 0 rgba(255,138,115, .5); border-radius: 25px; }
.boxshadow-8{ box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.05); border-radius: 25px; }
.boxshadow-9{ box-shadow: 10px 10px 26px 0px rgba(0,0,0,0.17); }
.boxshadow-10{ box-shadow: 0 10px 40px rgba(0,0,0,.05); }
.boxshadow-11 { box-shadow: 0 19px 38px rgba(0,0,0,0.20), 0 15px 12px rgba(0,0,0,00.04); border-radius: 25px }
.boxshadow-12 {border-radius: 4px 4px 4px 4px; box-shadow: 0px 5px 30px 0px rgba(15,54,165,0.15); }

และนี่แหละครับคือส่วนหนึ่งของเงาที่ผมชอบและอยากจะนำมาแบ่งปันกัน ซึ่งในความเป็นจริงๆแล้ว การเขียน box-shadow เราก็อาจจะใส่คำสั่งเฉพาะสำหรับบราวเซอร์แต่ละตัวด้วยครับเพื่อป้องกันการแสดงผลที่ผิดเพี้ยน เช่น ของ Google Chrome กับ Safari ก็จะใช้ -webkit- ส่วน Firefox ก็ใช้ -moz- นำหน้าครับ เช่น -webkit-box-shadow:{……} เป็นต้นครับผม

ส่วนใครที่อยากจะลองสร้าง Box-shadow เอง ก็ลองดูได้จากเว็บนี้ครับ สามารถลากๆแล้วดูผลลัพธ์ได้ทันที https://www.cssmatic.com/box-shadow . ขอให้สนุกกับโลกของการทำเว็บไซต์ครับผม


Phraisohn Siripool is a Graphic Designer and Website Developer. Contact Buksohn for Your Business Endeavours