Canlı incele Sekmeler
Brass Pill Tabs
A polished brass pill slides behind the labels while the panels cross fade.
- Stok kodu
- tab-glide-glass
- Lisans
- Ücretsiz
Canlı önizleme herkese açıktır. Kod sekmeleri, kopyalama, kaynak API'si ve izole önizleme belgesi üyelik gerektirir.
Üyelik gerekli
Kaynak kodu görmek için ücretsiz üye ol
HTML, CSS, React çıktısı, kopyalama ve tarayıcı editörü giriş yaptıktan sonra açılır.
Bu efektte bir sorun mu var, yoksa daha iyisini mi yazdın? Düzeltme gönder — onaylanırsa puan kazanırsın.
Sorun bildir veya düzeltKullanılan teknikler
Bu efektte kullanılan CSS teknikleri — her biri canlı örnekli bir rehbere ya da özelliğin referans sayfasına bağlanır.
Rehberler
- @keyframes@keyframes ile CSS animasyonu
- :hover:hover ve geçişlerle etkileşim efektleri
- backdrop-filterbackdrop-filter ile cam efekti
CSS referansı
Glide Glass Tabs nasıl kullanılır?
- 1. HTML parçasını sayfanda kullanmak istediğin yere yapıştır.
- 2. CSS bloğunu stil dosyana veya bir
<style>etiketine ekle. - 3. Renkleri ve süreleri kendi tasarımına göre değiştir — bağımlılık yok, saf CSS.
Sekmeler kategorisindeki tüm efektler gibi bu efekt de tamamen ücretsizdir; ticari projelerde de kullanabilirsin. Kütüphanenin tamamı için Sekmeler koleksiyonuna göz at.
Benzer sekme efektleri
TümüCanlı incele Sekmeler
Flux Holographic Tabs
An iridescent foil surface whose rainbow sheen keeps travelling over the chosen tab.
Canlı incele Sekmeler
Ivory Progress Tabs
An ivory progress line under the panel grows as later tabs are selected.
Canlı incele Sekmeler
Wander Bauhaus Tabs
Primary shapes on a striped ground; the ground itself shifts instead of an indicator.
Canlı incele Sekmeler
Girder Report Type Tabs
Report tabs sitting on a truss whose zigzag shifts under the active span.
Canlı incele Sekmeler
Onyx Folder Tabs
Browser style folder tabs whose active sheet merges into the panel below.
Canlı incele Sekmeler
Summit Full Width Tabs
Three edge to edge cells split the full width and the chosen one fills to the seams.
Canlı incele Sekmeler
Bloom Monochrome Tabs
Pure black and white with no colour at all; the active label gains weight and blooms.