HTML & CSS untuk Pemula (Bagian 31): Warna dan Latar Belakang

Tentang sifat color menggambarkan warna depan (warna teks) dari elemen. Penentuan warna dapat dilakukan melalui berbagai cara yang berbeda. Biasanya, nilai-nilai heksadesimal digunakan. Nilai-nilai ini selalu dimulai dengan tanda pagar di depannya. Kemudian, biasanya diikuti oleh tiga pasang angka atau huruf. Ini mewakili warna Merah, Hijau, dan Biru. Oleh karena itu, penentuan warna selalu diatur sesuai skema berikut:

RRGGBB

Penentuan #ffffff menghasilkan warna putih. Jika menggunakan #000000, warna hitam akan ditampilkan. Di editor HTML "wajar", terdapat pemilih warna yang sesuai.

Dengan, Anda dapat menentukan kode heksadesimal. Selain itu, terdapat berbagai situs web (misalnya, http://www.farbtabelle.net/) yang menyediakan daftar warna yang sesuai.

Dalam CSS, ada kemungkinan untuk memendekkan penulisan nilai warna heksadesimal. Namun, prinsip ini sebenarnya tidak bisa diterapkan pada semua nilai warna. Hal ini hanya berlaku jika nilainya terdiri dari tiga pasang yang sama. Contoh umumnya adalah definisi warna untuk Hitam dan Putih. Biasanya, ini ditulis seperti berikut:

.schwarz {
   color: #000000;
}
.weiss {
   color: #ffffff;
}

Penulisan ini juga bisa dipersingkat.

.schwarz {
   color: #000;
}
.weiss {
   color: #fff;
}

Dalam CSS, nilai RGB juga diperbolehkan. Di sini, Anda harus memberikan nilai desimal dari 0 hingga 255, yang dipisahkan dengan koma. Urutan pengaturan warna ini sesuai dengan urutan warna heksadesimal.

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

Seperti yang ditunjukkan dalam contoh, pengaturan persentase juga mungkin, tetapi pada praktiknya jarang ditemukan.

Sebuah variasi lain untuk definisi warna adalah melalui kata kunci warna. Berikut adalah beberapa contoh:

• black

• red

• blue

• yellow

• white

• green

Definisi yang sesuai mungkin seperti berikut:

p { 
 color: white; 
 background: black; 
}

Perhatikan bahwa dengan CSS3, kumpulan kata kunci warna yang tersedia telah diperluas secara signifikan. CSS3 sebenarnya telah mengambil nama-nama warna dari spesifikasi SVG. Anda dapat menemukan daftar nama warna yang tersedia di http://www.w3.org/TR/SVG/types.html#ColorKeywords.

Menentukan Latar Belakang

Pada background merupakan penggabungan dari nilai-nilai berikut yang akan diperkenalkan secara detail dalam tutorial ini selanjutnya:

• background-attachment

• background-color

• background-image

• background-position

• background-repeat

Setiap penjelasan di atas harus dituliskan dengan spasi di antara. Urutan tidaklah penting. Tidak perlu mengindahkan semua nilai.

Sebagai contoh:

p { 
    background: transparent
    url(logo.jpg)
    scroll repeat 0% 0%; 
 }

Warna Latar Belakang

Untuk memberikan warna latar belakang pada sebuah elemen, properti background-color digunakan.

div { 
   background-color: #009999;
}

Anda dapat menentukan warna yang diinginkan sebagai nilainya.

Gambar Latar Belakang

background-image menentukan gambar sebagai latar belakang. Jika properti ini dituliskan dalam file CSS eksternal, path relatif akan merujuk ke direktori tempat file CSS berada.

• none – tidak ada gambar latar belakang

• URI – path menuju gambar

Berikut adalah contoh lainnya.

<div style="background-image:url(hinten.jpg); margin:20px; padding:20px">
    Selamat datang di PSD-Tutorials.de!
</div>

Namun, harap berhati-hati dalam menggunakan gambar latar belakang. Karena gambar latar belakang yang terlalu mencolok tidak akan memudahkan dalam membaca teks.





Tentu saja, ada situs web yang hanya peduli pada tampilannya. Di sini, Anda tentu dapat menggunakan latar belakang yang lebih mencolok.

Latar Belakang Bergulir

Pada elemen yang lebih panjang, gambar latar belakang bergerak saat halaman digulir. Dengan background-attachment, hal ini dapat dicegah.

• fixed – bergerak bersamaan

• scroll – gambar latar belakang tetap diam dan diatur sesuai jendela browser (viewport).

Tentu saja, properti background-attachment biasanya digunakan bersama background-image.

Sebagai contoh:

div.fest {
    background-image: url(background.gif); 
    background-repeat: no-repeat;
 }

Posisi Latar Belakang

Melalui properti background-repeat, ditetapkan di mana posisi latar belakang akan dimulai. Titik acuan adalah elemen tempat grafik didefinisikan.

• Persentase - satu atau dua nilai yang menentukan jarak grafik dari sudut kiri atas elemen. Jika ada dua nilai, yang pertama adalah jarak horizontal, yang kedua adalah jarak vertikal. Titik acuan bukanlah sudut kiri atas grafik, tetapi titik di dalam grafik yang juga ditentukan oleh nilai x/y.

• Panjang - menentukan jarak grafik dari sudut kiri atas grafik ke sudut kiri atas elemen. Diperbolehkan satu atau dua nilai. Jika ada dua nilai, yang pertama menentukan jarak horizontal, yang kedua menentukan jarak vertikal.

Selain itu, masih ada kata kunci berikut yang mungkin:

• left - sejajar horizontal kiri

• center - tengah

• right - sejajar horizontal kanan

• top - sejajar vertikal atas

• bottom - sejajar vertikal bawah

Berikut adalah contoh bagaimana hal itu bisa terlihat:

p { 
   background-position: 8em top; 
}

Gambar Latar Belakang Berulang

Apakah dan bagaimana latar belakang diulang jika lebih kecil dari area yang ditampilkan dapat ditentukan dengan menggunakan background-repeat.

• repeat - gambar latar belakang diulang secara vertikal dan horizontal hingga mengisi elemen.

• repeat-x - gambar diulang hanya secara horizontal.

• repeat-y - gambar diulang hanya secara vertikal.

• no-repeat - gambar tidak diulang.

Berikut contoh untuk hal ini:

body { 
   background-repeat: repeat-y; 
}

Pada kasus ini, gambar diulang hanya secara vertikal.

Jika menggunakan repeat-y, pengulangan dilakukan hanya secara horizontal.





Tutorial ini menunjukkan seberapa kuat CSS dalam hal warna dan gambar.