BLANTERWISDOM101

Buat Website Jadi Cool Dengan CSS Gradasi Warna / Color Gradients

04 Oktober 2019
0
Oy gaes, tampilan website saat ini sudah sangat apik nan keren. Banyak website yang seperti bukan website saja saat kita jelajahi. Selain UI yang segar dan flow ternyata juga ringan dan responsive, sangat cocok untuk para blogger juga ea

CT: Color Gradient

Salah satu elemen yang apik adalah warna gradien. Nah bila agan front end developer atau pingin edit template sendiri, boleh coba mendesain backgroundnya jadi gradien warna seperti ini.

Untuk mendesainnya, kita hanya menggunakan CSS saja tanpa tambahan. CSS Gradients namanya,  CSS Gradient sendiri memiliki dua jenis
- Linear Gradient atau Gradasi berdasarkan arah, umumnya bentuk kode seperti berikut
background-image: linier-gradient(arah,warna1,warna2,...,warna);
- Radial Gradient atau Gradasi yang berpusat ditengah umumnya bentuk kode seperti berikut
background-image: radial-gradient(arah,warna1,warna2,...,warna);


Linear Gradient

Gradasi Atas ke Bawah (Default)
Warna 1 akan di tampilkan di Atas dan warna 2 di Bawah. Kodenya
.gradient{
background-image: linear-gradient(#03A9F4,#0043d4);
}

Gradasi Kiri ke Kanan
Warna 1 akan di tampilkan di Kiri dan warna 2 di Kanan. Kodenya
.gradient{
background-image: linear-gradient(to right,#03A9F4,#0043d4);
}

Gradasi Diagonal
Warna 1 akan di tampilkan di Kiri Atas dan warna 2 di Kanan Bawah. Mantranya
.gradient{
background-image: linear-gradient(to bottom right , #03f41f , #d400d0);
}

Gradasi Terarah
Warna - warna gradasi terarah sesuai sudut kemiringan yang diinginkan. Passwordnya
.gradient{
background-image: linear-gradient(-30deg,red,green,blue);
}

Gradasi Terulang
Warna - warna gradasi diulangi sesuai ukuran komposisi yang ditetapkan. Contohnya
.gradient{
background-image: repeating-linear-gradient(-30deg,red,green 10%,blue 20%);
}


Radial Gradient

Radial Default
Warna - warna gradasi terpusat ditengah. Passwordnya
.gradient{
background-image: radial-gradient(#FFC107 , #FF5722 , #3F51B5);
}

Radial Dengan ukuran
Warna - warna gradasi terpusat ditengah, dengan komposisi warna yang bisa diatur. Menambahkan % setelah kode warna, seperti
.gradient{
background-image: radial-gradient(#FFC107 10%, #FF5722 5%, #3F51B5 60%);
}

Radial Lingkaran Sempurna
Warna - warna gradasi terpusat ditengah dengan bentuk lingkaran sempurna. Kodenya
.gradient{
background-image: radial-gradient(circle, #FFC107 , #FF5722 , #3F51B5);
}

Radial Berulang
Warna - warna gradasi terulang sesuai ukuran komposisi warna. Contohnya
.gradient{
background-image: repeating-radial-gradient(#ffc107 , #ff5722 5% , #3f51b5 20%);
}

Kesimpulan

Sekian pembahasan kali ini tentang penggunaan CSS gradien. Yap tak hanya cool tapi juga ringan karena berbasis CSS. Mungkin malah bisa desain gambar dari sini langsung :v OK Sekian matur nuwun


Semoga Bermanfaat
Share This :
Feriansyah


Tech enthusiast & tech developer

Reaksi dan Komentar