Beri warna pada header html

Itulah kira-kira cara mengganti warna background header, body, dan footer pada blog. Semoga dapat bermanfaat bagi sobat sekalian. Terima kasih

Menciak

Silakan masukkan email Anda untuk menerima artikel baru dari Blog Anak Males secara gratis

Pada tutorial kali ini kita akan belajar tentang properti

header {
    color: teal;
}

Mari kita mulai

Mengetahui Sifat Warna

Properti

header {
    color: teal;
}

Contoh penggunaan

h1 {
	color: orange;
}

Itu berarti

Tetapkan warna

header {
    color: teal;
}

header {
    color: teal;
}

Jadi hasilnya

header {
    color: teal;
}

header {
    color: teal;
}

Mari pelajari cara menetapkan nilai warna sebenarnya

Nilai Valid untuk Warna

Nilai warna pada properti `color dapat diberikan dengan berbagai cara

Salah satunya dengan menuliskan nama warna dalam bahasa Inggris

Misalnya warna teks untuk paragraf tersebut adalah merah, maka kita dapat memberikan

header {
    color: teal;
}

Selain menggunakan nama warna, ada juga cara valid lainnya seperti fungsi

header {
    color: teal;
}

Mari kita bicarakan semuanya…

1. Nama warna

Nama warna merupakan metode yang sering digunakan, karena lebih mudah diingat

Misal saya suka warna hijau (teal), jadi nanti di CSS kita bisa langsung tulis

header {
    color: teal;
}

Contoh

header {
    color: teal;
}

Nama-nama warna ini sudah ada secara default, jadi kita gunakan saja dengan menuliskan nama-nama warnanya

Pastikan Anda menulis nama warna dalam bahasa Inggris. kalau pake bahasa indonesia gak bisa

Ini adalah beberapa nama warna dalam CSS. Jika Anda ingin melihat daftar lengkap nama warna di CSS, Anda dapat mengunjungi. W3C. org (Kata Kunci Warna)

2. Kode heksadesimal

Kode heksadesimal adalah kode yang menggunakan bilangan heksadesimal, memiliki nilai dari

header {
    color: teal;
}

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

Kode heksadesimal dimulai dengan tanda pagar (

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

Contoh

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

Setiap angka dalam kode heksadesimal menentukan nilai warna dalam RGB (

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

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

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

hijau (hijau), dan biru (biru)

Nilai yang diberikan pada parameter dimulai dari angka

header {
    color: teal;
}

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

Semakin besar nilai yang diberikan, semakin kuat nilai warnanya

Contoh penggunaan fungsi RGB

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

Pada contoh di atas, nilai parameter kedua (hijau) diberikan secara maksimal, kemudian hasilnya warna hijau akan menjadi warna dominan.

Penulisan nama warna dengan kode heksadesimal dimaksudkan untuk membuat warna baru yang belum ada dalam daftar nama warna

Selain menggunakan heksadesimal, ada juga cara lain seperti menggunakan fungsi

header {
    color: teal;
}

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

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

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

4. Fungsi header { color: teal; }7 dan #0011ff (6 digit) #01f (3 digit)7

Fungsi

header {
    color: teal;
}

RGB adalah singkatan dari Merah, Hijau, Biru

Contoh penggunaan fungsi

header {
    color: teal;
}

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

Pada contoh ini, warna yang akan dihasilkan adalah warna biru, karena kita memberi nilai

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

Nilai parameter ini diberikan dari rentang angka

header {
    color: teal;
}

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

Semakin besar angkanya, semakin besar kandungan komposisi warnanya

Contoh

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

Dalam contoh ini, kami menetapkan warna

• hijau =

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

  5
• merah =

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

  _8
• biru =

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

  5

Jadi hasilnya

Hasilnya akan seperti warna 'pink', karena warna merah, hijau, dan biru digabungkan dengan nilai yang berbeda

Selain menggunakan fungsi

header {
    color: teal;
}

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

Fungsi ini sama dengan fungsi RGB, namun ada tambahan parameter alpha di belakangnya

Nilai alfa dapat diberikan dari

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

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

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

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

Semakin mendekati angka satu maka warnanya akan semakin cerah dan semakin mendekati angka nol maka warnanya akan semakin bening

Contoh penggunaan fungsi RGBA

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

Pada contoh di atas, nilai alpha yang diberikan adalah

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

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

5. Fungsi #0011ff (6 digit) #01f (3 digit)_8 dan #0011ff (6 digit) #01f (3 digit)9

Fungsi

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

Nilai hue yang diberikan pada fungsi ini dimulai dari

header {
    color: teal;
}

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

Untuk nilai saturasi dan kecerahan, gunakan persen, dari

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

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

Contoh penggunaan fungsi HSL di CSS

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

Fungsi

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

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

Contoh

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

6. Gradasi Warna

Gradasi warna adalah kumpulan beberapa warna yang digabungkan untuk membentuk transisi gradasi warna

Warna gradien dalam CSS biasanya dibuat dengan fungsi

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

  _7 untuk gradasi linier;

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

  _8 untuk gradasi spiral;

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

  _9 untuk gradasi bengkok;

Setiap fungsi memiliki parameter yang hampir sama. Perbedaannya hanya pada parameter awal

Fungsi

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

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

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

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

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

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

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

Fungsi

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

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

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

Setelah itu, kita akan mendapatkan kode CSS untuk Gradasi. Potong saja dan gunakan

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

header {
    color: teal;
}

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

Jadi hasilnya

Mungkin penggunaan gradasi pada properti

header {
    color: teal;
}

Kiat. Menggunakan Warna

Berikut beberapa tips yang ingin saya bagikan dalam menggunakan warna pada CSS

Kiat #1. Tidak perlu menghafal

Anda tidak perlu menghafal semua nama warna. Aku juga tidak menghafalnya

Jika Anda lupa, google saja nama warna di CSS

Kiat #2. Gunakan Periksa Elemen

Jika bingung menentukan warnanya, coba gunakan elemen inspect. Ada color picker yang bisa Anda gunakan untuk menentukan warna

Inspeksi elemen adalah tempat terbaik untuk bereksperimen dengan warna dan kode CSS lainnya

Kiat #3. Konsistensi untuk Nilai Warna

Dalam menetapkan nilai warna, penting agar Anda secara konsisten menggunakan salah satu metode di atas

Misalnya, CSS Anda hanya menggunakan kode heksadesimal, sehingga tetap konsisten selama menggunakan metode ini

Tujuannya agar tidak tercampur dan kode CSS Anda lebih rapi

Apa berikutnya?

Oke, kita sudah mempelajari tentang properti

header {
    color: teal;
}

Nilai warna yang kita bahas dalam tutorial ini, juga berlaku untuk beberapa properti seperti

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

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

Apa tag HTML untuk mengubah warna latar belakang?

Bagaimana cara menentukan latar belakang atau mengisi warna?

Bagaimana cara mengubah warna latar belakang suatu bagian di situs web?