Cara Memberikan Gradiasi Warna Pada CSS3

Sebagai contoh saya sudah punya HTML sederhana seperti berikut dimana didalamnya bodynya ada sebuah elemen <div> kosong yang saya sudah berikan style sederhana lebar 300px tingginya 200px dan saya simpan ditengah-tengah dan misalnya saya berikan backgorund-color lalu kita lihat hasilnya akan ada warna background disana. Jadi sekarang kita akan coba berikan warna gradiasi pada kotak tersebut. Caranya adalah kita mengganti property background-color dengan background image lalu valuenya kita tulis linear-gradient

gunakan kurung buka tutupnya lalu didalamnya bisa kita kasih beberapa value. Value yang paling sederhana adalah kita kasih warna awalnya mau apa dan warna akhirnya seperti apa. Misalnya warna awalnya saya kasih salmon sedangkan warna akhir saya berikan warna yellow sebagai berikut

kita lihat hasilnya dibrowser maka hasilnya

jadi setengahnya akan menjadi warna merah tua dan setengahnya warnanya kuning. Jadi sintak sederhananya seperti berikut

untuk warnanya bisa gunakan nama, rgb, atau kode hexa. Misalnya saya ingin lebih dari dua warna mudah saja jadi teman teman tambahkan koma lalu warna yang akan diberikan. Kita coba berikan seperti berikut

jadi teman teman bisa berikan warna warna sesuai dengan keinginan teman teman. Itu dulu penjelasan dari pemberian warna gradiasi pada CSS3. Sampai jumpa pada bagian berikut terima kasih.

28 Agustus 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat