MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
divxkosesi avatar
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 0/5 - 0 oy

Tab Menü Hover Efekti


Sponsor Reklam

Çevrimdışı divxkosesi
 Tarih: 24-08-2015, Saat:10:39
#1
Web site  Site Adresi : forum.divxskosesi.com

Versiyon MyBB Sürümü : 1.8.5
Eklenti-Plugin Kurulu Eklentiler :

  1. Anahtar Kelimeler Eklentisi (v1)
  2. Forum Yaşı by HSC Community (1.0)
  3. Gizli İçerik Plugin (1.0)
  4. Google SEO (1.6.8)
  5. Highslide Resim Görüntüleme (5.0)
  6. Bildirim Eklentisi (2.0.2)
  7. MyTabs (1.32)
  8. NewPoints Plugin (2.0)
  9. OUGC Ödül Sistemi (1.8.3)
  10. OUGC Her Foruma Özel Logo Eklentisi (1.8.1)
  11. Portal Duyurularında Mesaj Sınırlama. (1.0)
  12. ProStats /Profesyonel İstatistikler/ (1.9.6)
  13. Ziyaretçilere Link Gizleme (1.0)
  14. Benzer Konular (1.0.0)
  15. MyBB Etiket Plugin (1.0)
  16. Thanks (3.9.2)
  17. Destek Bildirim Sistemi (1.0.1)
  18. Görev Listesi (1.0.2)
  19. Silinen Konuları Çöpe Atma (2.0)
  20. Kullanıcı Etiketleme (1.2.1)
  21. Yeni Üyeye Konu (1.0)
Hata-Sorun Sorun açıklaması : Hover efektini yapamadım yardımcı olur musunuz   Buradaki   gibi yapmak istiyorum
Resim-Grafik Hata Ekran Görüntüsü :  resim

Bu şekilde yapabildim olmuyor ya
Cevapla
Bunu Beğenenler:
Sponsor Reklam
Sponsor Reklam

Çevrimdışı usameavci
 Tarih: 24-08-2015, Saat:13:40
#2
Direk css dosyanın sonuna ekle. Yapamamış olmanın sebebi de şudur codepen de sass olarak yazılmış sağ üstten view compiled kısmına tıklarsan compile edilmiş css kodlarını görürsün oradan alıp kullanabilirsin.

Kod:
@-webkit-keyframes sheen {
 0% {
   -webkit-transform: skewY(-45deg) translateX(0);
           transform: skewY(-45deg) translateX(0);
 }
 100% {
   -webkit-transform: skewY(-45deg) translateX(12.5em);
           transform: skewY(-45deg) translateX(12.5em);
 }
}
@keyframes sheen {
 0% {
   -webkit-transform: skewY(-45deg) translateX(0);
           transform: skewY(-45deg) translateX(0);
 }
 100% {
   -webkit-transform: skewY(-45deg) translateX(12.5em);
           transform: skewY(-45deg) translateX(12.5em);
 }
}

.tabbutton {
 padding: 0.75em 2em;
 text-align: center;
 text-decoration: none;
 color: #2194E0;
 border: 2px solid #2194E0;
 font-size: 24px;
 display: inline-block;
 border-radius: 0.3em;
 -webkit-transition: all 0.2s ease-in-out;
         transition: all 0.2s ease-in-out;
 position: relative;
 overflow: hidden;
}
.tabbutton:before {
 content: "";
 background-color: rgba(255, 255, 255, 0.5);
 height: 100%;
 width: 3em;
 display: block;
 position: absolute;
 top: 0;
 left: -4.5em;
 -webkit-transform: skewX(-45deg) translateX(0);
     -ms-transform: skewX(-45deg) translateX(0);
         transform: skewX(-45deg) translateX(0);
 -webkit-transition: none;
         transition: none;
}
.tabbutton:hover {
 background-color: #2194E0;
 color: #fff;
 border-bottom: 4px solid #1977b5;
}
.tabbutton:hover:before {
 -webkit-transform: skewX(-45deg) translateX(13.5em);
     -ms-transform: skewX(-45deg) translateX(13.5em);
         transform: skewX(-45deg) translateX(13.5em);
 -webkit-transition: all 0.5s ease-in-out;
         transition: all 0.5s ease-in-out;
}
Cevapla
Bunu Beğenenler: divxkosesi

Çevrimdışı divxkosesi
 Tarih: 24-08-2015, Saat:13:54
