Baiklah, jadi terakhir kali kami check in, kami menggunakan CSS Grid dan menggabungkannya dengan CSS clip-path dan mask teknik untuk membuat grid dengan bentuk mewah.
Inilah salah satu grid fantastis yang kami buat bersama:
Siap untuk putaran kedua? Kami masih bekerja dengan CSS Grid, clip-path, dan mask, tetapi di akhir artikel ini, kita akan menemukan cara berbeda untuk mengatur gambar di kisi, termasuk beberapa efek rad hover yang membuat pengalaman interaktif dan otentik untuk melihat gambar.
Dan coba tebak? Kami menggunakan markup yang sama yang kami gunakan terakhir kali. Ini dia lagi:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Seperti artikel sebelumnya, kita hanya membutuhkan wadah dengan gambar di dalamnya. Tidak ada lagi!
Kisi Gambar Bersarang
Terakhir kali, kisi-kisi kami, yah, kisi-kisi gambar yang khas. Selain bentuk rapi yang kami tutupi, itu adalah kisi-kisi simetris yang cukup standar sejauh cara kami memposisikan gambar di dalamnya.
Mari kita coba menyarangkan gambar di tengah kisi:
Kita mulai dengan mengatur kisi 2✕2 untuk empat gambar:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gap between images */
display: grid;
gap: var(--g);
grid-template-columns: repeat(2, auto);
}
.gallery > img {
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
}Belum ada yang rumit. Langkah selanjutnya adalah memotong sudut gambar kita untuk membuat ruang untuk gambar bersarang. Saya sudah memiliki artikel terperinci tentang cara memotong sudut menggunakan clip-path dan mask. Anda juga dapat menggunakan saya generator online untuk mendapatkan CSS untuk menutupi sudut.
Yang kita butuhkan di sini adalah memotong sudut dengan sudut yang sama dengan 90deg. Kita bisa menggunakan yang sama teknik gradien kerucut dari artikel itu untuk melakukan itu:
.gallery > img {
mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) { --_a: 90deg; }
.gallery > img:nth-child(2) { --_a: 180deg; }
.gallery > img:nth-child(3) { --_a: 0deg; }
.gallery > img:nth-child(4) { --_a:-90deg; }Kita bisa menggunakan clip-path metode untuk memotong sudut dari artikel yang sama, tetapi masking dengan gradien lebih cocok di sini karena kita memiliki konfigurasi yang sama untuk semua gambar — yang kita butuhkan hanyalah rotasi (didefinisikan dengan variabel --_a) dapatkan efeknya, jadi kami menutupi dari dalam, bukan dari tepi luar.
Sekarang kita dapat menempatkan gambar bersarang di dalam ruang bertopeng. Pertama, pastikan kita memiliki elemen gambar kelima di HTML:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>Kami akan mengandalkan posisi absolut yang baik untuk menempatkannya di sana:
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}Grafik inset properti memungkinkan kita untuk menempatkan gambar di tengah menggunakan satu deklarasi. Kita tahu ukuran gambar (didefinisikan dengan variabel --s), dan kita tahu bahwa ukuran penampung sama dengan 100%. Kami melakukan beberapa matematika, dan jarak dari setiap tepi harus sama dengan (100% - var(--s))/2.
Anda mungkin bertanya-tanya mengapa kami menggunakan clip-path sama sekali di sini. Kami menggunakannya dengan gambar bersarang untuk memiliki celah yang konsisten. Jika kami menghapusnya, Anda akan melihat bahwa kami tidak memiliki celah yang sama di antara semua gambar. Dengan cara ini, kami memotong sedikit dari gambar kelima untuk mendapatkan jarak yang tepat di sekitarnya.
Kode lengkap lagi:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gap between images */
display: grid;
gap: var(--g);
grid-template-columns: repeat(2, auto);
position: relative;
}
.gallery > img {
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) {--_a: 90deg}
.gallery > img:nth-child(2) {--_a:180deg}
.gallery > img:nth-child(3) {--_a: 0deg}
.gallery > img:nth-child(4) {--_a:-90deg}
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}Sekarang, banyak dari Anda mungkin juga bertanya-tanya: mengapa semua hal rumit ketika kita dapat menempatkan gambar terakhir di atas dan menambahkan batas ke dalamnya? Itu akan menyembunyikan gambar di bawah gambar bersarang tanpa topeng, bukan?
Itu benar, dan kita akan mendapatkan yang berikut:
Tidak maskDi clip-path. Ya, kodenya mudah dimengerti, tapi ada sedikit kekurangannya: warna perbatasan harus sama dengan latar belakang utama untuk membuat ilusi sempurna. Kelemahan kecil ini cukup bagi saya untuk membuat kode lebih kompleks dengan imbalan transparansi nyata terlepas dari latar belakang. Saya tidak mengatakan pendekatan perbatasan itu buruk atau salah. Saya akan merekomendasikannya dalam banyak kasus di mana latar belakang diketahui. Tapi kami di sini untuk mengeksplorasi hal-hal baru dan, yang paling penting, membangun komponen yang tidak bergantung pada lingkungannya.
Mari kita coba bentuk lain kali ini:
Kali ini, kami membuat gambar bersarang menjadi lingkaran, bukan persegi. Itu tugas yang mudah dengan border-radius Tapi kita perlu menggunakan potongan melingkar untuk gambar lainnya. Namun kali ini, kita akan mengandalkan radial-gradient() bukannya a conic-gradient() untuk mendapatkan tampilan bulat yang bagus.
.gallery > img {
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2), #000 calc(51% + var(--g)/2));
}
.gallery > img:nth-child(1) { --_a: calc(100% + var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(2) { --_a: calc(0% - var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(3) { --_a: calc(100% + var(--g)/2) calc(0% - var(--g)/2); }
.gallery > img:nth-child(4) { --_a: calc(0% - var(--g)/2) calc(0% - var(--g)/2); }Semua gambar menggunakan konfigurasi yang sama seperti contoh sebelumnya, tetapi kami memperbarui titik pusat setiap kali.
Gambar di atas menggambarkan titik pusat untuk setiap lingkaran. Namun, dalam kode yang sebenarnya, Anda akan melihat bahwa saya juga memperhitungkan celah untuk memastikan semua titik berada pada posisi yang sama (pusat kisi) untuk mendapatkan lingkaran kontinu jika kita menggabungkannya.
Sekarang setelah kita memiliki tata letak, mari kita bicara tentang efek hover. Jika Anda tidak menyadarinya, efek hover keren meningkatkan ukuran gambar bersarang dan menyesuaikan yang lainnya. Meningkatkan ukuran adalah tugas yang relatif mudah, tetapi memperbarui gradien lebih rumit karena, secara default, gradien tidak dapat dianimasikan. Untuk mengatasinya, saya akan menggunakan font-size hack untuk dapat menghidupkan gradien radial.
Jika Anda memeriksa kode gradien, Anda dapat melihat bahwa saya menambahkan 1em:
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));Diketahui bahwa em unit relatif terhadap elemen induk font-size, jadi ubah font-size dari .gallery juga akan mengubah yang dihitung em value — ini adalah trik yang kami gunakan. Kami sedang menganimasikan font-size dari nilai 0 ke nilai yang diberikan dan, sebagai hasilnya, gradien dianimasikan, membuat bagian yang dipotong lebih besar, mengikuti ukuran gambar bersarang yang semakin besar.
Berikut adalah kode yang menyoroti bagian-bagian yang terlibat dalam efek hover:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gaps between images */
font-size: 0; /* initially we have 1em = 0 */
transition: .5s;
}
/* we increase the cut-out by 1em */
.gallery > img {
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));
}
/* we increase the size by 2em */
.gallery > img:nth-child(5) {
width: calc(var(--s) + 2em);
}
/* on hover 1em = S/5 */
.gallery:hover {
font-size: calc(var(--s) / 5);
}Grafik font-size trik ini berguna jika kita ingin menganimasikan gradien atau properti lain yang tidak dapat dianimasikan. Properti khusus yang ditentukan dengan @property dapat menyelesaikan masalah seperti itu, tetapi dukungan untuk itu masih kurang pada saat penulisan.
Saya menemukan font-size trik dari @SelenIT2 sambil mencoba memecahkan tantangan di Twitter.
Bentuk lain? Ayo pergi!
Kali ini kami memotong gambar bersarang menjadi bentuk belah ketupat. Saya akan membiarkan Anda membedah kode sebagai latihan untuk mengetahui bagaimana kita sampai di sini. Anda akan melihat bahwa strukturnya sama seperti pada contoh kami. Satu-satunya perbedaan adalah bagaimana kita menggunakan gradien untuk membuat bentuk. Gali dan pelajari!
Kisi Gambar Melingkar
Kami dapat menggabungkan apa yang telah kami pelajari di sini dan di artikel sebelumnya untuk membuat kisi gambar yang lebih menarik. Kali ini, mari kita buat semua gambar di grid kita melingkar dan, saat mengarahkan kursor, perluas gambar untuk mengungkapkan semuanya karena menutupi sisa foto.
Struktur HTML dan CSS dari grid bukanlah hal baru dari sebelumnya, jadi mari kita lewati bagian itu dan fokus pada bentuk melingkar dan efek hover yang kita inginkan.
Kami akan menggunakan clip-path dan perusahaan circle() berfungsi untuk — Anda dapat menebaknya! - potong lingkaran dari gambar.
Angka tersebut menggambarkan clip-path digunakan untuk gambar pertama. Sisi kiri menunjukkan status awal gambar, sedangkan sisi kanan menunjukkan status melayang. Kamu dapat memakai alat online ini untuk bermain dan memvisualisasikan clip-path nilai-nilai.
Untuk gambar lainnya, kita dapat memperbarui pusat lingkaran (70% 70%) untuk mendapatkan kode berikut:
.gallery > img:hover {
--_c: 50%; /* same as "50% at 50% 50%" */
}
.gallery > img:nth-child(1) {
clip-path: circle(var(--_c, 55% at 70% 70%));
}
.gallery > img:nth-child(2) {
clip-path: circle(var(--_c, 55% at 30% 70%));
}
.gallery > img:nth-child(3) {
clip-path: circle(var(--_c, 55% at 70% 30%));
}
.gallery > img:nth-child(4) {
clip-path: circle(var(--_c, 55% at 30% 30%));
}Perhatikan bagaimana kita mendefinisikan clip-path nilai sebagai fallback di dalam var(). Cara ini memungkinkan kita untuk lebih mudah mengupdate nilai pada hover dengan mengatur nilai --_c variabel. Ketika menggunakan circle(), posisi default titik tengah adalah 50% 50%, jadi kita bisa menghilangkannya untuk kode yang lebih ringkas. Itu sebabnya Anda melihat bahwa kami hanya mengatur 50% alih-alih 50% at 50% 50%.
Kemudian kami meningkatkan ukuran gambar kami saat mengarahkan kursor ke ukuran keseluruhan kisi sehingga kami dapat menutupi gambar lainnya. Kami juga memastikan z-index memiliki nilai lebih tinggi pada gambar yang dilayangkan, jadi ini adalah yang teratas di kami konteks penumpukan.
.gallery {
--s: 200px; /* controls the image size */
--g: 8px; /* controls the gap between images */
display: grid;
grid: auto-flow var(--s) / repeat(2, var(--s));
gap: var(--g);
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
cursor: pointer;
z-index: 0;
transition: .25s, z-index 0s .25s;
}
.gallery > img:hover {
--_c: 50%; /* change the center point on hover */
width: calc(200% + var(--g));
z-index: 1;
transition: .4s, z-index 0s;
}
.gallery > img:nth-child(1){
clip-path: circle(var(--_c, 55% at 70% 70%));
place-self: start;
}
.gallery > img:nth-child(2){
clip-path: circle(var(--_c, 55% at 30% 70%));
place-self: start end;
}
.gallery > img:nth-child(3){
clip-path: circle(var(--_c, 55% at 70% 30%));
place-self: end start;
}
.gallery > img:nth-child(4){
clip-path: circle(var(--_c, 55% at 30% 30%));
place-self: end;
}Apa yang terjadi dengan
place-selfProperti? Mengapa kita membutuhkannya dan mengapa setiap gambar memiliki nilai tertentu?
Apakah Anda ingat masalah yang kami miliki di artikel sebelumnya ketika membuat kisi-kisi potongan puzzle? Kami meningkatkan ukuran gambar untuk membuat luapan, tetapi luapan beberapa gambar salah. Kami memperbaikinya menggunakan place-self milik.
Masalah yang sama di sini. Kami meningkatkan ukuran gambar sehingga masing-masing gambar memenuhi sel gridnya. Tetapi jika kita tidak melakukan apa-apa, semuanya akan meluap di sisi kanan dan bawah grid. Yang kami butuhkan adalah:
- gambar pertama yang memenuhi tepi kanan bawah (perilaku default),
- gambar kedua meluap di tepi kiri bawah,
- gambar ketiga meluap di tepi kanan atas, dan
- gambar keempat meluap tepi kiri atas.
Untuk mendapatkannya, kita perlu menempatkan setiap gambar dengan benar menggunakan place-self milik.
Jika Anda tidak terbiasa dengan place-self, itu singkatan dari justify-self dan align-self untuk menempatkan elemen secara horizontal dan vertikal. Ketika dibutuhkan satu nilai, kedua perataan menggunakan nilai yang sama.
Memperluas Panel Gambar
Di artikel sebelumnya, Saya membuat efek zoom keren yang berlaku untuk kisi gambar tempat kita dapat mengontrol semuanya: jumlah baris, jumlah kolom, ukuran, faktor skala, dll.
Kasus khusus adalah panel ekspansi klasik, di mana kami hanya memiliki satu baris dan wadah lebar penuh.
Kami akan mengambil contoh ini dan menggabungkannya dengan bentuk!
Sebelum kita melanjutkan, saya sangat merekomendasikan membaca saya artikel lainnya untuk memahami bagaimana trik yang akan kita bahas. Lihat itu, dan kami akan melanjutkan di sini untuk fokus pada pembuatan bentuk panel.
Pertama, mari kita mulai dengan menyederhanakan kode dan menghapus beberapa variabel
Kami hanya membutuhkan satu baris dan jumlah kolom harus disesuaikan berdasarkan jumlah gambar. Itu berarti kita tidak lagi membutuhkan variabel untuk jumlah baris (--n) dan kolom (--m ) tapi kita perlu menggunakan grid-auto-flow: column, memungkinkan kisi menghasilkan kolom secara otomatis saat kita menambahkan gambar baru. Kami akan mempertimbangkan ketinggian tetap untuk wadah kami; secara default, itu akan menjadi lebar penuh.
Mari kita klip gambar menjadi bentuk miring:
clip-path: polygon(S 0%, 100% 0%, (100% - S) 100%, 0% 100%);Sekali lagi, setiap gambar terkandung dalam sel kisinya, jadi ada lebih banyak ruang di antara gambar daripada yang kita inginkan:
Kita perlu menambah lebar gambar untuk membuat tumpang tindih. Kami mengganti min-width: 100% dengan min-width: calc(100% + var(--s)), Di mana --s adalah variabel baru yang mengontrol bentuk.
Sekarang kita perlu memperbaiki gambar pertama dan terakhir, sehingga mereka seperti keluar dari halaman tanpa celah. Dengan kata lain, kita dapat menghilangkan kemiringan dari sisi kiri gambar pertama dan kemiringan dari sisi kanan gambar terakhir. Kami membutuhkan yang baru clip-path khusus untuk kedua gambar tersebut.
Kita juga perlu memperbaiki luapan. Secara default, semua gambar akan meluap di kedua sisi, tetapi untuk yang pertama, kita membutuhkan luapan di sisi kanan sementara kita membutuhkan luapan kiri untuk gambar terakhir.
.gallery > img:first-child {
min-width: calc(100% + var(--s)/2);
place-self: start;
clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
min-width: calc(100% + var(--s)/2);
place-self: end;
clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}Hasil akhirnya adalah panel gambar miring yang mengembang bagus!
Kami dapat menambahkan gambar sebanyak yang Anda inginkan, dan kisi akan menyesuaikan secara otomatis. Plus, kita hanya perlu mengontrol satu nilai untuk mengontrol bentuknya!
Kita dapat membuat tata letak yang sama dengan flexbox karena kita berurusan dengan satu baris elemen. Disini adalah implementasi saya.
Tentu, gambar miring itu keren, tapi bagaimana dengan pola zig-zag? Saya sudah menggoda yang ini di akhir artikel terakhir.
Yang saya lakukan di sini hanyalah mengganti clip-path dengan mask… dan coba tebak? Saya sudah memiliki artikel terperinci tentang menciptakan bentuk zig-zag itu — belum lagi online generator untuk mendapatkan kode. Lihat bagaimana semuanya bersatu?
Bagian tersulit di sini adalah memastikan zig-zag sejajar sempurna, dan untuk ini, kita perlu menambahkan offset untuk setiap :nth-child(odd) elemen gambar.
.gallery > img {
mask:
conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
100% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y,
conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg)
0% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y;
}
/* we add an offset to the odd elements */
.gallery > img:nth-child(odd) {
--_p: var(--s);
}
.gallery > img:first-child {
mask:
conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
0 calc(50% + var(--_p, 0%))/100% calc(2*var(--s));
}
.gallery > img:last-child {
mask:
conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg)
0 calc(50% + var(--_p, 0%)) /100% calc(2*var(--s));
}Perhatikan penggunaan --_p variabel, yang akan jatuh kembali ke 0% tapi akan sama dengan --_s untuk gambar aneh.
Berikut adalah demo yang menggambarkan masalah tersebut. Arahkan kursor untuk melihat bagaimana offset — ditentukan oleh --_p - sedang memperbaiki keselarasan.
Juga, perhatikan bagaimana kita menggunakan topeng yang berbeda untuk gambar pertama dan terakhir seperti yang kita lakukan pada contoh sebelumnya. Kita hanya membutuhkan zig-zag di sisi kanan gambar pertama dan sisi kiri gambar terakhir.
Dan mengapa tidak sisi bulat? Ayo lakukan!
Saya tahu bahwa kodenya mungkin terlihat menakutkan dan sulit untuk dipahami, tetapi semua yang terjadi adalah kombinasi dari berbagai trik yang telah kita bahas dalam artikel ini dan artikel lain yang telah saya bagikan. Dalam hal ini, saya menggunakan struktur kode yang sama dengan bentuk zig-zag dan miring. Bandingkan dengan contoh-contoh itu, dan Anda tidak akan menemukan perbedaan! Itu adalah trik yang sama di artikel saya sebelumnya tentang efek zoom. Kemudian, saya menggunakan saya tulisan lainnya dan generator online saya untuk mendapatkan kode topeng yang membuat bentuk bulat itu.
Jika Anda ingat apa yang kami lakukan untuk zig-zag, kami telah menggunakan topeng yang sama untuk semua gambar tetapi kemudian harus menambahkan offset ke gambar aneh untuk membuat tumpang tindih yang sempurna. Dalam hal ini, kita membutuhkan topeng yang berbeda untuk gambar bernomor ganjil.
Masker pertama:
mask:
linear-gradient(-90deg,#0000 calc(2*var(--s)),#000 0) var(--s),
radial-gradient(var(--s),#000 98%,#0000) 50% / calc(2*var(--s)) calc(1.8*var(--s)) space repeat;
Yang kedua:
mask:
radial-gradient(calc(var(--s) + var(--g)) at calc(var(--s) + var(--g)) 50%,#0000 98% ,#000)
calc(50% - var(--s) - var(--g)) / 100% calc(1.8*var(--s))
Satu-satunya upaya yang saya lakukan di sini adalah memperbarui topeng kedua untuk memasukkan variabel gap (--g) untuk membuat ruang di antara gambar.
Sentuhan terakhir adalah memperbaiki gambar pertama dan terakhir. Seperti semua contoh sebelumnya, gambar pertama membutuhkan tepi kiri lurus sedangkan yang terakhir membutuhkan tepi kanan lurus.
Untuk gambar pertama, kita selalu tahu topeng yang harus dimiliki, yaitu sebagai berikut:
.gallery > img:first-child {
mask:
radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}
Untuk gambar terakhir, itu tergantung pada jumlah elemen, jadi penting jika elemen itu :nth-child(odd) or :nth-child(even).
.gallery > img:last-child:nth-child(even) {
mask:
linear-gradient(to right,#0000 var(--s),#000 0),
radial-gradient(var(--s),#000 98%,#0000) left / calc(2*var(--s)) calc(1.8*var(--s)) repeat-y
}
.gallery > img:last-child:nth-child(odd) {
mask:
radial-gradient(calc(var(--s) + var(--g)) at left,#0000 98%,#000) 50% / 100% calc(1.8*var(--s))
}Itu saja! Tiga tata letak berbeda tetapi trik CSS yang sama setiap kali:
- struktur kode untuk membuat efek zoom
- topeng atau clip-path untuk membuat bentuk
- konfigurasi terpisah untuk elemen ganjil dalam beberapa kasus untuk memastikan kami memiliki tumpang tindih yang sempurna
- konfigurasi khusus untuk gambar pertama dan terakhir agar bentuknya hanya di satu sisi.
Dan ini adalah demo besar dengan mereka semua bersama-sama. Yang Anda butuhkan hanyalah menambahkan kelas untuk mengaktifkan tata letak yang ingin Anda lihat.
Dan inilah yang dengan implementasi Flexbox
Membungkus
Oof, kita selesai! Saya tahu ada banyak trik dan contoh CSS antara artikel ini dan yang terakhir, belum lagi semua trik lain yang saya rujuk di sini dari artikel lain yang saya tulis. Butuh waktu bagi saya untuk menyatukan semuanya, dan Anda tidak harus memahami semuanya sekaligus. Satu bacaan akan memberi Anda gambaran umum yang baik tentang semua tata letak, tetapi Anda mungkin perlu membaca artikel lebih dari sekali dan fokus pada setiap contoh untuk memahami semua trik.
Apakah Anda memperhatikan bahwa kami tidak menyentuh HTML sama sekali selain mungkin jumlah gambar di markup? Semua tata letak yang kami buat berbagi kode HTML yang sama, yang tidak lain adalah daftar gambar.
Sebelum saya mengakhiri, saya akan meninggalkan Anda dengan satu contoh terakhir. Ini adalah "versus" antara dua karakter anime dengan efek hover yang keren.
Bagaimana denganmu? Bisakah Anda membuat sesuatu berdasarkan apa yang telah Anda pelajari? Tidak perlu rumit — bayangkan sesuatu yang keren atau lucu seperti yang saya lakukan dengan pertarungan anime itu. Ini bisa menjadi latihan yang baik untuk Anda, dan kami dapat mengakhiri dengan koleksi yang sangat baik di bagian komentar.
