Membuat Teks Overlap atau Tumpang Tindih di Postingan Blog

agung wisudhatama September 10, 2022 4 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

TEKS Overlap atau teks tumpang tindih adalah keadaan dimana teks yang di depan menindih teks yang ada dibelakangnya. Sehingga teks atau hurufnya saling menumpang satu dengan yang lainnya. Dengan keadaan ini memungkinkan teks menjadi menyatu. Sungguh style yang luar biasa bukan. Keajaiban dari trik CSS dalam pembuatan Teks Overlapping.

Gaya penulisan teks seperti ini tidak seperti kebanyakan yang ditulis secara standar pada postingan di blog. Karena penulisan biasa ya seperti tulisan yang ada di website ini. Lihat tulisan di artikel ini, standar dan tidak tumpang tindih bukan? Dan memang dibuat standar karena biar dapat terbaca dengan jelas.

Baca Juga :

• Pentingnya Untuk Merapikan Tulisan di Blog dan Caranya
• Cara Membuat Drop Cap Huruf Pertama Besar dalam Paragraf Pertama
• Inilah Tutorial Membuat Background Teks Pelangi Gradient Animasi
• Cara Membagi Artikel Menjadi 2 Kolom di Postingan Blog
• Navigasi Button Pop Up Corner Berefek Animasi di Kiri Atas Blog

Ketika berbicara standar atau tidak, tentu saja system penulisan Overlap tidak dianjurkan karena tumpang tindih dan sulit dibaca. Tapi bila dilihat dari kacamata seni koding CSS, maka perilaku estetis mulai berbicara disini. Semakin unik gaya tulisan itu, semakin baguslah dalam dunia desain blog. Mungkin seperti itu. Lihat saja keragaman trik dari CSS, sudah tidak terhitung banyaknya.

Sekarang, sore ini dalam suasana hujan yang tidak henti-henti, saya mulai menerapkan metode belajar dan praktekkan. System pembelajaran yang menurut saya simpel dan langsung to the point pada inti bahasannya. Kita akan membuat teks menjadi overlap dengan kode CSS. Jadi stay tune disitu ya teman-teman. Mari kita praktekkan bersama-sama.

Membuat Teks Overlap atau Tumpang Tindih di Postingan

1. Masuk ke template ya dan temukan langsung kode ]]></b:skin> dan tempelkan kode dibawah ini di atas kode ]]></b:skin> tersebut.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #05001d;
}
alifa {
  width: 100%;
  text-align: center;
  color: #ffffff;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-weight: 350;
}
alifa span {
  font-size: 10vw;
  text-shadow: -0.08em 0.03em 0.12em rgba(0, 0, 0, 0.7);
}
alifa span:not(:first-child) {
  margin-left: -0.18em;
}

2. Kemudian masuk ke Postingan juga bisa atau ke Tata Letak dan tempelkan disitu. Saya kira kalian semua sudah tahu maksud saya.

<alifa>
      <span>A</span>
      <span>L</span>
      <span>I</span>
      <span>F</span>
      <span>A</span>
      <span>C</span>
      <span>O</span>
      <span>D</span>
      <span>E</span>
</alifa>

3. Save dan publikasikan.

Terima kasih ya teman-teman yang sudah mau mampir disini dan membaca artikel Teks Overlap atau Tumpang Tindih di Postingan. Ketemu besok lagi. Maaf ya udah beberapa hari tidak update. Masih banyak pekerjaan di RS. Apalagi mau menjelang Akreditasi, banyak tugas yang mesti dikerjakan. Tapi saya tetap membagi waktu untuk berbagi tutorial kok, jadi tetap mampir kesini ya. Salam.

DEMO

Bagikan ke teman-teman kamu

Label Postingan : CSS , Javascript , Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Membuat Teks Overlap atau Tumpang Tindih di Postingan Blog . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Related Posts