Canlı incele Tablolar
Lapis Card Rows
Border spacing turns every row into a floating rounded card with its own shadow.
Tablolar
Tide Stacked Cards
The table collapses into compact cards where each cell prints its own label on the left.
- Stok kodu
- tbl-tide-stacked
- 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
- :hover:hover ve geçişlerle etkileşim efektleri
- ::before / ::after::before ve ::after ile katman kurma
CSS referansı
Tide Stacked Cards 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.
Tablolar kategorisindeki tüm efektler gibi bu efekt de tamamen ücretsizdir; ticari projelerde de kullanabilirsin. Kütüphanenin tamamı için Tablolar koleksiyonuna göz at.
Benzer tablo efektleri
TümüCanlı incele Tablolar
Amber Compact Rows
A dense log style table that packs six tight rows into a small amber panel.
Canlı incele Tablolar
Mesa Skeleton Rows
Placeholder bars stand in for the data and a shimmer sweeps row by row while loading.
Canlı incele Tablolar
Halo Room Compare
Amenity levels are drawn as radial gradient rings and hovering a row lays a halo around them.
Canlı incele Tablolar
Echo Film Ratings
Star ratings fill part way by clipping a hard stop gradient straight into the glyph text.
Canlı incele Tablolar
Ratchet Quota Gauges
Plan usage gauges fill in discrete notches with a stepped timing function instead of gliding.
Canlı incele Tablolar
Valley Currency Column
Accounting alignment pins the currency sign left while the figures stay flush right.
Canlı incele Tablolar
Aurora Schedule Grid
A weekly planner grid where booked slots become coloured chips under a drifting header.