CSS3 Huruf Terbalik dengan Shadow / Rotation

Apa maksud dari judul tersebut dan bagaimana bentuknya tidak usah bingung dicoba dulu nanti bakalan tahu wujud dan rupanya hehe. sebelumnya blog yaqindlive juga sudah pernah posting cara membuat tulisan berjalan (marque). Nah kali ini masih dalam pengaturan teks berbalut CSS, blog yaqindlive akan share cara membuat huruf terbalik dengan shadow rotation.


Berikut Caranya :
  • Log in ke akun blogger sobat
  • Selanjutnya Klik Rancangan ➨ Edit HTML. Jangan lupa untuk selalu memback up template anda takut   terjadi kesalahan CentangExpand Template Widget ➨ Download Template. 
  • Selanjutnya cari kode ]]></b:skin> 
  • Letakkan kode dibawah ini persis diatas kode ]]></b:skin>

    .devilzjump {
    text-align:justify;
    padding:5px 5px 5px 5px;
    margin:5px 5px 5px 5px;
    background:transparent;
    border:0px;
    }
    .devilzjump span {
    display:block;
    font-weight:bold;
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
    -moz-transition:-moz-transform ease-in 1s;
    -webkit-transition:-webkit-transform ease-in 1s;
    tansition:transform ease-in 1s;
    }
    .devilzjump:hover span{
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    text-shadow:4px 3px 1px #f216f2;
    }

  • Simpan template anda.
Selanjutnya untuk memanggil kode HTML nya dipostingan anda hanya cukup menyisipkan kode

<div class="devilzjump">Tulisan anda disini.</div>

NOTE : ganti tulisan yang berwarna merah dengan tulisan anda.

..: Selamat Mencoba :.. 

0 komentar:

TEMPLATE COSTUMIZED BY : YAQINDLIVE TEAM