Cara Membuat Efek Teks Keren dengan CSS3

Teks merupakan sebuah element yang sangat penting di dalam sebuah konten web, ada banyak sekali jenis teks yang bisa kita temukan pada sebuah konten web, mulai dari jenis huruf, animasi huruf, maupun efek yang ditimbulkan pada teks itu sendiri, Nah jika kalian ingin membuat teks dengan efek keren tidak ada salah nya kalian menyimak tutorial berikut ini yakni bagaimana Cara Membuat Efek Teks Keren dengan CSS3. Simak langkah-langkah nya berikut ini.

Untuk membuat Efek pada teks kita akan membuat struktur HTML dan membuat kalimat berupa teks seperti dibawah ini.

<body>
	<div class="wrapper">
	  <span class="huruf" data-letter="D">D</span>
	  <span class="huruf" data-letter="U">U</span>
	  <span class="huruf" data-letter="M">M</span>
	  <span class="huruf" data-letter="E">E</span>
	  <span class="huruf" data-letter="T">T</span><br>
	  <span class="huruf" data-letter="S">S</span>
	  <span class="huruf" data-letter="C">C</span>
	  <span class="huruf" data-letter="H">H</span>
	  <span class="huruf" data-letter="O">O</span>
	  <span class="huruf" data-letter="O">O</span>
	  <span class="huruf" data-letter="L">L</span>
	</div>
</body>

Pada teks diatas kalian bisa menyesuaikan nya lagi sesuai keinginan, yang penting struktur harus sama seperti sintak HTML diatas, selanjutnya adalah mendesain huruf yang dirangkai HTML diatas dengan CSS3 untuk membuat efek keren pada teks.

@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
*, *:before, *:after{
  box-sizing:border-box;
}
body{
  font-family: 'Fredoka One', cursive;
}
div.wrapper{
  width: 90%;
  margin: 0 auto;
  text-align: center;
}
.huruf{
  display: inline-block;
  font-weight: 900;
  font-size: 8em;
  margin: 0.2em;
  position: relative;
  color: #00B4F1;
  transform-style: preserve-3d;
  perspective: 400;
  z-index: 1;
}
.huruf:before, .huruf:after{
  position:absolute;
  content: attr(data-letter);
  transform-origin: top left;
  top:0;
  left:0;
}
.huruf, .huruf:before, .huruf:after{
  transition: all 0.3s ease-in-out;
}
.huruf:before{
  color: #fff;
  text-shadow: 
    -1px 0px 1px rgba(255,255,255,.8),
    1px 0px 1px rgba(0,0,0,.8);
  z-index: 3;
  transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
}
.huruf:after{
  color: rgba(0,0,0,.11);
  z-index:2;
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
}
.huruf:hover:before{
  color: #fafafa;
  transform:
    rotateX(0deg)
    rotateY(-40deg)
    rotateZ(0deg);
}
.huruf:hover:after{
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
}

Setelah semua sintak HTML dan CSS3 dibuat, selanjutnya simpan file dengan format .html kemudian buka di browser masing-masing dan lihat hasilnya. Maka akan terlihat teks yang keren.

Baiklah itulah tadi tutorial mengenai Cara Membuat Efek Teks Keren dengan CSS3, semoga bermanfaat dan selamat mencoba 🙂

Untuk lebih jelas kalian bisa melihat demo dibawah ini.

DEMO