วิธีใช้ตัวกรอง Instagram บนเว็บอิมเมจ

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

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

มันทำงานอย่างไร

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

นี่คือองค์ประกอบหลอกที่เพิ่มเข้ามา.

 ._1977 ตำแหน่ง: ญาติ;  ._1977: หลัง content: "; display: block; height: 100%; width: 100%; top: 0; left: 0; position: absolute; 

และนี่คือตัวกรอง CSS และ Blend ที่เพิ่มเข้ามา:

 ._1977 -webkit-filter: ความคมชัด (1.1) ความสว่าง (1.1) อิ่มตัว (1.3); ตัวกรอง: ความคมชัด (1.1) ความสว่าง (1.1) อิ่มตัว (1.3);  ._1977: หลัง background: rgba (243, 106, 188, 0.3); โหมดผสม: หน้าจอ;  

วิธีใช้

เราไม่สามารถเพิ่มคลาสตัวกรองลงในองค์ประกอบรูปภาพโดยตรงได้จะต้องถูกเพิ่มลงในคอนเทนเนอร์หรือคลาสพาเรนต์เช่น

 @import 'ผู้ขาย / cssgram'; 

 .ชั้นเรียนของฉัน ... @extend% _1977;