Menampilkan Bayangan Teks Saat Hover

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.