Belajar CSS (12. Outline)

Akhi Syabab

Outline CSS

Outline adalah garis yang ditambahkan disekitar element dan berada di luar border (jika menambahkan border).
Macam-macam properti outline yaitu :
1. outline-style
2. outline-offset
3. outline-color
4. outline-width
5. outline

1. Outline-Style
Diskripsi : properti digunakan untuk mengatur gaya atau style dari outline
Value : none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
Untuk memahami value-value diatas berikut contoh code :

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.none {outline-style: none;}
    p.hidden {outline-style: hidden;}
    p.dotted {outline-style: dotted;}
    p.dashed {outline-style: dashed;}
    p.solid {outline-style: solid;}
    p.double {outline-style: double;}
    p.groove {outline-style: groove;}
    p.ridge {outline-style: ridge;}
    p.inset {outline-style: inset;}
    p.outset {outline-style: outset;}
    </style>
    </head>
  <body>
    <p class="none">Ini adalah contoh menggunakan value none</p>
    <p class="hidden">Ini adalah contoh menggunakan value hidden</p>
    <p class="dotted">Ini adalah contoh menggunakan value dotted</p>
    <p class="dashed">Ini adalah contoh menggunakan value dashed</p>
    <p class="solid">Ini adalah contoh menggunakan value solid</p>
    <p class="double">Ini adalah contoh menggunakan value double</p>
    <p class="groove">Ini adalah contoh menggunakan value groove</p>
    <p class="ridge">Ini adalah contoh menggunakan value ridge</p>  
    <p class="inset">Ini adalah contoh menggunakan value inset</p>
    <p class="outset">Ini adalah contoh menggunakan value outset</p>
  </body>
</html>

hasil

2. Outline-Offset
Diskripsi : properti yang digunakan untuk menambahkan jarak antara garis outline dan border suatu elemen
value : length.
ex.

<!DOCTYPE html>
<html>
<head>
	<title>belajar outline</title>
	<style type="text/css">
		p {
			font-size: 50px;
		}
		div {
			margin: 50px;
			border: 2px solid black;
			outline-style: dashed;
			outline-offset: 15px;
			outline-color: red;
		}
	</style>
</head>
<body>
	<p>belajar outline</p>
	<div>
		kalimat ini kita buat didalam border
		kemudian kita beri garis luar / outline
		jarak antara border dalam dan outline 15px
	</div>
</body>
</html>

hasil

3. Outline-Color
Diskripsi : property yang digunakan untuk memberi warna pada outline.
Value : warna langsung ex. ”red”, hexa ex. “#00ff00”, RGB ex. “rgb(0,0,255)”, invert.
ex. 

<!DOCTYPE html>
<html>
<head>
	<title>belajar outline</title>
	<style type="text/css">
		p {
			font-size: 50px;
		}
		div {
		    border:2px solid yellow;
		    outline-style:solid;
		    outline-color:#000000;
		}
	</style>
</head>
<body>
	<p>belajar outline</p>
	<div>
		belajar outline-color.
	</div>
</body>
</html>

hasil

4. Outline-Width
Diskripsi : property yang digunakan untuk mengatur lebar atau ketebalan garis outline
Value : medium, thin, thick, length (misal px).
ex.

<!DOCTYPE html>
<html>
<head>
	<style>
		p.one {
		    border: 1px solid red;
		    outline-style: solid;
		    outline-width: thin;
		}

		p.two {
		    border: 1px solid red;
		    outline-style: dotted;
		    outline-width: 3px;
		}
	</style>
</head>
<body>
	<p class="one">ini contoh menggunakan outline-width : thin</p>
	<p class="two">ini contoh menggunakan outline-width : 3px (length)</p>
</body>
</html>

hasil

5. Outline
Diskripsi : property yang dugunakan untuk menggabung semua pengaturan outline yang telah kita pelajari diatas dari no 1-4 (kecuali outline-offset) menjadi satu deklarasi.
Value : outline-color, outline-style, outline-width.
ex. 

<!DOCTYPE html>
<html>
<head>
	<style>
		p {
		    border: 1px solid red;
		    outline: green solid 5px ;
		}
	</style>
</head>
<body>

<p>belajar property outline</p>

</body>
</html>

hasil

Demikian postingan kali ini, semoga bermanfaat, sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab