CSS Özel Özellikleriyle Kart Bileşeni

Kart bileşeni, içerik için kendi içinde bağımsız bir kapsayıcıdır. Tasarım hedefleri: aralık belirteçlerini kullanarak tutarlı iç boşluk, diğer ad belirteçlerini kullanarak temalandırılabilir renkler, JS olmadan duyarlı boyutlandırma ve CSS özel özellikleri aracılığıyla varyant desteği (yükseltilmiş, çerçeveli, düz).

Yapılandırılabilir değerler için CSS özel özelliklerine sahip tek bir .card sınıfı kullanın. İç elementler (üstbilgi, gövde, altbilgi), kartın kapsamındaki değerleri devralır. Bu, kod tabanındaki kart örnekleri arasındaki stil farklılaşmasını sınırlar.

Ayrı kural kümeleri yazmak yerine kart düzeyindeki özel özellikleri varyant sınıflarıyla geçersiz kılın. Varyant sınıflarının yalnızca değişen değişkenleri yeniden tanımlaması gerekir; değişmeyen özellikler, tekrar gerektirmeden temel değerleri otomatik olarak devralır.

Bir üst tema sınıfı --color-surface değerini değiştirdiğinde, o temanın içindeki tüm kartlar arka planlarını otomatik olarak günceller. Kartlara özel tema geçersiz kılma kodu gerekmez; diğer ad belirteci sistemi bunu şeffaf biçimde yönetir.

Akışkan iç boşluk için özel özellik geçersiz kılmalarıyla clamp() kullanın: --card-padding: clamp(1rem, 4vw, 2rem). Daha geniş görünüm alanları daha cömert iç boşluk alırken küçük görünüm alanları en az iç boşluğu alır; tümü tek bir belirteç tanımından denetlenir.

CSS Izgarasının auto-fill özelliğini minmax ile kullanan bir kart ızgarası, kendi kendini düzenleyen bir düzen oluşturur: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)). Kartlar kullanılabilir alanı doldurur ve medya sorgusu kırılma noktaları olmadan otomatik olarak alt satıra geçer.

Görsel kapsayıcısında aspect-ratio: 16/9 kullanarak kart görsellerinin en-boy oranlarını tutarlı tutun. Görseller kapsayıcıyı object-fit: cover ile doldurur; böylece kaynak görsellerin boyutları ne olursa olsun kart yükseklikleri aynı kalır.

Kartı biraz yükselten üzerine gelme ve odak içeren durumları ekleyin: transform: translateY(-2px) ve artırılmış box-shadow. Akıcı ve birleştirici dostu etkileşim geri bildirimi için transform ve box-shadow özelliklerini 200 ms ease geçişiyle canlandırın.

Genişletilmiş bir bağlantıyla kartın tamamını tıklanabilir yapın: kartı göreli konumlandırın, ana bağlantıyı inset: 0 ile mutlak konumlandırın. Ekran okuyucular bağlantı metnini okur; kaplama, fare kullananlar için kartı görsel olarak kaplar.

İçeriği CSS animasyonuyla oluşturulan iskelet parıltısıyla değiştiren bir .card--loading çeşidi ekleyin: background: linear-gradient(90deg, var(--color-skeleton-from), var(--color-skeleton-to)); bunu background-size: 200% ve animation: shimmer 1.5s infinite ile canlandırın.

Koyu modda --color-surface belirteci otomatik olarak açıktan koyuya değişir. Yükseltilmiş kartlar derinlik için box-shadow özelliğine güveniyorsa ve bu özellik koyu arka planlarda görünmez hâle geliyorsa, koyu moddaki yükselti algısını güçlendirmek için ince bir kenarlık ekleyin veya yüzey rengi karşıtlığını artırın.

CSS özel özellikleri, kural kümesinin tamamını yinelemeden kart çeşitlerinin oluşturulmasını nasıl sağlar?

CSS özel özellikleriyle bir kart bileşeni oluşturmak, esnek, temalandırılabilir ve çeşitlere duyarlı bir arayüz yapı taşı sağlar. Temel değişkenler varsayılanları belirler; çeşit sınıfları seçili değerleri geçersiz kılar; tema sınıfları ise değerleri genel olarak geçersiz kılar. Duyarlı boyutlandırma, erişilebilir bağlantılar ve yükleme durumlarıyla birleştirildiğinde bu yaklaşım tasarım sistemleri genelinde düzenli biçimde ölçeklenir.