24.9.14
13
Menampilkan Bayangan Teks Saat Hover - Hal seperti ini bukan lagi sebuah tutorial yang sulit buat Anda terapkan saat akan menampilkan bayangan pada sebuah teks dengan penggunaan CSS text-shadow. Dengan mengatur nilai pada sumbu masing-masing ofset, maka akan dengan mudah Anda Membuat Efek Tulisan Dengan CSS Text Shadow seperti ini:


SAHABAT BLOGGER 77



Layaknya teks pada sebuah link, yang jika di hover maka teks akan memberikan efek warna yang berbeda pada teks. Untuk tutorial kali ini merupakan pemecahan pada artikel sebelumnya tentang bagaimana Cara Membuat Teks Berkedip Dengan Animasi Blink, namun kodenya saya modifikasi sedikit untuk menampilkan efek bayangan pada teks tersebut dengan sistem hover.

Bisa saja apa yang akan saya tampilkan kali ini kurang menarik buat Anda, karena kesetiaan Anda yang selalu cinta kepada SAHABAT BLOGGER 77, saya akan berikan 7 Cara Menampilkan Bayangan Teks Saat Hover dengan berbagai model yang dapat Anda pilih dengan penggunaan CSS seperti ini:

1. Text Shadow With Hover

<style>
.word {text-align: center;margin:0 auto;font-weight:bold;}
.word, .word:before, .word:after {
  font: bold 60px/normal Helvetia;
  mix-blend-mode: screen;width: 100%;
  -ms-transition: -webkit-transform .3s;
  -o-transition: -webkit-transform .3s;
  -moz-transition: -webkit-transform .3s;
  -webkit-transition: -webkit-transform .3s;
  transition: transform .3s;}

.word:before, .word:after {
  display: block;
  content: attr(data-word);
  position: absolute;
  top: 0;left: 0;}

