Mengenal Property Isolation pada CSS3

Hallo teman-teman, Bertemu kembali dengan saya di website ini. Semoga hari ini teman-teman masih diberikan kesehatan dan selalu bahagia sehingga dapat kembali mencari informasi atau upgrade skill seputar dunia website.

Mengenal Property Isolation pada CSS3

Pada Kesempatan kali ini saya akan membahas seputar property pada CSS3 dan kebetulan pembahasan kali ini tentang Mengenal Property Isolation pada CSS3. Penjelasan singkat tentang property isolation ini adalah isolation yang artinya isolasi atau mengisolasi yang bertujuan untuk mendefinisikan, atau sebagai pemisah sebuah element. Jadi Properti CSS isolasi ini mendefinisikan apakah sebuah elemen akan berubah atau tidak. Hal ini dapat berguna jika suatu unsur mewarisi pencampuran dari property blending-mode, tetapi Anda tidak ingin bahwa blending-mode diterapkan ke elemen tsb.

Mengenal Property Isolation pada CSS3

Untuk lebih jelasnya mari kita mulai memperaktekannya, oke langsung saja pertama-tama jalankan/run text editor yang teman-teman gunakan, kemudian ketikan script HTML dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Property Isolation</title>
</head>
<body>
	<div class="bg">
		<div>
			<h1>Tanpa Isolation</h1>
		</div>
		<div class="iso">
			<h1>Menggunakan Isolation</h1>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Property Isolation</title>

</head>

<body>

<div>

<h1>Tanpa Isolation</h1>

</div>

<h1>Menggunakan Isolation</h1>

</div>

</body>

</html>

Jika sudah dengan HTMLnya, langkah selanjutnya teman-teman tambahkan style CSS seperti dibawah ini :

<style type="text/css">
		*{padding:0; margin:0;}
		.bg{
			width:600px;
			height:400px;
			margin:auto;
			background:blue;
		}
		h1 {
			width: 200px;
			padding: 10px;
			margin: 10px;
			float: left;
			background-color: red;
			color: white;
			mix-blend-mode: darken;
		}
		.iso {
			isolation:isolate;
		}
</style>

*{padding:0; margin:0;}

.bg{

width:600px;

height:400px;

margin:auto;

background:blue;

}

h1 {

width: 200px;

padding: 10px;

margin: 10px;

float: left;

background-color: red;

color: white;

mix-blend-mode: darken;

}

.iso {

isolation:isolate;

}

</style>

Mengenal Property Isolation pada CSS3

Jika sudah HTML dan CSSnya, langkah selanjutnya silahkan coba teman-teman jalankan/run dibrowser yang teman-teman gunakan, jika benar maka hasilnya akan sama seperti pada gambar dibawah ini :

Gambar diatas adalah sebuah contoh dimana yang menggunakan property isolation tidak terkena effect blend-mode. Jadi seperti itulah kurang lebihnya contoh dari Property Isolation pada CSS3.

Oke cukup sekian pembahasan kali ini tentang Mengenal Property Isolation pada CSS3. Semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

Facebook DUMET School

Categories