Halo teman – teman, selamat datang kembali di website tips dan trik Dumet School. Di artikel sebelumnya saya sudah membahas tentang Mengenal Framework CSS Matrealize jika teman – teman ingin tahu apa itu framework matrealize silahkan reriew pada artikel saya sebelumnya. Karena saya membahas beberapa tentang framework matrealize, serta cara menggunakannya, pada artikel kali ini kita akan lanjut pada pembahasan Color Class Pada Framework CSS Materialize tentunya di sediakan juga oleh framework ini dan membantu para design website untuk tidak terlalu banyak custom pada css nya salah satu nya color class. Dimana ada banyak sekali warna yang sudah di sediakan oleh matrealize dan kita tinggal memanggil saja class color tersebut, yang bertujuan memberikan warna text, background atau yang lainnya. Namun yang harus di pahami adalah bagaimana cara memberikan class pada object nya. Pada studi case kali ini saya akan share bagaimana caranya menerapkan color class ini pada background dan text. Untuk teman – teman silahkan siapkan file matrealize nya, atau silahkan review di artikel sebelumnya untuk menginstall nya.
Lanjut pada artikel kali ini tentang Color Class Pada Framework CSS Materialize teman – teman ketikkan class container, row dan col nya
Kemudian save dengan nama index.html, lalu berikan text dengan tap p
Silahkan teman – teman pergi ke halaman http://materializecss.com/color.html
Kemudian teman – teman akan melihat banyak sekali warna yang di sediakan oleh matrealize beserta nama class nya
Nah untuk menggunakan class nya teman – teman perlu menyebutkan terlebih dahulu class grup nya atau kelompok warna nya, misalkan seperti yang saya screenshoot pada gambar di atas ini. Memiliki kelompok warna red, pink dan purple, baru letakkan sub class color grubnya. Misalkan saya mau menggunakan kelompok red dan nama class warna nya darken-4 maka saya hanya perlu memberikannya di bagian class col nya
Maka yang akan terjadi background akan berubah sesuai class darken-4, teman – teman save dan jalankan pada browser nya
Selanjutnya kita berikan class pada text, ini sedikit berbeda. Teman – teman hanya perlu menambahkan text pada setiap namanya
Atau <p class=”purple-text text-lighten-4“>
Jika sudah save dan refresh pada browsernya, maka hasilnya seperti gambar di bawah ini
Bagaimana, sangat mudah bukan..??
Sekian pada artikel kali ini tentang Color Class Pada Framework CSS Materialize kita lanjut kembali pada artikel yang akan datang. Semoga bermanfaat dan menjadi pilihan teman – teman untuk menggunakan framework css nya. Terimakasih dan sampai jumpa.