.word {color: #ddd}
.word:after {color: red;}
.word:before {color: #7FFF00;}

//hapus kode ini, lalu gantikan dengan kode efek pilhan anda. misal efek 2 (Trasform Rotate), efek 3,4 dan seterusnya...
.word:hover:after {
  -o-transform: translate(0.07em, -0.07em);
  -moz-transform: translate(0.07em, -0.07em);
  -webkit-transform: translate(0.07em, -0.07em);
  -ms-transform: translate(0.07em, -0.07em);
  transform: translate(0.07em, -0.07em);}

.word:hover:before {
  -o-transform: translate(-0.07em, 0.07em);
  -moz-transform: translate(-0.07em, 0.07em);
  -webkit-transform: translate(-0.07em, 0.07em);
  -ms-transform: translate(-0.07em, 0.07em);
  transform: translate(-0.07em, 0.07em);}
</style>
<div class="word" data-word="SAHABAT BLOGGER 77">
SAHABAT BLOGGER 77</div>


DEMO SHOW




2. Trasform Rotate

.word:hover:after {
  -0-transform:rotate(-30deg);
  -ms-transform:rotate(-30deg);
  -moz-transform:rotate(-30deg);
  -webkit-transform:rotate(-30deg);
  transform:rotate(-30deg);}

.word:hover:before {
  -o-transform:rotate(30deg);
  -ms-transform:rotate(30deg);
  -moz-transform:rotate(30deg);
  -webkit-transform:rotate(30deg);
  transform:rotate(30deg);}


DEMO SHOW




3. Rotasi
Efek ini merupakan gerak berputar, bayangan pada teks pertama akan berputar ke-kanan, dan teks ke-dua berputar ke-kiri dengan durasi 360, sehingga gerak putaran tidak searah seperti ini:

.word:hover:after {
  -0-transform:rotate(-360deg);
  -ms-transform:rotate(-360deg);
  -moz-transform:rotate(-360deg);
  -webkit-transform:rotate(-360deg);
  transform:rotate(-360deg);}

.word:hover:before {
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg);}


DEMO SHOW




4. Slide Top Down
Membuka teks asli dengan gerakan teks bayangan secara slide-top dan slide-bottom.

.word:hover:after {
  -webkit-transform:translate(0px, -90px);
  -moz-transform:translate(0px, -90px);
  -ms-transform:translate(0px, -90px);
  -o-transform:translate(0px, -90px);
  transform:translate(0px, -90px)}

.word:hover:before {
  -webkit-transform:translate(0px, 90px);
  -moz-transform:translate(0px, 90px);
  -ms-transform:translate(0px, 90px);
  -o-transform:translate(0px, 90px);
  transform:translate(0px, 90px)}


DEMO SHOW




5. Slide Out Left Right
Membuka teks asli dengan gerakan teks bayangan secara slide-left dan slide-right.

.word:hover:after {
  -webkit-transform:translate(1300px, 0px);
  -moz-transform:translate(1300px, 0px);
  -ms-transform:translate(1300px, 0px);
  -o-transform:translate(1300px, 0px);
  transform:translate(1300px, 0px)}

.word:hover:before {
  -webkit-transform:translate(-1300px, 0px);
  -moz-transform:translate(-1300px, 0px);
  -ms-transform:translate(-1300px, 0px);
  -o-transform:translate(-1300px, 0px);
  transform:translate(-1300px, 0px)}


DEMO SHOW




6. Rotasi And Shrink Text

.word:hover:after {
  -webkit-transform:rotateZ(360deg);
  -moz-transform:rotateZ(360deg);
  -ms-transform:rotateZ(360deg);
  -o-transform:rotateZ(360deg);
  transform:rotateZ(360deg)}

.word:hover:before {
  -webkit-transform:rotateX(-60deg);
  -moz-transform:rotateX(-60deg);
  -ms-transform:rotateX(-60deg);
  -o-transform:rotateX(-60deg);
  transform:rotateX(-60deg)}


DEMO SHOW




7. Slide Top-Zoom And Down-small

.word:hover:after {
  -webkit-transform:translate(0px, -100px) scaleX(1) scaleY(2);
  -moz-transform:translate(0px, -100px) scaleX(1) scaleY(2);
  -ms-transform:translate(0px, -100px) scaleX(1) scaleY(2);
  -o-transform:translate(0px, -100px) scaleX(1) scaleY(2);
  transform:translate(0px, -100px) scaleX(1) scaleY(2)}

.word:hover:before {
  -webkit-transform:translate(0px, 70px) scaleX(1) scaleY(0.5);
  -moz-transform:translate(0px, 70px) scaleX(1) scaleY(0.5);
  -ms-transform:translate(0px, 70px) scaleX(1) scaleY(0.5);
  -o-transform:translate(0px, 70px) scaleX(1) scaleY(0.5);
  transform:translate(0px, 70px) scaleX(1) scaleY(0.5)}


DEMO SHOW




Jika Anda bisa membuat efek warna yang berbeda pada link saat di hover. Maka dengan ini, Anda bisa berinovasi untuk membuat teks pada link dengan memberi efek bayangan pada teks-nya.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Menampilkan Bayangan Teks Saat Hover
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

13 komentar

  1. trimakasih mas untuk tutorianya...sanat bermanfaat buat sy...salam hngat di malam hari :)

    BalasHapus
    Balasan
    1. :-d,. mas cantik ini pak..!

      Hapus
    2. haha...padahal sudah saya buat nama dibawah judul artikel, terus ada foto saya dibawah permalink, masih saja ada yang panggil mas, ketahuan singgah cuma minta air putih saja.

      Hapus
  2. Sangat Unik dan Menarik ya Mbak Devy, bisa membuat Tulisan itu
    Kelihatan Hidup, saya belum pernah mencobanya tuh, ijin coba Mbak
    Terima kasih atas tutorial Bayangan Teksnya *salam sukses (o)

    BalasHapus
  3. shadownya sangat membakar teks... keren dah... =))

    BalasHapus
  4. wah kalau ada bayangan seperti ini saya jadi terus terbayang-bayang sama mbk Devy. hehee

    BalasHapus
    Balasan
    1. sesekali terbayang dengan devy kagak kenapa-kenapa attuh mas., kalau sudah dekat kan bisa bersahabat sama devy.
      heheh....

      Hapus
  5. menarik sekali ini tutorialnya ijin coba dan ambil kode cssnya

    BalasHapus
  6. saya coba di beberapa blog saya ya mbak dan terima kasih atas informasinya ya!

    BalasHapus
  7. jadi unik kalo gambarnya dikasih efek gini,, :)

    BalasHapus
  8. wah keren gan, saya coba dulu di blog saya :D

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK