Lull Size Chart
A hidden checkbox swaps the whole chart between centimetres and inches with no script at all.
Real checkboxes drive the row highlight through the has selector with no script at all.
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.
A hidden checkbox swaps the whole chart between centimetres and inches with no script at all.
Real checkboxes become sliding switches and every enabled flag tints its own row through has.
The selected row keeps a coral rail on its left edge and hovering previews it.
Ticking an ingredient kindles its box warm, rules a line through the name and fades the amount.
Pointing at any cell lights the whole column through a pure CSS has() selector.
A soft rounded shell clips the table so the first and last rows curve with it.
Resource usage is drawn as a segmented LED strip and the overloaded lane strains in warm light.
Each row embeds a tiny bar sparkline whose columns grow in one after another.