Cara Membuat Masking Teks Dengan CSS

by | Dec 27, 2018 | CSS, HTML, Tips dan Trik | 0 comments

Hallo sahabat Dumet, bagaimana kabarnya baik-baik dan tetap semangat belajar kan. Bertemu lagi dengan saya Edi yang akan membahas tentang cara membuat masking teks dengan css ,disini saya akan menggunakan cara yang berbeda dengan pembahasan artikel sebelumnya dan sahabat bisa lihat disini.

Langkah 1 : Membuat Masking Teks dengan CSS

Sebelumnya menyiapkan gambar kesukaan sahabat terlebih dahulu yang akan digunakan, dan saya akan menggunakan gambar seperti dibawah ini:

background masking

Langkah 2 : Membuat Masking Teks dengan CSS

JIka gambar sudah tersedia sekarang kita persiapakan file html-nya ,dan ketikan sintax html seperti berikut ini:

<!DOCTYPE html>
<html>
<head>
	<title>Membuat Masking Teks Dengan CSS</title>
</head>
<body>
	<h1>Teks Bertopeng</h1>
</body>
</html>

Langkah 3 : Membuat Masking Teks dengan CSS

Setelah selesai membuat file html ,jangan lupa menabahkan file css dan silahkan ikuti sintax dibawah ini:

h1{
			color :#000;
			text-align: center;
			font-size: 150px;
			font-weight: bold;
			font-family: sans-serif;
			text-transform: uppercase;
			margin: 200px auto;
			background-image: url(bg2.jpg);
		}

background-repeat

Gambar diatas hasil yang sudah dibuat, nah langkah berikutnya bagaimana cara agar gambar yang ditampilkan tidak berulang-ulang. Saya akan menambahkan beberapa CSS tentang background jangan lupa ketikan property background pada selector h1, berikut perintahnya:

background-repeat:no-repeat;
background-size: cover;
background-clip: text;

Selanjutnya saya akan menambahkan sintax yang berfungsi untuk membuat masking teks terhadap background

-webkit-background-clip: text;

Nah sepertinya hampir selesai jangan sampai ketinggalan untuk merubah value color : #000 menjadi color : transparent kenapa harus transparan value yang digunakan? karena teks akan memiliki background gambar yang sudah kita pakai, Jika sudah diketikan CSS-nya kemudian sahabat save kedua filenya dan jalankan pada browser masing-masing.Maka hasil akhirnya seperti gambar berit ini:

membuat-masking-teks

Baiklah cukup sekian pembahasan dan tutorial sederhana mengenai bagaimana cara Membuat Masking Teks dengan CSS. Semoga tutorial ini bisa bermanfaat, sampai jumpa ditutorial selanjutnya.