hai sobat,saya mau share trik css3 lagi nih,kali ini saya akan share cara membuat 3D text atau text 3dimensi hanya dengan css3 hasil modifikasi saya dan ditambah dengan css hover efect animation.
jadi text animasi dah n_n.Sobat bisa lihat contoh dan Css'a DISINI.Untuk menggunanakan trik ini,ada baik'a sobat backup dulu template sobat n_n
Sebelum sobat mencoba trik ini,sobat harus tau,kalau trik hover animation hanya muncul di browser yang mendukung css3 animation,seperti google chrome.untuk mozilla,belum bisa mendukung css3 animation,tetapi untuk 3D text/shadow bisa dinikmati di mozilla4.saran saya buat sobat,sering-seringlah update browser ke versi baru agar sobat bisa merasakan kehebatan CSS3.
ok dah~ langsung aja...
pertama,kamu pilih style shadow'a DISINI
kemudian css'a sobat taruh di template sobat,jika sudah pilih salah satu,
sobat masukan kode html dibawah ini
<div id="footer_container">
<h2 class="footer_title">
Blog Johanes</h2>
Keterangan:
-Nama Text bisa sobat ganti.(yang Blog johanes)
-Ukuran font/jenis tulisan,bisa sobar rubah
-bila sobat ingin menambahkan efek gradient,sobat tinggal tambahkan kode ini
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
-jika sobat tidak ingin menambahkan efek animasi/hover efect,sobat tinggal hapus kode
#footer_container1 h2.footer_title1:hover { isi Css }
-jika sobat ingin mengganti warna text,ganti kode HEX di color:#8BC2C5; pada css #footer_container h2.footer_title untuk warna text sebelum di hover dan kode HEX di color: #B19FD9; untuk warna text setelah di hover.
-jika sobat ingin ganti warna shadow pada text dan mengganti arah shadow,sobat tinggal ganti hex dan pixel pada css text shadow.
Contoh :text-shadow: 0px 1px #000,
0px=arah shadow Horizontal=bila diubah ke angka lebih dari 1,maka shadow akan kearah kanan,sedangkan bila diubah ke angka kurang dari -1,maka shadow akan kearah Kiri.
1px=arah shadow Vertikal=bila diubah ke angka lebih dari 1,maka shadow akan kearah bawah,sedangkan bila diubah ke angka kurang dari -1,maka shadow akan kearah atas.
#000= warna shadow text,sobat bisa ganti warna'a(HEX)
Demikian tutorial dan penjelasan tentang 3D Text Css3 dari saya.selamat mencoba,dan jangan lupa tinggalkan komentar'a ya n_n
Posting Komentar