#3
(24-08-2015, Saat:13:40)TShujin Adlı Kullanıcıdan Alıntı: Direk css dosyanın sonuna ekle. Yapamamış olmanın sebebi de şudur codepen de sass olarak yazılmış sağ üstten view compiled kısmına tıklarsan compile edilmiş css kodlarını görürsün oradan alıp kullanabilirsin.


Kod:
@-webkit-keyframes sheen {
 0% {
   -webkit-transform: skewY(-45deg) translateX(0);
           transform: skewY(-45deg) translateX(0);
 }
 100% {
   -webkit-transform: skewY(-45deg) translateX(12.5em);
           transform: skewY(-45deg) translateX(12.5em);
 }
}
@keyframes sheen {
 0% {
   -webkit-transform: skewY(-45deg) translateX(0);
           transform: skewY(-45deg) translateX(0);
 }
 100% {
   -webkit-transform: skewY(-45deg) translateX(12.5em);
           transform: skewY(-45deg) translateX(12.5em);
 }
}

.tabbutton {
 padding: 0.75em 2em;
 text-align: center;
 text-decoration: none;
 color: #2194E0;
 border: 2px solid #2194E0;
 font-size: 24px;
 display: inline-block;
 border-radius: 0.3em;
 -webkit-transition: all 0.2s ease-in-out;
         transition: all 0.2s ease-in-out;
 position: relative;
 overflow: hidden;
}
.tabbutton:before {
 content: "";
 background-color: rgba(255, 255, 255, 0.5);
 height: 100%;
 width: 3em;
 display: block;
 position: absolute;
 top: 0;
 left: -4.5em;
 -webkit-transform: skewX(-45deg) translateX(0);
     -ms-transform: skewX(-45deg) translateX(0);
         transform: skewX(-45deg) translateX(0);
 -webkit-transition: none;
         transition: none;
}
.tabbutton:hover {
 background-color: #2194E0;
 color: #fff;
 border-bottom: 4px solid #1977b5;
}
.tabbutton:hover:before {
 -webkit-transform: skewX(-45deg) translateX(13.5em);
     -ms-transform: skewX(-45deg) translateX(13.5em);
         transform: skewX(-45deg) translateX(13.5em);
 -webkit-transition: all 0.5s ease-in-out;
         transition: all 0.5s ease-in-out;
}


Teşekkürler hocam bir tek şu sıkıntı var . Efekt sol yukarıdan sağ aşağı iniyor oraya kadar tamam ama sağ aşağıda kalıyor sadece müzik te yok oluyor o neden oluyor acaba ?
Cevapla
Bunu Beğenenler:

Çevrimdışı usameavci
 Tarih: 24-08-2015, Saat:14:06
#4
Butonların uzunlukları farklı olduğu için öyle oluyor. Butonların uzunluklarını sabitlersen ve hover kısmını onagöre ayarlarsan sorunun çözülür. Yada şunu deneyebilirsin;

Kod:
.tabbutton:hover::before {
   transition: all 0.8s ease-in-out 0s;
   transform: skewX(-45deg) translateX(750%);
}
Cevapla
Bunu Beğenenler: divxkosesi

Çevrimdışı divxkosesi
 Tarih: 24-08-2015, Saat:14:11
#5
(24-08-2015, Saat:14:06)TShujin Adlı Kullanıcıdan Alıntı: Butonların uzunlukları farklı olduğu için öyle oluyor. Butonların uzunluklarını sabitlersen ve hover kısmını onagöre ayarlarsan sorunun çözülür. Yada şunu deneyebilirsin;


Kod:
.tabbutton:hover::before {
   transition: all 0.8s ease-in-out 0s;
   transform: skewX(-45deg) translateX(750%);
}


Teşekkürler hocam elinize bilginize sağlık konu kilitlenebilir ...
Cevapla
Bunu Beğenenler:

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
Star - Yıldız [1.8] DropDown Menü Çalışmıyor! korkusuz212 2 224 24-08-2017, Saat:02:06
Son Yorum: korkusuz212
  Sol Üzerine Gelince Kayan Sidebar Menü batuhanbarut 6 527 22-02-2017, Saat:00:32
Son Yorum: batuhanbarut
  Kayan Menü batuhanbarut 6 582 19-02-2017, Saat:22:17
Son Yorum: batuhanbarut
  Butonlara hover efekti FRMTday 0 330 28-08-2016, Saat:13:33
Son Yorum: FRMTday
  [1.8] Header üst menü isteği Hazır olarak ferd16 1 505 17-06-2016, Saat:12:42
Son Yorum: ferd16



Konuyu Okuyanlar: 1 Ziyaretçi