Cara Mendaftar Filter Instagram di Gambar Web

Banyak yang suka menggunakan Instagram dan filter yang datang dengan aplikasi, untuk membuat foto mereka lebih menarik dan indah. Sejauh ini, penggunaan filter ini dibatasi untuk digunakan di dalam aplikasi. Bagaimana jika Anda mau gunakan filter Instagram pada gambar web, di luar aplikasi, seperti foto yang ingin Anda pasang di blog atau situs web pribadi Anda?

Anda dapat menggunakan CSSGram, perpustakaan kecil yang memungkinkan Anda melakukannya edit foto Anda dengan filter yang mirip dengan apa yang dapat Anda temukan di aplikasi Instagram. Tidak seperti Photoshop yang pengeditannya manual atau dilakukan melalui tindakan Photoshop, dengan CSSGram, seluruh proses dilakukan melalui CSS.

Bagaimana itu bekerja

Untuk menghasilkan efek, CSSGram memanfaatkan Filter CSS dan Mode campuran CSS, pada dasarnya memadukan efek ke titik di mana ia meniru filter Instagram yang Anda inginkan. Efeknya diterapkan pada wadah gambar, melalui elemen semu. Mari kita lihat bagaimana hal ini dilakukan dengan contoh "1977" ini:

Inilah elemen pseudo yang ditambahkan.

 ._1977 position: relative;  ._1977: after content: "; display: blok; tinggi: 100%; lebar: 100%; atas: 0; kiri: 0; posisi: absolut; 

Dan ini adalah filter CSS dan Blend menambahkan:

 ._1977 -webkit-filter: contrast (1.1) brightness (1.1) saturate (1.3); filter: kontras (1.1) kecerahan (1.1) saturate (1.3);  ._1977: after background: rgba (243, 106, 188, 0.3); campur-campur-mode: layar;  

Bagaimana cara menggunakan

Kami tidak dapat menambahkan kelas filter langsung ke elemen gambar, itu harus ditambahkan ke wadah atau kelas induk, misalnya dengan

 @ impor 'vendor / cssgram'; 

 .kelas saya ... @extend% _1977;