Cara Membuat Blurring Teks dengan CSS3

Hai, ketemu lagi dengan saya, kali ini saya akan membuat tutorial mengenai Cara Membuat Blurring Teks Dengan CSS3, caranya sangat simple, silahkan ikuti langkah-langkahnya berikut.

Langsung saja, silahkan kalian ketikan kode HTML berikut.

<p class="text-blur">"Lorem ipsum dolor sit amet "</p>

<button id="toggle">Toggle Blur</button>

Untuk paragrafnya silahkan kalian bisa isikan sendiri, bisa lebih dari satu paragraf, kemudian kita akan buat efek blur nya dengan CSS3 berikut.

p {
	width: 600px;
	max-width: 80%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2vw;
	transition: all 500ms ease-out;
}

.text-blur  {
	text-shadow: 0 0 8px #000;
	color: transparent;
}

#toggle {
	padding: 15px;
	border: 1px solid #000;
	border-radius: 5px;
	background-color: #fff;
	text-transform: uppercase;
	transition: all 500ms ease;
	cursor: pointer;
	&:focus {
		outline: 0;
	}
	&:hover {
		background-color: #000;
		color: #fff;
	}
}

Setelah itu, kita akan buat fungsi blur nya aktif atau tidak, dengan kode Javascript berikut.

$('#toggle').on('click', function() {
	$('p').toggleClass('text-blur');
});

Kalo sudah semua, simpan terlebih dahulu, kemudian coba jalankan dibrowser masing-masing, dan lihat hasilnya. Selesai.

Baik, selesai sudah tutorial mengenai Cara Membuat Blurring Teks Dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba 🙂