แกลเลอรี่ของไอคอน CSS เพียวนี้คือสิ่งที่นักพัฒนาส่วนหน้าต้องการ

นักออกแบบ Adobe Wenting Zhang ได้สร้าง เว็บแอปที่น่าสนใจ สำหรับ สร้างไอคอน CSS แท้ๆ. มันเป็นชื่อเพียง “ไอคอน CSS” และมันอาจเป็นสิ่งที่ยอดเยี่ยมที่สุด เครื่องกำเนิดไอคอน สำหรับนักพัฒนาส่วนหน้า.

โครงการนี้คือ สมบูรณ์ฟรี และ เปิดแหล่งที่มาบน GitHub ดังนั้นคุณสามารถดาวน์โหลดและยุ่งกับรหัสใด ๆ.

ไอคอนเหล่านี้ ไม่มีการอ้างอิง CSS ใด ๆ หรือต้องการคุณสมบัติพิเศษของเบราว์เซอร์ เมื่อมองดูครั้งแรกมันอาจดูเหมือนไอคอนถูกสร้างขึ้นบน SVGs แต่ พวกมันแค่ divs.

ด้วยความมหัศจรรย์ของ CSS คุณสามารถสร้างได้ ไอคอนเส้นที่กำหนดเอง สำหรับ องค์ประกอบส่วนต่อประสานทั่วไป เช่นเมนูแฮมเบอร์เกอร์ไอคอนสามจุดหรือไอคอนพิมพ์ (รวมถึงเมนูอื่น ๆ อีกมากมาย).

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

หากคุณมองไปที่มุมขวาบนของช่องรหัสคุณจะเห็น ไอคอนการคัดลอกเล็กน้อย. คลิกที่เพื่อ คัดลอกรหัสโดยอัตโนมัติ ไปยังคลิปบอร์ดของคุณ โอ้และไอคอนคัดลอกที่? สร้างขึ้นด้วยรหัส CSS บริสุทธิ์ของ Wenting.

ไปยัง เปลี่ยนสี ของไอคอนใด ๆ เพียง หา สี คุณสมบัติ ในคลาสไอคอนหลัก. อัปเดตหนึ่ง สี คุณสมบัติ จะเปลี่ยนทุกอย่างอีกด้วย.

เนื่องจากไอคอนเหล่านี้นั้น ค่อนข้างเรียบง่าย, พวกเขาอาจจะไม่ทำงานสำหรับทุกเว็บไซต์ แต่นี่คือ ทางเลือกที่ยอดเยี่ยมสำหรับภาพหรือแบบอักษรของไอคอน และมัน สมบูรณ์ฟรี.

ตรวจสอบ CSS โฮมเพจ ไปยัง ดูตัวอย่างเพิ่มเติม และ คัดลอก / แก้ไขแหล่งที่มา. นอกจากนี้คุณยังสามารถ ทดสอบแต่ละไอคอนแยกกัน ใน CodePen ถ้าคุณต้องการ ของเล่นรอบ ๆ กับแหล่งที่มา ในเบราว์เซอร์ของคุณ.