Tutorial Membuat Efek Anaglyph Pada Text Menggunakan CSS

 

Anaglyph adalah technology menggabungkan 2 gambar berbeda menjadi satu, namun di buat bagaimana mata kiri dan kanan melihat gambar berbeda. itu dia yang di namakan anaglyph. Biasanya dikolaborasikan dengan warna merah, hijau, dan biru atau yang biasa kita kenal RGB.

Sekarang mari kita coba menerapkan efek anaglyph itu pada sebuah text dalam website. Apa yang akan kita buat adalah efek transparasi overlay yang mirip seperti efek anaglyph gambar stereoscopic 3 dimensi. Untuk menerapkan efek ini pada text di website, tentu harus menggunakan CSS untuk membuatnya.

Disini kita akan menggunakan tag <h1> untuk melakukan styling nanti.

<h1>TrustMe</h1>

class :after dan properti konten

h1:after{
   content: "TrustMe";
}

Disini lah properti dan konten  :after pseudo elemen yang akan memberikan efek anaglyph. Elemen  :after memungkinkan kita untunk menyisipkan potongan konten setelah ditargetkan pada header dan menambahkan teks tambahan yang ada pada properti  content.

Membuat style

Sejauh ini kita hanya punya 2 kata yang sama diletakkan berdampingan. Mari kita tambahkan beberapa tambahan CSS styling  untuk overlay dan beberapa warna

h1{
  display: inline;
  position: relative;
  font: 200px Helvetica, Sans-Serif;
  letter-spacing: -5px;
  color: rgba(255,19,24,0.5);
}
h1:after{
  content: "TrustMe";
  position: absolute; left: 10px; top: 5px;
  color: rgba(24,19,255,0.5);
}

Pertama, H1 dikonversi ke inline dengan posisi relative  untuk memungkinkan posisi mutlak dari teks yang akan ditempilkan. Selanjutnya styling font, dengan size 200px, Helvetica dengan beberapa tweak letter-spacing untuk memperkuat contoh. Kemudian warnai teks menggunakan RGBA, yang memungkinkan transparansi harus ditetapkan sehingga ketika warna yang mendasari akan menjadi overlayed. Teks yang ditampilkan dari properti  content juga diberikan beberapa styling, khususnya teks diposisikan sedikit offset dari aslinya dengan 10px dan 5px pada setiap sumbu, dan beralih ke biru kontras terhadap merah.

Hasil akhir efek anaglyph

<h1>TrustMe</h1>

h1{
  display: inline;
  position: relative;
  font: 200px Helvetica, Sans-Serif;
  letter-spacing: -5px;
  color: rgba(255,19,24,0.5);
}
h1:after{
  content: "TrustMe";
  position: absolute; left: 10px; top: 5px;
  color: rgba(24,19,255,0.5);
}

Sekian tutorial membuat efek Anaglyph atau  Stereoscopic 3D menggunakan CSS, semoga bisa bermanfaat, mudah kan?. Terima kasih

Comments

comments