membuat text 3d dengan css

Ada banyak cara untuk mempercantik penampilan blog atu web kita. Salah satunya adalah menggunakan teks 3 dimensi yang akan saya bahas kali ini. Kalau biasanya untuk menampilkan teks yang berupa 3d, menggunakan image atau gambar. Tapi dengan css saja kita juga bisa koq. mari kita mulai.

untuk sampel teksnya   nanti kira kira jadinya seperti ini.

lalu kita tulis kode htmlnya dengan id atau class tertentu.

[codesyntax lang=”php”]

[/codesyntax]

nah dari class inset inilah yang akan kita masukan cssnya

masukan kode css seperti ini pada file css anda.

 

[codesyntax lang=”css” capitalize=”lower”]

[/codesyntax] 

Pembahasannya:

inti dari text 3d ini adalah kita membuat beberapa lapis shadow atau bayangan di bawah text, formatnya seperti ini :

X-offset : jarak horisontal shadow dari text

Y-offset : jarak vertical dari text

Blur size : jarak ketebalan efek blur dari shadow itu sendiri

colour : warna dari shadow text yang anda inginkan, anda bisa memakai rgb atau memakai kode hex colour

.inset : nama class (terserah anda)

jadi untuk membuat efek 3 dimensinya anda bisa membuat beberapa lapis shadownya yang anda atur jarak dan warnanya seperti ini.

setiap satu rangkaian shadow di pisah koma(,)

Jadi bagaimana ..? mudah bukan..?

nah selamat mencoba dan sampai ketemu di trik berikutnya.

 

7 thoughts on “membuat text 3d dengan css

Leave a Reply