author Ahmad Muhardian

Tutorial CSS: Cara Mewarnai Teks dengan CSS


Warna adalah properti yang paling sering digunakan dalam CSS.

Kamu bisa bayangkan..

Jika warna web cuma hitam putih saja, maka akan terasa hambar dan monoton.

Karena itu, warna pasti dipakai di dalam CSS. Supaya tampilan web semakin menarik dan berwarna.

Pada tutorial ini, kita akan belajar tentang properti color yang meurpakan properti untuk memberikan warna.

Mari kita mulai..

Mengenal Properti Color

Porperti color merupakan properti untuk memberikan warna pada teks.

Contoh penggunaan:

h1 {
	color: orange;
}

Artinya:

Berikan warna orange untuk teks pada elemen <h1>.

Maka hasilnya:

contoh color

orange adalah nama warna yang sudah ada di CSS. Selain orange, masih banyak lagi warna lainnya.

Mari kita pelajari cara memberikan nilai warna yang benar:

Nilai yang Valid untuk Warna

Nilai warna pada properti `color dapat kita berikan dengan berbagai cara.

Salah satunya dengan menuliskan nama warna dalam bahasa inggris.

Misalnya, warna teks untuk paragraf adalah merah, maka kita bisa berikan color:red.

Selain menggunakan nama warna, terdapat juga cara lain yang valid seperti fungsi rgb(), kode heksa, dsb.

Mari kita bahas semuanya…

1. Nama warna

Nama warna merupakan cara yang sering digunakan, karena lebih mudah diingat.

Misalnya, saya suka warna hijau (teal), maka nanti dalam CSS-nya bisa langsung kita tulis teal.

Contoh:

header {
    color: teal;
}

Nama-nama warna ini sudah ada secara default, jadi kita tinggal pakai aja dengan menuliskan nama warnanya.

nama warana di css

Pastikan kamu menulis nama warnanya dengan bahasa inggris. jika pakai bahasa indonesia, maka tidak akan bisa.

Ini adalah sebagian dari nama-nama warna yang ada di CSS. Kalau ingin melihat daftar lengkap nama-nama warna di CSS, kamu bisa kunjungi: W3C.org (Color Keywords).

2. Kode Heksadesimal

Kode heksadesmial merupakan kode yang menggunakan bilangan heksa desmial, memiliki nilai dari 0 sampai f (16 dalam desimal).

Kode heksa demsial diawali dengan tanda pagar (#), kemudian diikuti kode heksanya. Kode ini dapat terdiri dari 3 digit atau 6 digit bilangan.

Contoh:

#0011ff (6 digit)
#01f (3 digit)

Setiap angka dalam kode heksa desimal menentukan nilai warna dalam RGB (#RRGGBB atau #RGB).

Misalnya untuk yang enam digit, dua angka di depan adalah untuk nilai warna merah, dua angka berikutnya untuk warna hijua, dan dua angka terakhir untuk warna biru.

Fungsi RGB

hijau (green), dan biru (blue).

Nilai yang diberikan pada parameter tersebut dimulai dari angka 0~255.

Semakin besar nilai yang diberikan, semakin kuat nilai warna tersebut.

Contoh penggunaan fungsi RGB.

h2 {
    color: rgb(88, 255, 21);
}

Pada contoh diatas, nilai paramter kedua (green) diberikan maksimal, maka nanti hasilnya warna hijau akan menjadi warna dominan.

Penulisan nama warna dengan kode heksadesimal bertujuan untuk membuat warna baru yang belum ada di daftar nama warna.

Selain menggunakan heksadesimal, ada juga cara lain seperti menggunakan fungsi rgb(), rgba(), hsl(), hsla().

4. Fungsi rgb() dan rgba()

Fungsi rgb() adalah fungsi yang menghasilkan warna berdasarkan konsep warna RGB pada komputer.

Warna RGB di Komputer

RGB merupakan singkatan dari Red, Green, Blue.

fungsi rgb

Contoh penggunaan fungsi rgb().

h1 {
	color: rgb(0, 0, 255);
}

Pada contoh ini, warna yang akan dihasilkan adalah warna biru, karena kita memberikan nilai 255 pada parameter terakhir (untuk warna biru).

Nilai parameter ini diberikan dari rentang angka 0 samapai 255.

Semakin besar angkanya, semakin banyak kandungan komposisid ari warna tersebut.

Contoh:

h1 {
	color: rgb(255, 128, 255)
}

Pada contoh ini, kita memberikan warna:

  • hijau = 255
  • merah = 128
  • biru = 255

Maka hasilnya:

contoh rgb

Hasilnya akan seperti warna β€˜pink’, karena warna merah, hijau, dan biru digabungkan dengan nilai yang berbeda-beda.

Selain menggunakan fungsi rgb() ada juga fungsi rgba().

Fungsi ini sama seperti fungsi RGB, tapi ada penambahan parameter alpha dibelakangnya.

fungsi rgba di CSS

Nilai alpha dapat diberikan dari 0% smpai 100% atau 0.0~1.0.

Semakin mendekati angka satu, warnanya akan semakin terang dan semakin mendekati angka nol, warnanya akan semakin transparan.

Contoh penggunaan fungsi RGBA.

p {
    color: rgba(40, 23, 11, 0.7);
}

Pada contoh di atas, nilai alpha yang diberikan adalah 0.7, atau sama dengan 70%.

5. Fungsi hsl() dan hsla()

Fungsi hsl() merupakan fungsi yang menghasilkan warna berdasarkan konsep warna HSL. HSL merupakan singkatan dari Hue, Saturation, Lightness.

fungsi hsl

Nilai hue yang diberikan pada fungsi ini dimulai dari 0~360, karena model warna HSL bentuknya seperti tabung, sehingga yang digunakan adalah nilai derajat dari lingkaran tutup tabungnya.

Sedangkan untuk nilai saturation dan lightness menggunakan persen, dari 0%~100%.

HSL color solid cylinder

Contoh penggunaan fungsi HSL dalam CSS:

h1 {
    color: hsl(324, 70%, 40%);
}

Fungsi hsl() juga punya fungsi hsla() untuk memberikan nilai alpha atau transparan pada warna HSL.

fungsi hsla

Contoh:

h1 {
    color: hsla(267, 80%, 45%, 0.6);
}

6. Warna Gradasi

Warna gradasi adalah kumpulan dari beberapa warna yang digabungkan dengan membentuk transisi gradasi warna.

Warna gradasi di CSS biasanya dibuat dengan fungsi:

  • linear-gradient() untuk gradasi linear;
  • radial-gradient() untuk gradasi lingkaran;
  • conic-gradient() untuk gradasi memutar;

Tiap-tiap fungsi punya parameter yang hampir sama. Bedanya pada parameter awal saja.

Fungsi linear-gradient() akan menggunakan parameter arah di awalnya, lalu diikuti dengan warna-warna yang akan dicampurkan. Parameter arah pada linear-gradient() bisa berbentuk nama arah seperti left, right, top, bottom, dan juga derajat seperti 90deg.

fungsi linear gradient

Fungsi radial-gradient(), parameter awalnya berupa ukuran lingkaran dan fungsi conic-gradient() parameter awalnya berupa derajat lingkaran.

Nah, untuk membuat warna gradasi dengan mudah.. kita bisa memanfaatkan website cssgradient.io.

web generator gradient

Setelah itu, kita akan dapat kode CSS untuk Gradasinya. Tinggal di-copas dan dipakai aja.

Contoh:

h1 {
  background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

O ya, properti color saat ini belum mendukung untuk menggunakan warna gradasi. Tapi kita bisa pakai properti background seperti di atas untuk menggunakan warna gradasi pada teks.

Maka hasilnya:

contoh warna gradasi teks

Mungkin penggunaan gradasi pada properti color nanti akan didukung pada CSS 4 😏.

Tips: Menggunakan Warna

Berikut ini beberapa tips yang ingin saya bagikan dalam menggunakan warna di CSS.

Tips #1: Tak perlu dihapal

Kamu tak perlu menghapal semua nama-nama warna. Saya juga gak menghapalnya.

Kalau lupa tinggal googling aja nama-nama warna di CSS.

googling warna

Tips #2: Gunakan Inspect Elemen

Jika kamu bingun menentukan warna, coba gunakan inspect element. Di sana ada color picker yang bisa kamu gunakan untuk menentukan warna.

color picker di inspect element

Inspect element adalah tempat terbaik untuk bereksperimen warna dan kode CSS lainnya.

Tips #3: Konsisten untuk Nilai Warna

Dalam memberikan nilai warna, ada bainya kamu konsisten menggunakan salah satu metode di atas.

Misalnya CSS-mu cuma menggunakan kode heksademial aja, maka tetap konsisten seluruhnya menggunakan metode ini.

Tujuannya agar tidak campur aduk dan kode CSS-mu jadi lebih rapi.

Apa Selanjutnya?

Oke, kita sudah belajar tentang properti color di CSS serta gimana cara memberikan nilai yang valid pada properti ini.

Nilai-nilai color yang kita bahas di tutorial ini, juga berlaku untuk beberapa properti seperti border-color, background-color, dan sebagainya.

Ini nanti akan kita bahas di tutorial berikutnya.

Selanjutnya silahkan pelajari tentang properti background di CSS.

Jika kamu masih bingung, coba tanyakan di kolom komentar.

Selamat belajar. πŸ™Œ

Baca Juga ini

Cara Menggunakan Font-awesome untuk Membuat Ikon pada Web

Cara Menggunakan Font-awesome untuk Membuat Ikon pada Web

Dulu… saya sempat berpikir: Pembuatan web sepertinya susah, karena banyak komponen yang harus dibuat. Seperti background dan ikon. Bagi seorang desainer, mungkin tidak masalah membuat banyak gambar background dan ikon. Tapi, bagi programmer atau developer…ini sangat merepotkan. Untunglah ada Font-awesome, yang merupakan framework CSS untuk membuat ikon. Font-awesome memiliki ratusan ikon yang bisa kita gunakan. Pada tulisan ini, kita akan belajar cara membuat ikon menggunakan Font-awesome. Dimulai dari tahap instalasi sampai ke pembuatan animasi.

Cara Cepat Modifikasi Navbar Bootstrap

Cara Cepat Modifikasi Navbar Bootstrap

Ada dua jenis warna pilihan navbar yang ditawarkan Bootstrap: Warna putih (navbar-default) dan warna hitam (navbar-inverse). Selain dari dua warna tersebut, kita harus memodifikasinya sendiri. Pada kesempatan ini, saya akan berbagi cara cepat memodifikasi navbar Bootstrap dengan cepat. 1. Menggunakan GeneratorAda sebuah generator canggih yang dibuat oleh Samuel Marchal . Kita dapat menentukan warna navbar bootstrap sesui selera. Kemudian akan diberikan kode CSS, LESS, SCSS, dan SASS yang dapat kita gunakan langsung.

Apakah Fungsi `!important` pada CSS dan Kapan Harus Menggunakannya?

Apakah Fungsi `!important` pada CSS dan Kapan Harus Menggunakannya?

Memahami fungsi !important pada CSS dan kapan waktu yang tepat menggunakannya?

Membuat Template Wordpress #2: Fungsi-fungsi Dasar Wordpress di Homepage

Membuat Template Wordpress #2: Fungsi-fungsi Dasar Wordpress di Homepage

Pada tutorial sebelumnya kita telah membuat konstruksi awal dari template. Ada dua file yang telah kita dibuat, index.php dan style.css. Sekarang kita fokus pada file index.php. Isinya adalah sebuah HTML percobaan (hello world). Tentu ini bukan tujuan akhir yang kita inginkan, Karena itu, kita akan menggantinya. Mari kita mulai… Modifikasi File index.phpFile index.php merupakan file utama template. File ini yang bertanggung jawab menampilkan halaman utama. Silahkan ganti semua isi file index.

Belajar Membuat Template Wordpress Sendiri dari Nol

Belajar Membuat Template Wordpress Sendiri dari Nol

Di luar sana, ada banyak sekali bertebaran tema atau template Wordpress gratis. Namun, kita perlu hati-hati dalam menggunakan template gratis tersebut. Beberapa hari yang lalu, saya sudah mengecek website wordpress teman saya. Katanya ia memesan web sekaligus temanya dari seorang developer. Begitu saya cek… Eh, ternyata di sana ada script backdoor yang memungkinkan si developer masuk kapan saja ke web dia. Script ini ditanam pada kode tema atau template.

7 Manfaat Inspect Element Bagi Web Developer

7 Manfaat Inspect Element Bagi Web Developer

Inspect Element merupakan fitur browser yang dibuat untuk memudahkan pengembangan web. Inspect Element dapat kita akses dengan klik kanan, kemudian memilih Inspect Element, atau bisa juga dengan menekan tombol F12. Adapun manfaat dari Inspect Element untuk web Developer adalah sebagai berikut. 1. Tempat Eksperimen CSSSelain ada console Javascript, bisa dibilang di Inspect Elemen juga ada console-nya CSS. Ya, di sana kita bisa eksperimen kode CSS. Sebelum kita menulis kode CSS, sebaiknya gunakan Inspect Element terlebih dahulu.

Daftar isi tutorial

  1. Tutorial CSS #01: Pengenalan Dasar CSS untuk Pemula
  2. Tutorial CSS #02: Cara Menulis CSS di HTML
  3. Tutorial CSS #03: Sintaks Dasar CSS yang Harus Kamu Pahami
  4. Tutorial CSS #04: Memahami Selector di CSS
  5. Tutorial CSS #05: Menggunakan Warna di CSS
  6. Tutorial CSS #06: Menggunakan Background di CSS
  7. Tutorial CSS #07: Text Formatting di CSS
  8. Tutorial CSS #08: Menggunakan Font di CSS
  9. Tutorial CSS #09: Menggunakan Garis di CSS (Border) (Coming soon)
  10. Tutorial CSS #10: Menentukan ukuran elemen (Coming soon)
  11. Tutorial CSS #11: Box Model di CSS (Coming soon)
  12. Tutorial CSS #12: Position (Coming soon)
  13. Tutorial CSS #13: Menggunakan Float (Coming soon)
  14. Tutorial CSS3 #xx: Cara Menggunakan Bayangan (Shadow)
  15. 🚧 Work in Progress 🚧

    Maaf jika ada link yang belum aktif. Link tersebut masih dalam draft atau sedang dikerjakan. Do'akan agar penulis tetap sehat dan tulisannya cepat terbit πŸ™. Kamu juga bisa memberikan dukungan dengan mentrakteer kopi β˜• supaya penulis kuat begadang, hehe.