MyBB Depo Forum
[1.8] Tab Menü Hover Efekti - Baskı Önizleme

+- MyBB Depo Forum (https://mybbdepo.com)
+-- Forum: MyBB 1.8 Depo (https://mybbdepo.com/mybb-1-8-depo-forumu)
+--- Forum: MyBB 1.8 Soru ve Sorunlarınız (https://mybbdepo.com/mybb-1-8-soru-ve-sorunlariniz-forumu)
+--- Konu Başlığı: [1.8] Tab Menü Hover Efekti (/tab-menu-hover-efekti-konusu.html)

Tab Menü Hover Efekti - divxkosesi - 24-08-2015

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

Cvp: Tab Menü Hover Efekti - usameavci - 24-08-2015

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;
}


Cvp: Tab Menü Hover Efekti - divxkosesi - 24-08-2015

(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 ?

Cvp: Tab Menü Hover Efekti - usameavci - 24-08-2015

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%);
}


Cvp: Tab Menü Hover Efekti - divxkosesi - 24-08-2015

(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 ...