Ticker

6/recent/ticker-posts

Warna dan Background di CSS

July 01, 2017
Pada tutorial kali ini, kamu akan belajar mengaplikasikan warna dan background pada websitemu.

Berikut beberapa properti CSS yang akan dijelaskan:

Color

Background color

Background image

Background repeat

Background attachment

Background position

Background

Properti ' Color'

Properti color menjelaskan mengenai warna bagian depan pada sebuah elemen.

Sebagai contoh bayangkan kita menginginkan semua headline pada dokumen menjadi berwarna merah.
Headline ditandai dengan elemen HTML <h1>

Kode dibawah ini mengatur warna  elemen<h1> menjadi merah.
   h1{
   color:#ff0000;
   }
Penulisan warna dapat menggunakan nilai hexadecimal (#ff0000) atau kamu bisa menggunakan nama-nama warna ("red") atau menggunakan rgb (rgb(255,0,0)).

Properti 'Background-color'

Background color menjelaskan mengenai warna bagian belakang pada sebuah elemen.

Elemen <body> terdiri dari semua konten sebuah dokumen HTML.

Sehingga, untuk menrubah warna background pada halaman , properti background-color harus diaplikasi ke elemen <body>.Kamu juga bisa mengaplikasikan background color ke elemen lain termasuk headlines dan text.

Berikut contoh, perbedaan background color yang diaplikasikan ke <body> dan <h1> elemen.
  body{
  background-color:#ffcc66;
  }
  h1{
  color:#990000;
  background-color:#FC9804;
  }
Catatan : kita mengaplikasikan dua properti pada <h1> dengan membaginya dengan sebuah titik koma

Properti 'Background-image'

Jika pada properti background color, kita memberikan warna, maka pada background image, kita akan memberikan sebuah image/gambar pada bagian belakang elemen.
body{
background-image:url('flower.jpg');
}

h1{
color:#990000;
background-color:#FC9804;
}
Catatan: url ('images/flower.jpg' )
Ini berarti bahwa kita  merujuk gambar pada lokasi  di folder yang sama.Kamu juga dapat merujuk gambar di dalam folder lain dengan menggunakan url(images/'flower.jpg'). Atau internet dengan menyebutkan full address file url('http:/www.howeby.blogspot.com/flower.jpg').

Properti 'Background-repeat'

Setelah mempraktekan properti background-image, apakah kamu memperhatikan bahwa dalam keadaan default, gambar bunga diulang (repeated)  secara vertical maupun horizontal menutupi screen?

Properti background repeat lah yang akan bertugas untuk mengontrol sifat pengulangan gambar ini.

Tabel berikut menunjukkan empat perbedaan value background repeat.
ValueDeskprisi
Background-repeat:repeat-x Gambar diulang secara horizontal
Background-repeat:repeat-y Gambar diulang secara Vertical
Background-repeat:repeatGambar diulang secara vertical maupun horizontal
Background-repeat:no-repeat Gambar tidak diulang
Contoh untuk mencegah perulangan background gambar , lihat lah kode berikut:
body{
Background-color:#FFCC66;
Background-image:url('flower.jpg');
Background-repeat:no-repeat;
}
h1{
color:#990000;
background-color:#FC9804;
}

Lock/Mengunci Background Image

Properti background attachment kusus mengontrol apakah gambar background dibuat tetap pada posisi awal atau mengikuti konten halaman saat di scroll.

Fixed Background image tidak akan bergerak mengikuti text ketika pembaca melakukan scroll halaman, sedangkan unloacked backgorund image akan mengikuti text halaman web saat di scroll.

Berikut perbedaan nilai dari background-attachment.
valueDeskripsi
background-attachment:scrollGambar ikut menscroll mengikuti halaman -unlocked
background-attachment:fixedGambar terkunci locked

Contoh,kode berikut akan membuat gambar background terkunci.
body{
Background-color:#FFCC66;
Background-image:url('flower.jpg');
Background-repeat:no-repeat;
background-attachment:fixed;
}
h1{
color:#990000;
background-color:#FC9804;
}

Mengatur Letak Background Image

Pada keadaan standar, background image terteletak di bagian atas kiri screen.

Properti background position memudahkanmu untuk merubah posisi background image dimanapun yang kamu mau.

Ada banyak cara untuk mengatur nilai background-position. Namun, kesemuanya diatur dalam bentuk koordinat. 

Sebagai contoh, value 100px 200px 
Ini berarti letak gambar background 100 px dari sisi kiri dan 200px dari atas jendela browser.

Coordinate dapat diindikasikan dalam bentuk prosentase jendela browser, fixed unit (pixels, centimeters, etc) atau kamu bisa menggunakan kata top, bottom, center, left dan right.

Berikut beberapa contohnya.

Value Deskripsi
background-position:2cm 2cm  gambar akan diposisikan 2 cm dari kiri dan 2cm dari bawah halaman
background-position:50% 25% gambar akan diposisikan ditengah-tengah dan seperempat bagian dari bawah halaman.
background-position:top rightgambar akan diposisikan atas kanan halaman.

Berikut contoh posisi gambar tertelak di bagian bawah kanan.
body{
Background-color:#FFCC66;
Background-image:url('flower.jpg');
Background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
}
h1{
color:#990000;
background-color:#FC9804;
}

Compiling

Dengan background kamu dapat meringkas beberapa properti sehingga hemat dalam penulisan dan mudah dalam pembacaan.

Sebagai contoh, coba lihat 4 baris kode berikut:
Background-color:#FFCC66;
Background-image:url('flower.jpg');
Background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;

dengan menggunakan background akan menghasilkan hasil yang sama dengan kode berikut

background:#FFCC66 url('flower.jpg') no-repeat fixed right bottom;

Urutan aturan penulisan sebagai berikut

[background-color] | [background-image] |
[background-repeat] |
[background-attachment] |
[background-position]


 Hmm. Selamat, Kamu telah belajar teknik baru yang mungkin jika kamu gunakan HTML maka akan memakan waktu yang cukup lama.





Tags:

Post a Comment

0 Comments