8 Cuplikan CSS & JavaScript untuk Membuat Gradien Kompleks

Gradien adalah pokok sebenarnya dari desain web. Kecantikan mereka terletak pada keserbagunaannya. Gunakan mereka untuk membuat pernyataan yang besar dan berani. Atau gunakan sebagai aksen untuk menciptakan suasana hati.

Kemungkinannya tidak pernah sebesar ini. CSS dan JavaScript modern memungkinkan kita melakukan lebih dari sekadar meniru desain cetak. Kita dapat menggunakannya untuk menambahkan gerakan dan interaktivitas ke dalam mix. Tapi itu lebih dalam.

Gradien tidak lagi terbatas pada latar belakang container. Mereka juga dapat mengatur gaya konten teks. Ini adalah peluang untuk menyempurnakan berita utama dan ajakan bertindak.

Jadi, hal apa saja yang dapat Anda lakukan dengan gradien? Kami memindai arsip CodePen untuk menemukan delapan contoh bagus.

Penggunaan Teks Berbintik & Gradien color-mix oleh LukyVJ

Cuplikan ini menggunakan CSS terbaru color-mix Properti. Properti ini menyederhanakan proses penggelapan, pencerahan, dan desaturasi warna. Hasilnya adalah gradien teks indah yang memungkinkan latar belakang halaman terlihat. Kita jarang mengasosiasikan gradien dengan butiran. Tapi itu bekerja dengan sempurna di sini.

Lihat Pena Teks Berbintik & Gradien oleh LukyVJ

Pola Latar Belakang Gradien Elemen Tunggal oleh Ana Tudor

Gradien berbentuk kerucut menambahkan sentuhan unik pada elemen. Transisi warna berputar di sekitar a titik tengah. Anda dapat melihatnya dipajang di contoh ini. Setiap kartu memiliki pola yang unik dan rumit.

Lihat Pena Pola latar belakang kartu 1 elemen (lihat deskripsi) oleh Ana Tudor

Pola Gradien Radial Animasi oleh Loktar

Gradien masih bisa menjadi latar belakang yang bagus. Dan presentasi animasi ini menunjukkan sejauh mana kemajuan mereka. Kelihatannya luar biasa. Baris kode yang relatif sedikit yang mendukungnya juga sama mengesankannya.

Lihat Pena Pola Gradien Radial Bergerak oleh Loktar

Pusaran Gradien Radial DIV Tunggal oleh Adam Argyle

Kok bisa jomblo div elemen mengandung begitu banyak warna? Keajaibannya ada dalam beberapa gradien radial. Empat gradien dimulai dari tepi dan bertemu di tengah. Hasilnya adalah kegembiraan yang penuh warna.

Lihat Pena Pusaran Gradien Radial 4 Sudut oleh Adam Argyle

UI Prompt AI dengan Gradien Halus oleh Vincent Durand

Lihatlah gradien halus pada antarmuka kecerdasan buatan (AI) ini. Ini secara cerdik dipadukan dengan morfisme kaca untuk menghasilkan estetika yang unik. Efeknya menghidupkan halaman.

Lihat Pena Imagica – UI perintah AI oleh Vincent Durand

Trailer Kursor Gradien Radial oleh Uzo Awili

Berikut adalah contoh gradien yang menyinari gambar latar belakang. Gerakkan kursor Anda dan lihat warnanya menjadi merah muda cerah. Sedikit CSS dan JavaScript membuatnya berfungsi.

Lihat Pena Trailer Kursor Gradien Radial – Menggunakan Pemosisian Gradien oleh Uzo Awili

Bunga Mekar CSS Ajaib di Malam Hari Md Usman Ansari

Gradien memainkan peran yang cukup besar dalam cuplikan “ajaib” ini. Mereka menambah dimensi dan memungkinkan kehidupan tanaman virtual memudar menjadi hitam. CSSnya repeating-linear-gradient fungsi menyederhanakan penggunaan efek.

Lihat Pena Bunga Mekar CSS di Malam Ajaib oleh Md Usman Ansari

Contoh Gradien Kompleks oleh Drew McConville

Menggabungkan beberapa gradien ke dalam latar belakang CSS dapat memberikan hasil yang menarik. Gulir cuplikan ini untuk melihat empat contohnya. Anda akan menemukan campuran warna dan jenis gradien. Bahkan mungkin meyakinkan Anda untuk melakukan beberapa eksperimen.

Lihat Pena Contoh Gradien Kompleks oleh Drew McConville

Tampilan Baru pada Pokok Desain

Ada suatu masa ketika desainer menghindari gradien. Era desain datar mendorong penggunaan warna-warna solid. Tapi kami berhak kembali kepada mereka.

Contoh di atas menunjukkan bahwa gradien masih merupakan alat yang berharga. Mereka menambah cita rasa pada semua jenis elemen desain. Dan sepertinya para desainer terus-menerus menemukan kegunaan kreatif.

Hal ini menunjukkan fleksibilitas mereka. Anda dapat mengubah gradien dengan banyak cara. Buatlah sesederhana atau serumit yang Anda suka.

Ingin melihat lebih banyak lagi ide gradien CSS dan JavaScript? Pastikan untuk memeriksa kami Koleksi CodePen!