Cara Memohon Penapis Instagram di Imej Web
Ramai suka menggunakan Instagram dan penapis yang datang dengan aplikasinya, untuk menjadikan foto mereka lebih menarik dan cantik. Sejauh ini, penggunaan penapis ini terhad untuk digunakan di dalam aplikasinya. Bagaimana jika anda mahu gunakan penapis Instagram pada imej web, di luar aplikasinya, seperti foto yang anda ingin pasangkan di blog atau laman web peribadi anda?
Nah, anda boleh menggunakan CSSGram, sebuah perpustakaan kecil yang membenarkan anda edit foto anda dengan penapis yang serupa dengan apa yang anda dapati di apl Instagram. Tidak seperti Photoshop di mana pengeditan manual atau dilakukan melalui tindakan Photoshop, dengan CSSGram, proses keseluruhan dilakukan melalui CSS.
Bagaimana ia berfungsi
Untuk menjana kesan, CSSGram menggunakan Penapis CSS dan Mod campuran CSS, pada dasarnya menggabungkan kesan ke titik di mana ia meniru penapis Instagram yang anda inginkan. Kesannya digunakan pada bekas imej, melalui unsur-unsur pseudo. Mari lihat bagaimana ini dilakukan dengan contoh "1977" ini:
Inilah unsur pseudo ditambah.
._1977 kedudukan: relatif; ._1977: selepas kandungan: "; paparan: blok, ketinggian: 100%; lebar: 100%; atas: 0; kiri: 0; kedudukan: mutlak;
Dan ini adalah penapis CSS dan Blend ditambahkan:
._1977 -webkit-filter: contrast (1.1) kecerahan (1.1) jenuh (1.3); penapis: kontras (1.1) kecerahan (1.1) tepu (1.3); ._1977: selepas latar belakang: rgba (243, 106, 188, 0.3); campuran-campuran-mod: skrin;
Bagaimana nak guna
Kita tidak boleh menambah kelas penapis terus ke elemen imej, ia mesti ditambah ke kelas bekas atau induk, contohnya dengan
Kod akan kelihatan seperti ini:
Jangan lupa memasukkan perpustakaan CSSgram (dapatkan di sini) ke dokumen HTML anda.
Saya mencipta demo imej sebelum dan selepas menambah penapis dan hasilnya sangat bagus. Terdapat 13 penapis yang termasuk dalam perpustakaan pada masa ini. Di bawah ini anda dapat melihat perbezaan antara imej asal dan imej di bawah penapis "1977","Aden"dan"Gingham".
Lihat Pen rOKPmW
Jika anda hanya berminat menggunakan mana-mana gaya, anda boleh memuatkan fail CSS individu dengan sewajarnya.
Menggunakan SCSS
Jika anda mahu menambah penapis ke kelas kontena imej semasa anda tanpa perubahan nama, anda boleh melakukannya dengan memanjangkan kesan penapis di dalam fail SCSS anda. Inilah cara untuk melakukannya.
Muat turun fail sumber SCSS dan import fail SCSS anda.
@import 'vendor / cssgram';
Katakan anda mempunyai sstruktur HTML seperti di bawah:
Kemudian dalam style.scss anda, semak penapis seperti ini:
.my-class ... @extend% _1977;
Lebih Post Instagram
- 40 Alat & Aplikasi untuk menaikkan Akaun Instagram anda
- 20 Aplikasi Berguna untuk Dapatkan Paling Keluar daripada Instagram
- 10 Tips & Trik Instagram yang Harus Anda Ketahui
