Efek Teks

Berikut adalah tutorial CSS tentang beberapa efek teks yang umum digunakan

Shadow (Bayangan)

Efek bayangan dapat memberikan teks tampilan yang lebih menarik. Anda dapat mengatur bayangan horizontal, vertikal, blur, dan warna.

.text-shadow {
  text-shadow: 2px 2px 4px #333;
}

Gradient Teks

Menggunakan gradient pada teks bisa sangat mencolok. Gunakan linear atau radial gradient.

.gradient-text {
  background: linear-gradient(to right, #ff9a9e, #fad0c4);
  -webkit-background-clip: text;
  color: transparent;
}

Teks Berkerlap

Untuk menciptakan efek teks yang tumpang tindih:

.overlapping-text {
  position: relative;
}
.overlapping-text::after {
  content: attr(data-text);
  position: absolute;
  top: 5px;
  left: 5px;
  color: #fff;
  z-index: -1;
}

Animasi Teks

Tambahkan animasi ke teks Anda untuk menarik perhatian.

@keyframes text-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.animated-text {
  animation: text-animation 2s infinite;
}

Anda dapat menggabungkan efek-efek ini dalam HTML Anda dengan menambahkan kelas CSS yang sesuai ke elemen teks Anda.

<h1 class="text-shadow">Efek Teks</h1>
<h2 class="gradient-text">Gradient Teks</h2>
<p class="overlapping-text" data-text="Teks Tumpang Tindih">Teks Tumpang Tindih</p>
<p class="animated-text">Teks dengan Animasi</p>

Semoga tutorial ini membantu Anda memulai dengan efek teks CSS!

PREVIOUS
NEXT