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

ผมชอบรูปแบบการใส่เงาให้กับองค์ประกอบในเว็บไซต์มากๆครับ ผมมองว่ามันคือศิลปะเล็กๆที่ช่วยให้งานโดดเด่นออกมามากขึ้น ยิ่งในยุคที่เน้นออกแบบแนว 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); }
Click here
.boxshadow-7{ box-shadow: 0 10px 25px 0 rgba(255,138,115, .5); border-radius: 25px; }
Click here
.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 . ขอให้สนุกกับโลกของการทำเว็บไซต์ครับผม

You might also enjoy

Follow Me

STAY CONNECTED

Let’s build the next big thing together

Contact Me

I love to work with clients all over the world to develop unique, innovative, and modern websites.

CONTACT ME
SOCIAL
Facebook Youtube Instagram

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่า ปฏิเสธ ยอมรับ
Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
Manage Consent Preferences
  • คุกกี้ที่จำเป็น
    Always Active

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

  • คุกกี้เพื่อการวิเคราะห์

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

  • คุกกี้เพื่อปรับเนื้อหาให้เข้ากับกลุ่มเป้าหมาย

    คุกกี้ประเภทนี้จะเก็บข้อมูลต่าง ๆ รวมทั้งข้อมูลวส่วนบบุคลเกี่ยวกับตัวคุณเพื่อเราสามารถนำมาวิเคราะห์ และนำเสนอเนื้อหา ให้ตรงกับความเหมาะสมกับความสนใจของคุณ ถ้าหากคุณไม่ยินยอมเราจะไม่สามารถนำเสนอเนื้อหาและโฆษณาได้ไม่ตรงกับความสนใจของคุณ

บันทึก
Privacy Preferences