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)
.gradient{
background-image: linear-gradient(#03A9F4,#0043d4);
}
background-image: linear-gradient(#03A9F4,#0043d4);
}
Gradasi Kiri ke Kanan
.gradient{
background-image: linear-gradient(to right,#03A9F4,#0043d4);
}
background-image: linear-gradient(to right,#03A9F4,#0043d4);
}
Gradasi Diagonal
.gradient{
background-image: linear-gradient(to bottom right , #03f41f , #d400d0);
}
background-image: linear-gradient(to bottom right , #03f41f , #d400d0);
}
Gradasi Terarah
.gradient{
background-image: linear-gradient(-30deg,red,green,blue);
}
background-image: linear-gradient(-30deg,red,green,blue);
}
Gradasi Terulang
.gradient{
background-image: repeating-linear-gradient(-30deg,red,green 10%,blue 20%);
}
background-image: repeating-linear-gradient(-30deg,red,green 10%,blue 20%);
}
Radial Gradient
Radial Default
.gradient{
background-image: radial-gradient(#FFC107 , #FF5722 , #3F51B5);
}
background-image: radial-gradient(#FFC107 , #FF5722 , #3F51B5);
}
Radial Dengan ukuran
.gradient{
background-image: radial-gradient(#FFC107 10%, #FF5722 5%, #3F51B5 60%);
}
background-image: radial-gradient(#FFC107 10%, #FF5722 5%, #3F51B5 60%);
}
Radial Lingkaran Sempurna
.gradient{
background-image: radial-gradient(circle, #FFC107 , #FF5722 , #3F51B5);
}
background-image: radial-gradient(circle, #FFC107 , #FF5722 , #3F51B5);
}
Radial Berulang
.gradient{
background-image: repeating-radial-gradient(#ffc107 , #ff5722 5% , #3f51b5 20%);
}
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 :
Reaksi dan Komentar