Demo CSS Transform Text Shadow
Kodenya
Kodenya
Hasilnya
Apabila Sobat pengen membuat efek hover atau teks tersebut hanya berubah Saat di Cursor Seperti demo paling atas tambahakan kode seperti ini
Disini Sobat Demonya Arahkan Cursornya Kesini
Selamat Beraktifitas Sobat Semoga Dalam Keadaan Sehat-sehat Semua
Masih Tentang CSS Yang Saya Share kali ini Nah Sebagai Contohnya Arahkan Cursor Sobat Pada Teks yang sedang Sobat baca ini
Bagaimana Sobat Lucu ya...???
Selamat Beraktifitas Sobat Semoga Dalam Keadaan Sehat-sehat Semua
Masih Tentang CSS Yang Saya Share kali ini Nah Sebagai Contohnya Arahkan Cursor Sobat Pada Teks yang sedang Sobat baca ini
Bagaimana Sobat Lucu ya...???
Langsung Aja Berikut Kode CSSnya Silahkan diutak-atik biar lebih cantik
Kodenya
<div style="color: black; font-family: Kristen ITC; font-size: 20px; text-align: center; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;">TEKS SOBAT DISINI</div>
HasilnyaTEKS SOBAT DISINI
Kodenya
<div style="color: #b45f04; font-family: Matura MT Script Capitals; text-shadow: 4px 4px 4px #FF0000;">TEKS SOBAT DISINI</div>
TEKS SOBAT DISINI
Apabila Sobat pengen membuat efek hover atau teks tersebut hanya berubah Saat di Cursor Seperti demo paling atas tambahakan kode seperti ini
<style type="text/css">
.binkbenks:hover{transform:rotate(-5deg); -moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); -o-transform:rotate(-5deg);color: #000;
-moz-border-radius: 10px 10px 10px 10px; background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); border-color: red; border-style: inset; border-width: 2px 4px;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;font-size: 36px;font-family:Kristen ITC;}
</style>
<div class="binkbenks">LETAKKAN ARTIKEL ATAU TEKSNYA DISINI SOBAT</div>
.binkbenks:hover{transform:rotate(-5deg); -moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); -o-transform:rotate(-5deg);color: #000;
-moz-border-radius: 10px 10px 10px 10px; background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); border-color: red; border-style: inset; border-width: 2px 4px;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;font-size: 36px;font-family:Kristen ITC;}
</style>
<div class="binkbenks">LETAKKAN ARTIKEL ATAU TEKSNYA DISINI SOBAT</div>
Hasilnya arahkan Cursor disini
Nah untuk membuatnya lebih menarik Sobat utak-atik mulai dari kode warnanya, font teksnya, font size dan juga Sobat bisa tambahkan background pada kode CSSnya
LETAKKAN ARTIKEL ATAU TEKSNYA DISINI SOBAT
Nah untuk membuatnya lebih menarik Sobat utak-atik mulai dari kode warnanya, font teksnya, font size dan juga Sobat bisa tambahkan background pada kode CSSnya
Untuk Background Kode Warnanya disini
Bisa Juga pakai Url gambar
Untuk Efek text Shadow lainnya Lihat disini
Bisa Juga pakai Url gambar
Untuk Efek text Shadow lainnya Lihat disini
Untuk mengetahui font teks /model tulisan Silahkan Buka Aplikasi Microsoft Office, Sobat bisa Lihat Macam-macam model tulisan disana
Untuk membuatnya Miring kekanan pada kode (-5deg) ganti dengan (5deg)
Untuk membuatnya Miring kekanan pada kode (-5deg) ganti dengan (5deg)
Sekian dulu Sobat Semoga Bermanfaat
Posted On : 5 November 2011 Time : 12.21
