CSSMateri CourseNusantech Academy

Modul 3-4. CSS Color & Background

By 13 Mei 2020 Juni 3rd, 2020 No Comments

Halo teman-teman, jumpa lagi dengan course HTML & CSS Nusantech Academy.

Sebelumnya kita sudah bahas mengenai dasar-dasar Selector CSS. Dan kali ini, kita akan bahas tentang Color & Background.

Color & Background

Color merupakan Property yang digunakan untuk mengubah warna sebuah Text HTML. Color dapat menerima berbagai jenis nilai/kode warna seperti berikut:

  • Menggunakan nama warna

Cara yang paling simple dalam memberikan nilai Color yakni dengan menggunakan nama warna. Ada banyak nama warna yang sudah terdefinisi dalam bahasa Inggris sebagai warna bawaan browser.

Contoh:

p {
    color: red;
}

Kode diatas menghasilkan warna merah

  • Menggunakan nilai Hexadecimal

Hexadecimal merupakan sistem bilangan basis 16. Diantaranya 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, dan F. Abjad A bernilai 10, B bernilai 11, dan seterusnya.

Dalam Property Color, Hexadecimal digunakan untuk memberi nilai warna #RRGGBB atau #rrggbb. Dengan ketentuan RR = red/merah, GG = green/hijau, dan BB = blue/biru.

Contoh:

p {
    color: #FF0000;
}

Kode Hexadecimal diatas akan menghasilkan warna merah, karena bagian RR/merah memiliki nilai tertinggi, sedangkan GG dan BB bernilai kosong.

  • Menggunakan nilai RGB

Dalam CSS kita juga dapat memberi warna menggunakan fungsi RGB(Red, Green, Blue). Nilai Red, Green, Blue dapat berupa angka 0 sampai 255, atau bisa juga menggunakan prosentase 0% sampai 100%.

Contoh:

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

atau

p {
    color: rgb(100%, 0%, 0%);
}

Keduanya sama-sama memberikan warna merah

  • Menggunakan nilai RGBA

RGBA pada dasarnya sama dengan RGB, namun ditambah dengan Alpha channel atau transparansi elemen. Nilai yang dapat diberikan antara 0 sampai 1, semakin mendekati 0 maka elemen akan semakin transparan.

Contoh:

p {
    color: rgba(255, 0, 0, 0.2);
}
  • Menggunakan nilai HSL

HSL(Hue, Saturation, Lightness)

Hue merupakan nilai warna yang mewakili derajat dalam satu lingkaran penuh. 0 atau 360 mewakili warna merah, 240 warna biru, dan 120 warna hijau.

Saturation bernilai 0% sampai 100%. Semakin rendah nilainya maka warna yang dihasilkan semakin abu-abu.

Lightness/pencahayaan juga menggunakan prosentase. 0% sama dengan hitam dan 100% putih.

Contoh:

p {
        color: hsl(360, 100%, 50%);
}

Warna yang dihasilkan merah.

  • Menggunakan nilai HSLA

Sama dengan HSL, namun juga ditambah dengan Alpha / transparansi.

Contoh:

p {
    color: hsla(360%, 100%, 50%, 0.1);
}
  • Menggunakan Currentcolor

Currentcolor menerima nilai warna yang sama dari warna yang sudah didefinisikan sebelumnya pada satu elemen.

Contoh:

judul-utama {
    color: blue;
    border: 1px solid currentcolor;        
}

Warna yang akan ditampilkan border adalah biru.

Background

Property Background berfungsi menampilkan effect warna/gambar latar belakang pada sebuah elemen. 

  • Background-color

Kalau tadi kita bisa mengubah warna teks menggunakan Property Color, sekarang kita juga bisa mengubah warna latar belakang menggunakan Background-color. nilai yang dipakai oleh background-color juga sama dengan Color, teman-teman bisa memakai nama warna, Hexa, RGB, atau HSL.

Contoh:

body {
    background-color: red
}
  • Background-image

Background-image digunakan untuk menambahkan gambar pada layar belakang.

Format gambar yang bisa ditampilkan beragam seperti PNG, JPEG, GIF dll.

Contoh:

body {
    background-image: url("nusantech.com");
}

Ada beberapa Property pendukung dari Background-image yang memiliki fungsi unik

  • Background-attachment

Property Background-attachment melengkapi background-image. Fungsinya untuk 

Nilai Property:

  • fixed: gambar akan statis ketika halaman discroll 
  • local: gambar akan ikut ter-scroll bersama elemeen
  • scroll: gambar akan ikut ter-scroll ketika halaman discroll

Contoh:

body {
    background-image: url("cat.png");
        background-attachment: fixed;
}
  • Background-repeat

Untuk mengatur apakah gambar latar belakangnya akan berulang atau ridak

Nilai property:

  • repeat : sifat bawaan dari background-image gambar berulang-ulang membentuk mosaik.
  • no-repeat : gambar tidak akan berulang
  • repeat-x : gambar akan berulang  horizontal
  • repeat-y : gambar akan berulang vertikal

Contoh:

body {
    background-image: url("cat.png");
        background-repeat: no-repeat;
}
  • Background-position

Fungsinya menentukan dimana gambar background kita akan diletakkan

Nilai property:

  • top : di atas
  • bottom: di bawah
  • center: di tengah
  • left: di kiri
  • right: di kanan

Contoh:

body {
    background-image: url("cat.png");
        background-position: bottom;
}
  • Background-size

Mengatur ukuran dari gambar background

Nilai Property:

  • auto: Nilai bawaan background-size, ukuran background sama dengan aslinya
  • initial: Nilai propety akan dikembalikan ke default
  • cover: Menutup seluruh badan element, jika gambar tidak pas maka akan terpotong
  • contain: Membuat ukuran gambar seukuran badan elemen
  • inherit: mewarisi ukuran elemen parent.
  • prosentase / pixel: misal  background-size: 100px 100px

Contoh:

body {
    background-size: 100px 100px; /* atau 
    background-size: 100px; 
    background-size: 100% 100%;
    background-size: 100%;
    background-size: contain;
    background-size: initial;
    background-size: cover; 
*/
}

Kombinasi

Property pendukung juga bisa digabungkan menjadi satu property background.

Contoh:

body {
    background: url("cat.png") fixed no-repeat top left;
}

Penutup

Selamat, teman-teman telah mengenal property color dan background. Teman-teman bisa bereksperimen sendiri agar lebih paham dengan materi yang sudah dipelajari.

Di kesempatan selanjutnya kita akan bahas tentang Font & Text dalam CSS. Jadi, ikuti terus course ini ya.

See you next time!

Leave a Reply