Cara Membuat Warna Gradien dengan CSS dan HTML
Cara Membuat Warna Gradien dengan CSS dan HTML
Cara Membuat Warna Gradien dengan CSS dan HTML – Hai ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan membahas tentang css gradient. Warna gradien merupakan paduan dari beberapa warna dalam satu frame. Biasanya dari warna muda, sedang, sampai tua. Pada sekarang ini banyak pada programmer atau desainer yang menggunakan warna gradien/gradient color karena dengan menggunakan gradient color aplikasi/website menjadi terlihat lebih smooth dan enak dipandang dibandingkan dengan solid color yang warnanya terlalu mencolok. Tapi tentunya sobat gunakan juga warna yg smooth untuk mendapatkan tampilan yang smooth juga dan jangan membuat perpaduan warna yang aneh-aneh yang membuat aplikasi anda terlihat menor.
Macam-macam Warna Gradien
Ada banyak macam jenis warna gradien yang bisa sobat gunakan seperti dari kanan ke kiri, atas ke bawah, pojok kiri atas ke pojok kanan bawah dan masih banyak lagi. Karena untuk contoh maka saya akan banyak menggunakan warna solid jadi nantinya sobat bisa coba-coba sendiri untuk membuat warna yang semenarik mungkin. Berikut adalah macam-macam warna gradien yang bisa sobat gunakan pada website sobat :
1. Linear Gradien – Atas ke bawah
Warna gradien ini merupakan default dari css gradien. Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
Pada contoh diatas saya menggunakan warna solid dengan menyebutkan warna/color dalam bahasa inggris saja seperti yellow, red, green, blue, black, gray, dll namun sobat juga bisa menggunakan hex color atau RGB. Kemudian pada htmlnya sobat tambahkan pada id-nya seperti dibawah (karena saya mencontohkan #gradient1 jadi tanda # adalah id namun jika sobat ingin menambahkan pada class maka sobat gunakan .gradient1 ganti tanda # dengan tanda titik(.) )
Hasilnya :
2. Linear Gradien – Kiri ke Kanan
Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
Pada contoh sebelumnya saya menggunakan nama warna dalam bahasa inggris namun pada contoh ini saya menggunakan hex code. Kemudian pada htmlnya sobat tambahkan pada id-nya seperti dibawah
Hasilnya :
3. Linear Gradient – Diagonal
Pada contoh dibawah ini berupa diagobal atau dari pojok kiri atas ke pojok kanan bawah. Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
Hasilnya :
4. Linear Gradient – Angles
Contoh kali ini kita akan menggunakan gradient dari angel. Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
Sobat bisa ganti -90deg dengan yang sobat inginkan. Kemudian pada htmlnya sobat tambahkan pada id-nya seperti dibawah
Hasilnya :
5. Linear Gradient – Multiple Color
Penggunaan warna pada css ini juga bisa sobat padukan antara nama dalam bahasa inggris, hex code dan RBG/RGBA. Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
Hasilnya :
6. Linear Gradient – Multiple Color Kiri ke Kanan
Warna gradien ini merupakan default dari css gradien. Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
Hasilnya :
7. Linear Gradient – Transparan
Dengan kode ini kita bisa membuat warna lebih smooth dan tidak mencolok yaitu dengan menggunakan rgba(). Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
Pada contoh diatas kita menggunakan 1 warna yaitu warna merah rgb(255, 0, 0) namun warnanya transparan dari 0 ke 1. Kemudian pada htmlnya sobat tambahkan pada id-nya seperti dibawah
Hasilnya :
8. Linear Gradient – Repeat/Mengulang Warna
Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
Hasilnya :
9. Gradient – Radial
Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
Hasilnya :
10. Gradient Radial – Ketebalan Warna
Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
Hasilnya :
11. Gradient Color – Shape
Shape ini seperti kita pada microsoft office ada circle, dll. Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
Hasilnya :
12. Gradient – Ketebalan 1
Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
sobat juga bisa gunakan
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Pada htmlnya sobat tambahkan pada id-nya seperti dibawah
Hasilnya :
14. Gradient – Ketebalan 2
Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
sobat juga bisa gunakan
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Pada htmlnya sobat tambahkan pada id-nya seperti dibawah
Hasilnya :
14. Radial Gradient – Repeat/Mengulang
Warna gradien ini merupakan default dari css gradien. Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
Hasilnya :
15. Animasi Backgrund warna gradient
Pada contoh terakhir saya akan mencontohkan gabungan dari warna gradient dan css animasi. Sehingga seolah-olah warna background berubah-ubah. Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
Hasilnya :
Warna background akan berubah-ubah. Padahal itu hanya animasi saja warnanya tidaklah berubah melainkan itu adalah warna gradient yang di zoom kemudian bergerak dengan keyframe dan mengulang-ulang. Jika sobat belum tahu tentang keyframe cari saja pada blog ini nanti saya akan membahas juga tentang css animasi dengan keyframe yang bisa membuat object bergerak pada website hanya menggunakan css saja.
Pada contoh diatas tentunya tidak bisa digunakan langsung di website/aplikasi yang sobat buat karena saya menggunakan warna yang mencolok. Sobat bisa kreasikan sesuai imajinasi sobat sehingga menghasilkan warna yang smooth dan eyecatching. Sekian postingan saya tentang Cara Membuat Warna Gradien dengan CSS dan HTML. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
