Kun Kode

🤔

Update and restart => restart
Update and shut down => Did you mean "restart" ?

⭐️ Logo black & white ด้วย CSS บรรทัดเดียว

1️⃣ บางครั้ง เราอาจเจองานดีไซน์อาจออกแบบ โลโก้ ให้มีหลายเวอร์ชั่น สำหรับใช้ในแบล็คกราวที่แตกต่างกัน ถ้าเอาแบบง่ายๆ ก็ทำภาพเพิ่มมาเลย

แต่วิธีนี้อาจสิ้นเปลืองพื้นที่จัดเก็บข้อมูลพอสมควร โดยรูป 1 รูป อาจต้องแบ่งเก็บไป 3 รูป ซ้ำยังต้องเปลี่ยน path รูป เวลาดึงมาใช้งานก็ลำบากอีก

2️⃣ ถ้าเราเปลี่ยนสีมันด้วย CSS ได้ล่ะ
CSS จะมีฟังก์ชั่น filter ไว้จัดการรูปภาพแบบง่ายๆให้เราใช้ กรณีนี้เราจะเปลี่ยนเป็นสีดำ และสีขาว สามารถใช้คำสั่งได้ตามนี้

⚫️ filter: brightness(0); // ลด brightness ให้เหลือ 0
⚪️ filter: brightness(0) invert(1); // ลด brightness ให้เหลือ 0 และ invert กลับด้านสี

3️⃣ สำหรับ TailwindCSS สามารถใส่คลาสได้ตามนี้

⚫️ className="brightness-0" // สีดำ
⚪️ className="brightness-0 invert" // สีขาว

4️⃣ อย่างไรก็ตามรูปภาพจะเหมือนการถมสีทับเข้าไป ดังนั้นโลโก้ที่มีรายละเอียดเยอะมากๆ อาจไม่เหมาะสม

แนะนำว่าใช้กับโลโก้ที่เป็น Vector จะดีที่สุดครับ

_____________________________________________________________________
ถ้าเห็นว่ามีประโยชน์: กด👍 กด🪑 ให้ด้วยนะครับ 🙂
ตัวอย่างการแสดงผล 👉 https://sidequest.kunkode.com/logo-black-white
ตัวอย่างโค้ด 👉 https://github.com/skuntawat/side-quest/blob/master/app/(quests)/(css)/logo-black-white/page.tsx
สั่งซื้อเทมเพลต NextJS 🔸 https://store.kunkode.com

🌟 ติดต่อจ้างงานใน Inbox เพจครับ

กัดทิพย์ 🤔 guthib.com