CSS fungsi Property Outline serta Valuenya

outline adalah salah satu property css, outline memiliki fungsi untuk memberi garis/batas bagian luar pada suatu bidang/box/tag html(hampir mirip border)

Jangan pernah menyesal setelah Anda mengungkapkan suatu perasaan. Karena jika demikian, Anda sama saja menyesali kebenaran. Benjamin Disraeli

outline adalah salah satu property css, outline memiliki fungsi untuk memberi garis/batas bagian luar pada suatu bidang/box/tag html(hampir mirip border)

Last Modif at July 10th, 2011

outline adalah salah satu property css, outline memiliki fungsi untuk memberi garis/batas bagian luar pada suatu bidang/box/tag html.

garis atau batas ini bisa kita tentukan bentuk/tampilanya, seperti warna, ketebalan, serta style/gaya.

property outline antara lain

  • outline-color
  • outline-style
  • outline-width
  • outline(shorthand)

value outline-style

antara lain

  • solid
  • double
  • dotted
  • dashed
  • groove
  • ridge
  • inset
  • outset

value outline-color

antara lain

  • hex color
  • red, blue, pink, silver, dan lain lain
  • rgb color

value outline-width

  • angka(panjang/length) dalam px misal (1px, 2px, 3px, 4px dst)
  • medium

contoh outline dalam inline style

outline-color, outline-style, outline-width

contoh code1

<div style="background-color:blue;width:300px;outline-style:solid;outline-color:red;outline-width:5px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

tampilan

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

contoh code2

<div style="background-color:blue;width:300px;outline-style:double;outline-color:pink;outline-width:3px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

tampilan

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

contoh code3

<div style="background-color:blue;width:300px;outline-style:dotted;outline-color:#00ff00;outline-width:7px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

tampilan

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

keterangan

  • penulisan style outline sperti diatas sangat tidak saya sarankan
  • yah, karena kita harus menulis propertynya satu-persatu
  • dibawah kita akan membahas versi shorthand(singkatnya)

shorthand outline

penulisan outline dengan teknik shorthand ini sangat dianjurkan, selain efisian kita juga ngga perlu nulis sylenya panjang-panjang

penulisan property outline shorthand(singkat)

seperti ini

  • outline:value-outline-color(spasi)value-outline-style(spasi)value-outline-width;

dengan teknik ini, kita sudah tidak mengenal property outline-style, outline-width, outline-color

outline

outline:value; fungsinya untuk membuat sekeliling bidang/tag/box memiliki style garis pinggir, sedangkan value masing-masing sisi akan bernilai sama!

contoh kode ini1

<div style="background-color:blue;width:300px;height:300px;outline-style:solid;outline-color:red;outline-width:5px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

jika dibuat dengan teknik shorthand akan menjadi seperti ini

<div style="background-color:blue;width:300px;height:300px;outline:red solid 5px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

sedangkan tampilanya akan sama seperti ini

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

contoh kode ini2

<div style="background-color:blue;width:300px;height:300px;outline-style:dottet;outline-color:lime;outline-width:12px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

jika dibuat dengan teknik shorthand akan menjadi seperti ini

<div style="background-color:blue;width:300px;height:300px;outline:lime dotted 12px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

sedangkan tampilanya akan sama seperti ini

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

contoh kode ini3

<div style="background-color:blue;width:300px;height:300px;outline-style:dashed;outline-color:silver;outline-width:16px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

jika dibuat dengan teknik shorthand akan menjadi seperti ini

<div style="background-color:blue;width:300px;height:300px;outline:silver dashed 16px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

sedangkan tampilanya akan sama seperti ini

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

contoh outline dalam internal style kompleks

perhatikan code dibawah

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>outline css</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
#misaloutline1{
outline-style:solid;
outline-color:blue;
outline-width:5px;
}
#misaloutline2{
outline-style:double;
}
#misaloutline3{
outline:green ridge 3px;
}
#misaloutline4{
outline:green inset 5px;
}
#misaloutline5{
outline:lime outset medium;
}
#misaloutline6{
outline:pink groove 8px;
}
#misaloutline7{
outline:silver dashed 12px;
}
#misaloutline8{
outline:gray dotted 16px;
}
#misaloutline9{
outline:gray inset 16px;
}
.anggapsebagaikotak{
background-color:red;
height:150px;
width:150px;
margin:20px;
padding:5px;
float:left;
}
/*salam www.indaam.net*/
</head>
</style>
<body>
<div class="anggapsebagaikotak" id="misaloutline1">
isi/content isi/content isi/content isi/content1
</div><!-- www.indaam.net -->
<div class="anggapsebagaikotak" id="misaloutline2">
isi/content isi/content isi/content isi/content2
</div><!-- www.indaam.net -->
<div class="anggapsebagaikotak" id="misaloutline3">
isi/content isi/content isi/content isi/content3
</div><!-- www.indaam.net -->
<div class="anggapsebagaikotak" id="misaloutline4">
isi/content isi/content isi/content isi/content4
</div><!-- www.indaam.net -->
<div class="anggapsebagaikotak" id="misaloutline5">
isi/content isi/content isi/content isi/content5
</div><!-- www.indaam.net -->
<div class="anggapsebagaikotak" id="misaloutline6">
isi/content isi/content isi/content isi/content6
</div><!-- www.indaam.net -->
<div class="anggapsebagaikotak" id="misaloutline7">
isi/content isi/content isi/content isi/content7
</div><!-- www.indaam.net -->
<div class="anggapsebagaikotak" id="misaloutline8">
isi/content isi/content isi/content isi/content8
</div><!-- www.indaam.net -->
<div class="anggapsebagaikotak" id="misaloutline9">
isi/content isi/content isi/content isi/content8
</div><!-- www.indaam.net -->
<!--// salam
www.indaam.net //-->
<div style="clear:both;"></div>
<br/><br/><br/>
<p>salam <a href="http://www.indaam.net" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>

untuk melihat hasilnya

  • copy markup style diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama contohoutlinecss.htm
  • jalankan(double click), atau
  • open with (firefox, ie, opera, safari, chrome)
  • silakan edit valuenya
  • letak valuenya antara : (titik dua) dan ;(titik koma)
  • selamat belajar

note* secara spesifikasi property outline ini hampir mirip dengan border, hanya saya outline tidak memiliki outline individu(outline-top, outline-right, outline-bottom, outline-left). outline juga tidak berpegaruh terhadap width, misal sobat membuat style dengan width 300px lalu menambahkan outline-width 20px, maka style awal tadi tetap memiliki width sebesar 300px. lain halnya jika menambahkan border-width 20px, maka style tadi akan memiliki width(lebar) 340px

semoga bermafaat

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-