Efek metalik keduanya menarik dan fleksibel. Mereka sering digunakan untuk menciptakan estetika industri atau teknologi tinggi. Mereka berfungsi dengan baik sebagai latar belakang, namun juga dapat menonjolkan elemen terkecil sekalipun. Semua orang mulai dari produsen hingga blogger sci-fi bisa mendapatkan keuntungan.
Secara tradisional, efek ini membutuhkan gambar yang kompleks. Hal ini dapat mengakibatkan waktu muat halaman lebih lambat.
Tapi itu tidak lagi terjadi. Hari-hari ini, beberapa CSS dan JavaScript yang dibuat dengan baik dapat melakukan pekerjaan itu. Sekarang dimungkinkan untuk membuat efek metalik yang indah dengan penggunaan gambar yang minimal.
Ingin tahu tentang apa yang mungkin? Kami telah mengumpulkan kumpulan potongan kode yang menunjukkan seberapa jauh kemajuan alat ini – selamat menikmati!
Teks Bertepi Metalik dengan CSS oleh Shireen Taj
Teks ini menampilkan efek perbatasan emas yang luar biasa. Menggunakan kombinasi gradien CSS, filter, dan transformasi, tampilannya sangat tajam. CSS Grid digunakan untuk menumpuk lapisan latar depan dan latar belakang. Bagian terbaiknya adalah tidak ada gambar yang terlihat.
Lihat Pena Teks Bertepi Metalik dengan CSS oleh Shireen Taj
Tekstur Matcap Kotak Bulat oleh Victor Vergara
Inilah presentasi 3D dengan nuansa dunia lain. Itu memang menggunakan gambar – tetapi dengan cara yang sangat pintar. Ambil kotak logam, misalnya. Stok foto telah ditumpangkan ke objek untuk menambah tekstur. Semuanya juga interaktif, karena Anda dapat menyeret untuk memutar dan mengubah perspektif Anda.
Lihat Pena Rounded Box – tekstur Matcap oleh Victor Vergara
Cangkir Kopi di CSS oleh Alvaro Montoro
Kemampuan untuk membuat objek seperti aslinya menggunakan CSS sangat mengesankan. Cangkir kopi ini adalah contoh utama – sampai ke pita metalik di bagian atas. Tampilan yang disikat dibangun menggunakan kombinasi gradien.
Lihat Pena Cangkir Kopi di CSS oleh Alvaro Montoro
Cincin Olimpiade Logam dalam CSS Murni oleh Josetxu
Animasi yang terinspirasi Olimpiade ini memungkinkan Anda mengubah warna cincin ikonik. Klik pada medali emas, perak, atau perunggu (dibuat dengan tombol radio HTML) dan cincin akan diperbarui. Ada cukup banyak CSS yang bekerja di sini – tetapi tidak ada JavaScript.
Lihat Pena Cincin Olimpiade Logam – CSS Murni oleh Josetxu
Thor StormBraker dengan CSS Murni oleh Manz
Efek metalik tidak selalu harus realistis. Ada juga nilai dalam tampilan yang lebih kartun – seperti kapak ini. Terinspirasi oleh seri komik Thor, teksturnya memiliki nuansa clipart yang jelas. Ini adalah contoh yang bagus tentang bagaimana desainer dapat memanfaatkan CSS untuk menciptakan nuansa teknologi rendah.
Lihat Pena Thor StormBraker dengan CSS Murni oleh Manz
Logam & Api SVG FX oleh David Rogers
Kombinasi klasik logam dan api ditampilkan secara penuh di sini. Presentasi abad pertengahan ini menampilkan teks animasi yang bersinar dan bunga api yang naik dengan cepat. Secara keseluruhan, adegan itu berhasil menciptakan suasana hati.
Lihat Pena Logam dan Api SVG FX oleh David Rogers
Cradle Newton Prosedural oleh Brandel Zachernuk
buaian Newton tampaknya menjadi bahan pokok dekorasi kantor. Tetapi jika Anda tidak memiliki ruang untuk itu di meja Anda, cuplikan apik ini adalah alternatif yang bagus. Diberdayakan oleh JavaScript, bola 3D metalik ini adalah factionmili yang sangat baik dari yang asli. Anda juga dapat menyeret model untuk mengubah perspektif.
Lihat Pena Cradle Newton Prosedural oleh Brandel Zachernuk
Lencana Logam dengan Pseudo-Gradien Sudut oleh Ellesa Sabasaje
Kami melihat banyak tombol logam di dunia nyata – pikirkan peralatan dan mobil. Dengan demikian, mereka sangat cocok untuk membuat ulang efek ini secara online. Koleksi lencana ini menawarkan reproduksi seperti aslinya menggunakan CSS murni.
Lihat Pena Lencana Logam dengan Pseudo-Gradien Sudut oleh Ellesa Sabasaje
Tambahkan Beberapa Logam Berat ke Proyek Anda
Cuplikan di atas menggunakan efek metalik dengan cara yang berani dan halus. Tapi bagaimanapun juga, mereka menghadirkan kedalaman dan detail pada elemen desain. Mereka mampu menjadi daya tarik utama atau sentuhan akhir.
Bagaimanapun Anda menggunakannya, tampilannya pasti akan menarik perhatian. Dan praktik pembangunan modern membuatnya lebih mudah untuk diimplementasikan.
Ingin melihat lebih banyak mahakarya metalik? Kemudian pastikan untuk memeriksa kami Koleksi CodePen!
