[Tutorial] Materialize - Color di Materializecss

Assalamualaikum Wr Wb...

[Tutorial] Materialize - Color di Materializecss - Pada artikel kali ini kita akan membahas tentang color di Materializecss. Dengan adanya fungsi color ini, kita tentu kita tak perlu menghafal kode HEX atau RGBA, kita hanya menghafal apa yang sudah di setting oleh tim Materializecss.



Kamu dapat melihat daftar colornya di website Materializecss (Pada bagian Color Palette), disini: http://materializecss.com/color.html

Banyak sekali color-color atau warna di Materializecss yang sudah di set oleh mereka. Lalu bagaimana cara menggunakannya?

Sebenarnya di situs tersebut sudah dijelaskan bagaimana caranya menggunakan color pada Materializecss. Namun mungkin kamu kurang paham, maka dari itu di sini saya akan mencoba menjelaskan bagaimana caranya menggunakan color di Materializecss.

Dasar-Dasar Color di Materializecss

Dari yang saya pelajari, syntax atau struktur dari color Materializecss adalah sebagai berikut:

<div class="warna gelapterang-level"></div>

Disini misalnya saya ingin membuat warna merah, dengan keterangan level 3. Maka kodenya akan menjadi seperti ini:

<div class="red lighten-3"></div>

Bagaimana? Sudah paham? Oke kita lanjut.

Memberi Color Pada Background

Sekarang kita akan belajar bagaimana caranya memberikan warna pada background. Mungkin ini masih abstrak di kepala kamu, maka mari langsung saja kita praktek.

Misal di sini saya membuat sebuah kotak dengan ada border 2px.

Kodenya seperti ini:

<div id="kotak">Serba Kode</div>

Sekarang, mari kita tambahkan background dengan warna hijau terang level 3

<div id="kotak" class="green lighten-3">Serba Kode</div>

Maka hasilnya akan seperti dibawah ini:

Nah, sekarang kita sudah membuat background di kotak tersebut. Sudah paham bukan?

Memberi Color Pada Teks

Sekarang, bagaimana sih caranya memberikan warna pada suatu teks?

Gampang, berikut strukturnya:

<span class="warna-text text-gelapterang-level">Serba Kode</span>

Kode diatas terlihat ada perubahan, yakni penambahan -text dan text-
Nah, penambahan kode diatas berarti menandakan kita akan memberi warna kepada suatu teks.

Mari praktek!

Sekarang coba kamu tulis sebaris kode saja, yakni kode untuk membuat teks yang nantinya diberi warna menggunakan fungsi color pada Materializecss.

<span class="red-text text-lighten-2">Serba Kode</span>

Sekarang coba lihat seperti apa hasilnya. Kalau ada perubahan warna yang cocok dengan kode diatas, maka kamu berhasil.

Baik, sekian artikel ini saya sampaikan, semoga dapat bermanfaat. Wassalamualaikum Wr Wb.


Kalau ada pertanyaan, silahkan komentar.