Sunday, December 21, 2014

Tutorial CSS Part 11: Membuat dan Mengatur Style Outline

Outline adalah sebuah garis tepi diluar border. Outline terpisah dari elemen, hal ini berbeda dengan border yang measih merupakan bagian dari sebuah elemen. Garis outline dibentuk melingkari elemen dan membuat elemen berada didalam area outline.


Pada CSS disediakan beberapa properti untuk mengatur style outline diantaranya outline-style, outline-color dan outline-width. Penggunaan properti ini mirip dengan penggunaan CSS pada border.

Berikut ini beberapa properti CSS untuk outline dan penjelasannya :

1.outline-style

Adalah properti CSS yang digunakan untuk mengatur style outline. Ini merupakan properti utama dan merupakan syarat agar properti yang lain dapat bekerja.

Ada beberapa nilai yang bisa diset untuk outline-style, yaitu :
Nilai Keterangan
none tanpa outline
hidden garis outline tersembunyi
dotted garis outline titik-titik ..
dashed garis outline strip-strip --
solid outline garis penuh
double outline dengan dua garis penuh
groove garis outline efek alur 3D
ridge garis outline dengan efek bukit / bubungan *
inset garis outline dengan efek menjorok ke dalam *
outset garis outline dengan efek menjorok ke luar *
Note :
* efek groove, risge, inset dan outset bergantung pada penggunaan warna pada properti outline-color.

Contoh penggunaan CSS outline-style :
div {
    outline-style: dotted;
}
Kita bisa berlatih CSS ouline-style disini >>

2. outline-width

Adalah properti CSS yang digunakan untuk mengatur lebar outline. Nilai properti width dinyatakan dalam px (pixel atau bisa juga dengan tiga preset outline thin, medium, dan thick. Seperti yang telah dijelaskan tadi, bahwa untuk menggunakan css border-width harus setelah border-style.

Contoh penggunaan CSS outline-width :
div {
    outline-style: dotted;
    outline-width: 1px;
}
Kita bisa berlatih CSS outline-width disini >>

3. outline-color

Adalah properti CSS yang digunakan untuk mengatur warna outline. Seperti outline-width, sebelum menggunakan properti outline-color harus diset dulu properti outline-style.

Ada tiga cara dalam menentukan nilai warna, yaitu :
  • menggunakan nama warna seperti red, blue, green dan sebagainya
  • menggunakan kode heksa warna seperti #ff0000 untuk warna merah dan #0000ff untuk warna biru, dan seterusnya.
  • menggunakan nilai RGB seperti rgb(255,0,0) untuk warna merah, rgb(0,0,255) untuk warna biru dan seterusnya.
Contoh penggunaan CSS outline-color :
div {
    outline-style: dotted;
    outline-color: #f9c566;
}
Kita bisa berlatih CSS outline-color disini >>

6. outline 

Adalah properti yang merupakan penggabungan dari masing-masing properti diatas. Ini merupakan cara singkat untuk menulis CSS outline.

Contoh penggunaan CSS outline :
div {
   outline: 2px dotted #f9c566;
}
Kita bisa berlatih CSS outline disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

0 komentar

Post a Comment