Efek Letterpress dengan CSS Text-shadow

Efek letterpress menjadi efek yang populer di dunia web design. Biasanya efek letterpress dibuat oleh aplikasi pengolah gambar seperti Photoshop, Gimp atau aplikasi-aplikasi pengolah gambar lainnya. Beberapa minggu yang lalu saya dan teman saya telah membahas bagaimana membuat efek letterpress di inkscape dan efek letterpress di gimp. Kali ini saya akan membuat efek letterpress tanpa aplikasi pengolah gambar, hanya menggunakan property dari CSS3 yaitu text-shadow.

Efek letterpress ini hanya akan tampil pada browser-browser modern. Efek dapat mudah dibuat tanpa gambar, hanya CSS saja.

HTML Markup

Tidak perlu HTML markup yang rumit, disini saya hanya menggunakan tag h1 saja.

 <h1>Efek Lettepres dengan CSS3</h1> 

Untuk property text-shadow, hampir sama dengan property box-shadow. Memiliki empat nilai yaitu, x-offset, y-offset, blur-radius dan color. Untuk lebih jelasnya dapat dilihat pada gambar dibawah.

CSS

Untuk CSS, disini saya menggunakan format warna RGBA (Red Green Blue Alpha)tidak menggunakan format warna dalam kode hexa.

Jika yang sudah sering bermain dengan aplikasi pengolah gambar pasti akan familiar dengan RGBA. Nilai RGB mulai dari 0 sampai 255, dan nilai alpha mulai dari 0 sampai 1. Kode diatas akan menghasilkan warna hitam dengan nilai transparency 0.5.

 body { background:#165780}
h1 {
  color:rgba(20, 70, 94, 0.5);
  text-shadow:0 -2px 0 rgba(0, 0, 0, 0.898), 0 0px 0 rgba(255, 255, 255, 0.3);
}

Gunakan warna background yang lebih gelap agar efek letterpress terlihat jelas.