Membuat Efek Ketikan Pada Teks Menggunakan CSS dan HTML

Membuat efek ketikan pada teks dengan kursor berkedip didalam blog bisa dilakukan layaknya sedang mengetik. Dengan memberikan efek mengetik

Daftar Isi

Membuat efek ketikan pada teks dengan kursor berkedip didalam blog bisa dilakukan layaknya sedang mengetik. Dengan memberikan efek mengetik seperti ini akan menambah variasi bentuk pada tulisan yang dibuat. Namun tidak semua tulisan yang ada harus dipasang efek ini.

Biasanya pemasangan efek mengetik atau ketikan ini dipasang pada judul atau sub judul sebuah objek dalam blog. Misalkan judul atau sub judul pada widget atau kolom blog. Dengan ditambahkannya efek ini akan memberikan perhatian lebih pada judul tersebut.

Bagaimana cara membuat efek ketikan tersebut?

Bermain-main dengan kode CSS sangat menyenangkan sebenarnya karena bisa membuat kita berimajinasi untuk menampilkan kode-kode tersebut kedalam bentuk HTML. Meskipun kode yang didapatkan adalah hasil dari orang lain, sebagai pembelajaran tentunya kode tersebut bisa di edit dan dikembangkan.

Apalagi kode yang digunakan adalah hanya menggunakan kode CSS saja, jadi lebih mudah untuk mengeditnya. Salah satu kode yang bisa di edit tersebut adalah membuat efek ketikan teks hanya menggunakan CSS dan Html saja.

Kode CSS

Salin dan pastekan kode CSS dibawah kedalam kode template blog Anda.

#typing {
 width: auto;
 color: #676767;
 float: left;
 font-size: 50px;
 margin: 0 auto;
 padding: 10px;
 overflow: hidden;
 white-space: nowrap;
 animation: typing 7s steps(24) 1s infinite;
 }
#typing span{
 color:#000000;
}
#crow {
 float: left;
 margin-top: 10px;
 color: #000000;
 font-size: 50px;
 animation: crow 0.5s linear 0s infinite;
 }
@keyframes typing {
  from {
      width: 0;
	}
   to {
      width: 460px;
	 }
}
@keyframes crow {
   from {
	 opacity: 0;
	 }

    to {
	 opacity: 1;
	 }
}

Keterangang: Jika ingin merubah besar Font, ganti ukuran font pada CSS yaitu font-size: 50px. Ada 2 kode ukuran font ini, ganti sesuai dengan ukuran font yang ingin diganti. Jika ukuran font diganti lebih kecil atau lebih besar lagi, Anda harus mengganti ukuran lebar Frame yang digunakan pada kode CSS Keyframes yaitu width: 460px

Kode HTML

Salin dan tempatkan kode Html dibawah ini kedalam blog Anda. Tersera Anda bebas mau dipasang dimanan.

  <div id="typing">Saya seorang  <span>Blogger</span></div>
  <div id="crow">|</div>

Demo

Dan hasilnya akan terlihat seperti dibawah ini

See the Pen Membuat Efek Ketikan Pada Teks Menggunakan CSS dan HTML by Sahroni (@digitalpoin) on CodePen.

Baca Juga: Membuat Simple Accordion Menu Menggunakan HTML, CSS & Javascript

Anda bebas menggunakan dan mengedit kode diatas. Sesuaikan dengan keinginan Anda dan letakkan didalam blog yang bisa menarik perhatian pembaca atau pengunjung blog Anda. Itulah cara membuat efek ketikan pada teks di blog menggunakan CSS dan HTML saja yang juga bisa dipasang didalam artikel blog.