LetterPress Text Effect with CSS

CATATAN HARIANKU - Selamat siang semua, jumpa kembali bersama Catatan Harianku yang kali ini membahas tentang text effect LetterPress yakni effect teks seperti tenggelam contohnya pada blog ini.

Sebenarnya dulu iseng - iseng juga sih dalam pembuatan blog ini dan banyak juga yang menanyakan tentang bagaimana sih cara pembuatannya ?

Sebenarnya karena saya bukan ahli apalagi pakar CSS sehingga banyak pertanyaan seperti itu yang sampai saat ini belum saya jawab alias diabaikan begitu saja, bukan karena saya sombong tapi dikarenakan memang tidak bisa untuk menjelaskannya.

Tapi supaya kawan - kawan tidak terlalu penasaran, dalam postingan ini saya hanya bisa memberikan contoh saja sedangkan untuk pengaplikasiannya nanti terserah pada kawan - kawan semua.

Contoh hasil seperti diatas ini hanya memanfaatkan satu baris pada CSS yakni pemanfaat text-shadow yakni :

text-shadow : 0px 2px 3px #555;

Pengertiannya adalah :
text-shadow - mendeklarasikan kepada css bahwa kita ingin memberikan effect bayangan kepada text
0px - bayangan x-offset pada text
2px - bayangan y-offset pada text
3 px - merupakan besarnya blur yang diinginkan pada text
#555 - merupakan warna text

Contoh pemakaian :

Misalnya kita memiliki kode CSS seperti dibawah ini

h2 {
        font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
 text-align: center;
}

Kode diatas nanti akan menampilkan h2 dalam bentuk standar biasa dengan besarnya font 70px dan bentuk huruf Helvetica dengan posisi ditengah

Nah sekarang baru kita sisipkan kode CSS shadow diatas untuk memberikan effect LetterPress pada kode CSS diatas yang nantinya tertulis seperti ini

h2 {
        font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
 text-align: center;

        text-shadow: 0px 2px 3px #555; 

 }

Nah, kode CSS yang berwarna merah itu adalah kode CSS yang saya sisipkan sehingga nanti hasilnya akan merubah text standar asal menjadi sesuatu yang berbeda seperti dibawah ini atau tulisan dalam postingan ini.

Nah demikian penjelasan singkat ini, semoga bermanfaat.