สร้างโค้ด CSS ฟรีสำหรับตัวกรองสไตล์ Instagram

มันจะเจ๋งแค่ไหนในการเพิ่มฟิลเตอร์ภาพลงบนเว็บไซต์ของคุณ? หลายปีก่อนจำเป็นต้องมี JavaScript แต่ทุกวันนี้คุณสามารถสร้างตัวกรองรูปภาพที่กำหนดเองด้วย HTML และ CSS แบบเก่าได้.

และด้วย cssFilters webapp คุณไม่จำเป็นต้องเขียนโค้ด CSS เลย!

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

ที่ด้านบนของหน้าจอคุณจะสังเกตเห็นแถบยาวเต็มไปด้วยตัวกรอง Instagram ที่กำหนดเอง ตัวกรองเหล่านี้รวมถึงตัวเลือกยอดนิยมทั้งหมดเช่นฮัดสัน, เครื่องปิ้งขนมปัง, Inkwell, Lofi และอื่น ๆ อีกมากมาย.

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

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

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

และคุณสามารถสลับรูปภาพเริ่มต้นได้ด้วยการอัพโหลดจากคอมพิวเตอร์หรือเลือกจาก Unsplash.

แอปพลิเคชันนี้สร้างโดย Indrashish Ghosh และรันคลาสเริ่มต้นจำนวนมากที่พบในไลบรารี CSSgram.

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