Membuat Efek Clipping Teks dengan HTML dan CSS
Membuat Efek Clipping Teks dengan HTML dan CSS - Clipping teks merupakan suatu efek teks yang menyatu dengan objek gambar seolah - olah teks mengikuti warna pada objek gambar atau bidang objeknya. Jika kalian suka edit gambar diphotoshop terdapat efek yang bisa kita gunakan yaitu clipping mask. Nah, efek clipping teks hampir sama dengan efek clipping mask yang ada pada photoshop. Dengan CSS sebenarnya kita bisa manipulasi teks menjadi efek clipping teks dan caranya sangat mudah sekali, berikut ini akan saya demokan efek clipping teks dan juga tutotrial mengenai cara Membuat Efek Clipping Teks dengan HTML dan CSS.
Langkah 1 : Membuat Efek Clipping Teks dengan HTML dan CSS
Sebelum memulai praktek membuat efek clipping teks, siapkan terlebih dahulu satu buah gambar bebas sebagai objek yang nantinya akan dijadikan efek clipping, kalian bisa salin gambar berikut sebagai bahan untuk prakteknya.
Langkah 2 : Membuat Efek Clipping Teks dengan HTML dan CSS
Selanjutnya, buatlah satu buah file HTML dan ketikan sintak HTML sederhana sebagai struktur awal untuk membuat efek clipping teks berikut ini.
<div id="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
</div>
</body>
Pada tag p bagian paragraf, silahkan kalian bisa isikan sebanyak mungkin paragrafnya.
Langkah 3 : Membuat Efek Clipping Teks dengan HTML dan CSS
Setelah membuat struktur HTML seperti diatas, langkah selanjutnya barulah pada tahapan mendesain dan membuat efek clipping teksnya dengan sintak CSS berikut ini.
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
body {
background-color: #0D0D11;
font-family: 'Ubuntu', sans-serif;
}
#container {
background-image: url("image/img.jpg");
background-repeat: no-repeat;
background-position: center center;
display: flex;
justify-content: center;
align-items: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
p {
font-size: 14px;
line-height: 10px;
letter-spacing: -1px;
display: block;
width: 500px;
height: 500px;
overflow: hidden;
text-align: justify;
}
Yang paling penting dalam membuat efek clipping teks diatas adalah dengan hanya mengetikan perintah berikut.
-webkit-text-fill-color: transparent;
Sintak diatas adalah sintak utama dimana teks akan mengikuti warna pada suatu objek dalam hal ini adalah gambar.
Setelah semua sintak diatas telah diketikan, simpan filenya kemudian kalian bisa membuka pada browser masing - masing dan liha hasilnya, maka hasilnya akhirnya akan seperti gambar dibawah ini.
Bagaimana, cukup mudah bukan ? Baiklah cukup sekian pembahasan dan tutorial sederhana mengenai bagaimana cara Membuat Efek Clipping Teks dengan HTML dan CSS. Semoga tutorial ini bisa bisa bermanfaat, sampai jumpa ditutorial selanjutnya.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
