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