Belajar Materialize #3 : Pewarnaan pada Materialize

Belajar Materialize #3 : Pewarnaan pada Materialize – Hai semua kembali lagi dengan saya admin kodingin.com. Kali ini saya akan membahas mengenai pewarnaan pada materialize.

Pewarnaan pada halaman website tentunya hal penting untuk membedakan antar objek / bagian. Dengan memberikan warna yang menarik akan membuat pengguna ingin berlama-lama mengunjungi situs website anda.

Warna yang disajikan pada materialize sangaat keren, tidak hanya terbatas pada satu atau 2 warna. Materialize memberikan banyak warna dengan variasi yang berbeda.

Oke, Langsung saja kita bahas tutorial belajar pewarnaan pada Materialize.

Belajar Materialize #3 : Pewarnaan pada Materialize

Untuk menggunakan warna pada materialize cukup mudah, kita hanya memasang nama class warna pada suatu tag HTML.

Penggunaan warna pada materialize dapat di bedakan menjadi 2 yaitu latar belakang dan warna teks. Kita dapat merubah latar belakang dan teks sesuai yang kita inginkan.

Jika bicara mengenai warna, maka setiap orang mempunyai pandangan masing-masing dengan alasan kesuakaan terhadap warna tertentu.

Di bawah ini gambar daftar class warna di materialize.

Belajar Materialize #3 : Pewarnaan pada Materialize
Belajar Materialize #3 : Pewarnaan pada Materialize

Gambar yang saya tampilkan di atas hanya beberapa warna, anda dapat melihat lebih lengkapnya di https://materializecss.com/color.html

Memberikan Warna Latar Belakang Materialize

Saya akan memberikan contoh bagaimana cara memberikan warna background pada tag HTML sesuai elemen yang di pilih.

Berikut ini contoh penggunaan warna latar belakang.

Ada 4 Variasi warna yang coba, yaitu purple, pink, red dan blue.

Sekarang kita lihat hasilnya.

Belajar Materialize #3 : Pewarnaan pada Materialize
Memberikan latar belakang warna materialize

Warna sudah sesuai dengan apa yang kita masukkan dengan ukuran tinggi 200px.

Memberikan Warna pada Teks Materialize

Warna teks yang disajikan materialize juga cukup lengkap. Penggunaan teks sebaiknya tidak sama dengan warna latar belakang, hal ini mengakibatkan tulisan tidak dapat di baca.

Berikut ini contoh penggunaan warna pada materialize.

Pasti anda penasaran dari mana saya mendapatkan white-text ?

sedangkan di tabel color pallete tidak ada.

Penggunaan warna teks pada materialize hanya di tambahin tanda (-text) di belakang setelah nama class berdasarkan warna dari color pallete.

Jika kode diatas dijalankan maka hasilnya.

Belajar Materialize #3 : Pewarnaan pada Materialize
Belajar Materialize #3 : Pewarnaan pada Materialize

Hasil tampilan website di atas sudah benar sesuai dengan class yang kita masukkan, dimana warna teks berwarna putih dan hitam.

Cara Custom Warna Materalize

Ketika warna yang di inginkan sudah sesuai, namun anda ingin menambahkan suatu tambahan style tertentu, maka solusinya yaitu custom sendiri.

Sebagai contoh saya akan membuat tulisan menjadi besar semua.

Gimana cara membuat tuliisan menjadi besar semua menggunakan CSS ?

Langsung saja di bawah ini contoh custom style pada materialize.

Solusinya yaitu kita membuat elemen css sesuai class yang sudah ada.

Sekarang coba kita lihat hasilnya.

Belajar Materialize #3 : Pewarnaan pada Materialize
Belajar Materialize #3 : Pewarnaan pada Materialize

Tampilan berhasil sesuai denngan kode yang kita tuliskan yaitu text menjai besar semua dan berada di tengah.

Kesimpulan

Penggunaan warna pada materialize dapat di gunakan untuk merubah warna belakang dan merubah warna teks. untuk memberikan class pada warna teks rumus nya menambah class -text setelah nama class. Penggunaan Color pada Materialize cukup keren dan layak anda coba sendiri.

Sekian Belajar Materialize #3 : Pewarnaan pada Materialize.

Semoga Bermanfaat. Semangat koding.

Baca Juga :

One comment

Leave a Reply