Membuat Efek Clipping Teks dengan HTML dan CSS

28/01/2018    Risman Hakim    2272     Website

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.

<body>
    <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-background-clip: text;
-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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More