Buat Efek Mengungkapkan Gambar Hanya CSS dengan Perbatasan Transparan
SEBUAH Gambar hanya mengungkapkan efek CSS dapat diselesaikan dengan berbagai cara. Sebenarnya cukup mudah untuk membuat kode desain gambar menonjol (dipenuhi oleh) latar belakang yang solid -Anda hanya tempatkan gambar lebih dari elemen yang lebih kecil dengan latar belakang yang solid.
Anda bisa mendapatkan hasil yang sama jika Anda menggunakan perbatasan transparan, di mana Anda menyimpan ukuran elemen latar belakang sama seperti yang dari latar depan dan menambahkan batas transparan untuk buat ruang kosong untuk latar depan meluap ke.
Ada beberapa keuntungan dalam menggunakan metode yang terakhir. Karena perbatasan transparan yang menyediakan area untuk latar depan untuk meluap, kita bisa mengontrol arah luapan antara batas kiri, kanan, atas dan bawah. Juga, memiliki ukuran yang sama untuk latar depan dan latar belakang membuatnya lebih mudah untuk memindahkan kedua elemen secara bersamaan melintasi halaman.
Singkatnya, kita akan melihat bagaimana caranya buat efek pengungkapan gambar khusus CSS menggunakan sebuah latar belakang solid yang lebih kecil dengan gambar latar depan yang memiliki batas transparan. Anda dapat memeriksa demo akhir di bawah.
1. Buat kode awal
Dari segi HTML, hanya satu Dalam CSS, kami menggunakan dua variabel CSS, Kami juga menambahkan Kita tambahkan yang kosong Itu Kami menambahkan gambar ke Itu Di tangkapan layar di bawah ini Anda dapat melihat apa yang kami miliki sejauh ini ( Untuk menambahkan latar belakang (slide-out) yang lebih kecil di belakang gambar, kita akan menggunakan elemen pseudo lainnya, Kami membuat variabel CSS lain, Itu lebar dihitung sebagai Itu tinggi dihitung sebagai Dengan Filter CSS dari Inilah tangkapan layar demo diberikan sejauh ini (dengan Kita Tambahkan Seperti yang kita sudah menambahkan Di bawah, Anda dapat melihat demo akhir. Jika Anda menampilkan
--bgc dan --redup Untuk warna latar belakang dan ukuran dari .foo wadah masing-masing. Dalam contoh, saya menggunakan nilai yang sama untuk lebar dan tinggi untuk mendapatkan kotak berbentuk persegi, buat variabel yang terpisah untuk tinggi dan lebar jika Anda ingin persegi panjang.posisi: relatif aturan untuk .foo, sehingga elemen pseudo-nya, yang akan kita gunakan mengungkapkan gambar, dapat benar-benar diposisikan (lihat di bawah), dan dengan demikian ditumpuk satu sama lain. .foo --bgc: # FFCC03; --dim: 300px; lebar: var (- redup); tinggi: var (- redup); background-color: var (- bgc); posisi: relatif;
konten milik untuk kedua elemen semu, .foo :: sebelumnya dan .foo :: setelah, untuk mendapatkannya ditampilkan dengan benar. .foo :: before, .foo :: after content: "; position: absolute; left: 0; top: 0;
.foo elemen, dua elemen semu, .foo :: sebelumnya, .foo :: setelah, dan mereka : melayang kelas semu mendapatkan transisi milik itu akan tambahkan transisi yang mudah kepada mereka selama 500 milidetik (setengah detik). .foo, .foo: hover, .foo :: before, .foo :: after, .foo: hover :: before, .foo: hover :: setelah transisi: mentransformasikan kemudahan 500ms;
2. Tambahkan gambar
.foo :: sebelumnya elemen semu sebagai gambar latar belakang, dan ukurannya untuk menutupi seluruh elemen semu dengan lebar dan tinggi properti. Kita susun tepat di bawah .foo elemen menggunakan z-index: -1 aturan. .foo :: before width: 100%; tinggi: 100%; latar belakang: pusat / penutup url (camel.png); z-index: -1;
pusat kata kunci memusatkan gambar, selagi penutup kata kunci menskala gambar tutupi seluruh elemen sambil mempertahankan rasio aspeknya. indeks-z dihapus dari .foo :: sebelumnya sehingga bisa dilihat):
3. Tambahkan latar belakang slide-out
.foo :: setelah.--b, Untuk lebar perbatasan. Kami memberikan tiga batas transparan ke ::setelah elemen semu: atas, kanan, dan bawah. .foo :: after --b: 20px; lebar: calc (100% - var (- b)); tinggi: calc (100% - calc (var (- b) * 2)); perbatasan: var (- b) solid transparan; border-left: tidak ada; box-shadow: inset 0 var (- dim) 0 var (- bgc); filter: brightness (.8); z-index: -2;
calc (100% - var - b)) itu kembali total lebar .foo minus lebar total batas horizontal (hanya perbatasan kanan, karena tidak ada perbatasan kiri).calc (100% - calc (var (- b) * 2)) itu kembali tinggi total .foo minus lebar total batas vertikal (batas atas dan bawah).bayangan kotak properti, kami juga tambahkan bayangan inset horizontal dengan ukuran yang sama dengan .foo (yang mana var (- redup)).kecerahan (.8) menggelapkan warna latar belakang sedikit, dan akhirnya, z-index: -2 aturan menempatkan ::setelah elemen pseudo di bawahnya ::sebelum yang berisi gambar.indeks-z dihapus dari kedua elemen semu sehingga bisa dilihat):
4. Tambahkan transformasi
mengubah milik ke dua elemen semu, jadi ketika pengguna melayang .foo, kedua elemen semu tersebut bergerak secara horizontal.transisi properti untuk semua elemen pada akhir Langkah 1, pergerakan gambar dan latar belakangnya adalah keduanya animasi. .foo: hover :: before, .foo: hover :: after transform: translateX (100%);
Bonus: Margin opsional
.foo di sebelah elemen lain pada halaman dan ingin elemen-elemen ini pindah ketika gambar dan latar belakangnya meluncur, maka tambahkan margin kanan dengan lebar yang sama dengan .foo ke .foo: arahkan kursor elemen. .foo: hover margin-right: var (- dim);
