CSS Chapter 2 - Color and Background

Hallo, apa kabar semua ?? Nah, pada kesempatan kali ini saya akan memosting tentang syntax warna dan background pada CSS. Berikut materinya


1. CSS Warna

Warna dalam CSS yang paling sering ditentukan adalah :

• Nama warna yang valid. Warna yang diatur dengan menggunakan nama warna:

      Contoh script :

       Hasilnya :

• nilai RGB (Red, green, blue) , seperti "rgb (255.0.0)"

RGB nilai warna yang dapat ditentukan menggunakan rumus ini : rgb (red, green, blue). Setiap paramenter (red. gren, blue) mendefinisikan intensitas warna antara 0-255. Misalnya, rgb (255,0,0) maka akan menampilkan warna merah, karena merah yang telah diatur sebagai nilai yang tertinggi dan yang lainnya 0.
Contoh :

Hasilnya :

• nilai hex, seperti "#ff0000"

Warna hexadesimal, nilai rgb juga dapat ditentukan dengan menggunakan hexadesimal nilai warna dalam bentuk: #RRGGBB, dimana RR menampilkan merah, GG menampilakn hijau dan BB untuk menampilkan biru adalah nilai hexadesimalantara 00 dan ff (sama seperti 0-255). MIsal untuk menampilkan warna merah dengan : #ff0000 nilai tertinggi diatur untuk merah yang lainny arendah dengan 00.
Contoh :

 Hasilnya :

2. CSS Background

Sifat latar belakang CSS digunakan untuk menemtukan efek latar belakang untuk element.

Latar belakang properti CSS:

• background-color, properti yang digunakan untuk menentukan warna latar belakang ari elemen. Pada css warna yang paling sering digunakan : Nama warna yang valid, rgb dan nilai hexadesimal. Contoh :

       Hasilnya :

• background-image, properti yang digunakan untuk menampilakan latar belakang menggunakan gambar. Secara default gambar diulang sehingga mencakup seluruh elemen. Contoh :

 

       Hasilnya :

• background-repeat, jika gambar yang diatas harus diulang secara horizontal maka menggunakan properti background-repeat : repeat -x; dan apabila mnegulang gambar secara vertikal maka menggunakan syntax background-repeat : repeat -y; Contoh horizontal
• background-attachment, untuk menentukan gambar latar belakang agar tetap (tidak akan gulir dengan sisa halaman, menggunakan properti background-attachment. Contoh :
• 
  

 

          Hasilnya :

• background-position, untuk merubah posisi pada gambar maka menggunakan properti background-position.

Referensi

http://www.w3schools.com/css/css_background.asp

http://www.w3schools.com/css/css_colors.asp