Dalam belajar css seri 3 ini, saya akan menjelaskan tentang berbagai macam cara mengganti warna dalam css. Warna dalam css didefinisikan menggunakan hexadecimal (hex). notasi untuk kombinasi Merah, Hijau, dan nilai-nilai warna Biru (RGB). Nilai terendah yang dapat diberikan adalah 0 (hex 00). Nilai tertinggi adalah 255 (FF hex). Contoh mengganti warna dengan menambahkan tanda “#” bisa dilakukan dengan pola seperti ini:
1
| I {color: #0000FF) |
Atau mengganti warna CSS dengan nilai kombinasi RGB atau dalam nilai absolut terhadap persen, seperti ini :
1
2
3
| I {color: rgb (0, 0, 255))I {color: rgb (0%, 0%, 100%)) |
Kita dapat mengubah kombinasi warna CSS sesuai dengan gaya yang kita sukai.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <HTML><HEAD><STYLE TYPE="text/css">.blue {color: cyan; background-color: #FF8000}.green {color: lime; background-color: black}</STYLE></HEAD><BODY><P CLASS="blue">Mari kita lanjutkan belajar css<P CLASS="green">Setuju, dengan belajar css, semuanya menjadi mudah</BODY></HTML> |
Ada 16 ribu lebih warna yang berbeda pada kombinasi merah, biru, dan hijau. So, apabila kita mempunyai kreasi seni yang tinggi kita akan dapat membuat kombinasi jutaan warna untuk memperkaya situs kita.
Nah, sekarang kita akan lihat bagaimana css mengimplementasikan warna pada background situs yang kita buat.
1
| body {background-color:#b0c4de;} |
Oh iya, kita langsung lanjut belajar mengimplementasikan background pada css ya! Terdapat macam-macam background property pada css yaitu :
* Background-color, mengatur warna background
* Background-image, mengatur gambar background
* Background-repeat, Mengatur bagaimana gambar pada background akan diulang
* Background-attachment, Mengatur apakah gambarnya akan tetap (fixed) atau tidak
* Background-position, mengatur dai mana posisi awal dari gambar.
Properti background-color CSS untuk menspesifikasikan latar belakang warna pada suatu elemen. Contohnya seperti yang terlihat diatas tadi.
Sedangkan properti background image untuk menspesifikasikan latar belakang gambar pada suatu elemen. Secara default, gambar akan diulang sehingga akan menutupi seluruh elemen halaman web.
body {background-image:url('paper.gif');}[/body]Dibawah ini, contoh dari kombinasi yang salah antara text dan gambar, textnya hampir tidak terlihat:[html]body {background-image:url('bgdesert.jpg');} |
Kode dibawah ini untuk mengatur posisi background :
1
2
3
4
5
6
7
8
9
| body{background-image:url('img_tree.png');background-repeat:no-repeat;} |
Well, belajar mengatur background pada css saya rasa cukup, Pada seri belajar CSS berikutnya kita akan belajar tentang pengaturan font dan text.
0 comments:
Post a Comment