Cara Membuat Efek Teks Split dengan CSS

08/07/2018    Risman Hakim    161     Website

Cara Membuat Efek Teks Split dengan CSS - Pernahkah kalian mendengar efek split ? ya, split merupakan suatu efek yang membagi suatu objek menjadi dua bagian yang berbeda style nya. Nah, pada kesempatan kali ini saya akan berbagi tutorial mengenai efek split yakni bagaimana Cara Membuat Efek Teks Split dengan CSS. Bagi kalian yang penasaran dan ingin membuat efek split tidak ada salahnya untuk mencoba tutorial ini. Berikut akan saya praktekan Cara Membuat Efek Teks Split dengan CSS.

Langkah 1 : Cara Membuat Efek Teks Split dengan CSS

Pada kasus yang akan kita buat kali ini, yang dijadikan objek split yakni teks yang nantinya akan diubah warna background nya dan color menjadi dua bagian. Silahkan kalian buat satu file index.html dan ketikan sturuktur sederhana HTML untuk membuat efek teks split nya.

<body>
    <h1 data-heading="You &hearts; Me">You &hearts; Me</h1>
</body>

Langkah 2 : Cara Membuat Efek Teks Split dengan CSS

Setelah membuat struktur HTML seperti diatas, langkah selanjutnya untuk membuat efek teks split adalah mendesain dan tentunya membuat efek split pada teks dan membuat warna menjadi dua bagian baik pada teks maupun pada background nya. Silahkan ketikan sintak CSS untuk desain efek teks split berikut ini.

@import url('https://fonts.googleapis.com/css?family=Righteous');
body {
  font-family: 'Righteous', cursive;
  background:linear-gradient(to right,
  #EA3556 0%,
  #EA3556 50%,
  #EDE5E2 50%,
  #EDE5E2 100%);
}

h1 {
  font-size: 150px;
  top: 50%; left: 50%;
  margin: -32px;
  transform: translate(-50%, -50%);
  position: absolute;
  color: #EA3556;
  white-space: nowrap;
}
h1::before {
  content: attr(data-heading);
  position: absolute;
  left: 0; top: 0;
  color: #EDE5E2;
  width: 54.9%;
  overflow: hidden;
  z-index: 9;
}

Setelah semua sintak HTML dan CSS telah diketikan, langkah terakhir pastikan semua file tersimpan, setelah itu silahkan buka pada browser masing - masing dan lihat hasilnya. Maka hasilnya akan seperti pada gambar dibawah ini.

Cara Membuat Efek Teks Split dengan CSS

Baiklah, cukup sekian tutorial sederhana bagaimana Cara Membuat Efek Teks Split dengan CSS, semoga tutorial ini bisa bermanfaat dan bisa menambah wawasan dalam membuat desain website. Sampai jumpa lagi pada tutorial selanjutnya :)

Web Design, HTML CSS, website

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