Lapis Card Rows
Border spacing turns every row into a floating rounded card with its own shadow.
A soft rounded shell clips the table so the first and last rows curve with it.
Canlı önizleme herkese açıktır. Kod sekmeleri, kopyalama, kaynak API'si ve izole önizleme belgesi üyelik gerektirir.
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üzeltBu efektte kullanılan CSS teknikleri — her biri canlı örnekli bir rehbere ya da özelliğin referans sayfasına bağlanır.
<style> etiketine ekle.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.
Border spacing turns every row into a floating rounded card with its own shadow.
Hovering a row slides it sideways and drops a warm brass rail on its left edge.
Every row is a fully rounded pill and hovering slides a warm fill across it left to right.
Each cell stacks a bold primary line over a quiet secondary line of supporting detail.
A stripped down table where hovering a row draws an underline beneath its label.
Header buttons show a stacked caret pair and the active column lights its lower caret.
An inventory sheet where the row below the reorder point flags itself with a blinking triangle.
Long record values are clipped in place and reel sideways on hover instead of widening the table.