10 September 2022

Membuat Teks Overlap atau Tumpang Tindih di Postingan Blog

بِسْــــــــــــــــمِ اﷲِالرَّØ­ْÙ…َÙ†ِ الرَّØ­ِيم

Membuat Teks Overlap atau Tumpang Tindih di Postingan

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.



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.



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.

4 comments

  1. Sama-sama mas .. saling berbagi itu indah .. salam .. saya kunjung balik nih ke blog anda

    ReplyDelete
  2. Sama-sama mas Firdaus sudah berkunjung .. saya sudah mampir ke blog anda barusan ..

    ReplyDelete

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon