HTML ve CSS ile Özel Kart Bileşenleri Oluşturma

Kart bileşenleri basit görünse de, bunları oluştururken göz önünde bulundurulması gereken belirli kriterler vardır. Başlamak için çeşitli türde kart bileşenleriyle karşılaşacaksınız ve bir web geliştiricisi olarak arayüzünüzün erişilebilir olduğundan emin olmalısınız.

HTML ve CSS kullanarak kart bileşenlerinin nasıl oluşturulacağını öğrenin ve erişilebilirlikle ilgili hususlar ve özelleştirme hakkında bilgi edinin.

Kart Bileşenleri için HTML Yapısı

Bir kartın anatomisi, kart kapsayıcısını, üstbilgisini, görüntüsünü, gövdesini ve isteğe bağlı bir kart altbilgisini içerir.

Üç basit kart bileşeni oluşturacaksınız: içerik, ürün ve profil kartları. Bunlar, web'de bulunan en yaygın kart türlerinden bazılarıdır.

Bir kapsayıcı div oluşturarak başlayın, içindeki her kart için sınıf özniteliklerine sahip üç div etiketini ve üç kartın her biri için uygun alt öğeleri iç içe geçirin. Kartın anatomisindeki tüm parçaları açıklayan öğeler kullanmalısınız. Örneğin, içerik kartında ortam için bir resim etiketi, başlık için bir h3 etiketi ve metin için bir p etiketi bulunur.

<divsınıf="kart kabı">
 İçerik Kartı 
<divsınıf="içerik kartı">
<imgkaynak=" https://images.unsplash.com/photo-1500989145603-8e7ef71d639e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=kırpma&w=200&q=80"alternatif="Klavyeli not defteri, bir fincan kahve ve kulaklığın olduğu bir çalışma alanı">
<h3>Başlıkh3>
<P>Lorem ipsum dolor sit amet consectetur a disipisicing elit. reklam
 molestiae natus magnam rem hariç açıklayıcı molestiae...P>
<Ahref="#">Devamını okuA>
div>
 Ürün Kartı 
<divsınıf="ürün kartı">
<imgkaynak=" https://images.unsplash.com/photo-1505740420928-5e560c06d30e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=kırpma&w=200&q=80"alternatif="Sarı arka planda kulaklıklar">
<h3>Ürün adıh3>
<P>$19.99P>
<P>Lorem ipsum dolor sit amet consectetur a disipisicing elit.
 Aspernatur, voluptatibus.P>
<Ahref="#"><düğme>Sepete ekledüğme>A>
div>
 Profil Kartı 
<divsınıf="profil kartı">
<imgkaynak=" https://images.unsplash.com/photo-1535713875002-d1d0cf377fde? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=kırpma&w=200&q=80"alternatif="Siyah bir düğmeli gömlek giyen beyaz bir erkek">
<h3>John Doeh3>
<P>Web GeliştiricisiP>
<P>Lorem ipsum dolor sit amet consectetur a disipisicing elit.
 Zaman zaman molestias repellat?P>
<Ahref="#"sınıf="profil bağlantısı">Profili GörüntüleA>
div>
div>

Herhangi bir özel stil uygulamadan önce varsayılan olarak tarayıcınızda bunun nasıl görünmesi gerektiği aşağıda açıklanmıştır:

Daha fazla kart oluşturmak veya tek bir karta daha fazla içerik eklemek istiyorsanız, devam etmeden önce bunu yapın.

Kart Bileşenleri için CSS Stili

CSS kullanarak, görsel olarak çekici hale getirmek için her bir kartı ayrı ayrı şekillendirebilirsiniz. Evrensel seçiciyi kullanın sıfırlamak kenar boşlukları, dolgularve kullanarak konumlandırın kutu boyutlandırma. Ardından, biraz boşluk yaratmak için kapsayıcıya dolgu vererek stil verin.

​​​​​​* {
marj: 0;
dolgu malzemesi: 0;
kutu boyutlandırma: sınır kutusu;
}
.kart kabı {
dolgu malzemesi: 20piksel;
}

Ardından, tüm kartlar için bir çoklu seçici kullanın, her kartın etrafında boşluk bırakması için bir kenar boşluğu verin ve görüntülemek Ve esnek yön düzen için. Ayrıca kartları tanımlamak için bir kenarlık, bazı eğriler için kenarlık yarıçapı ve yanıt verme için maksimum genişlik belirleyin.

.içerik kartı,
.ürün kartı,
.profil kartı {
marj: 20piksel;
görüntülemek: esnek;
esnek yön: kolon;
sınır: 2pikselsağlam#ccc;
sınır yarıçapı: 7piksel;
maksimum genişlik: 250piksel;
}

Şimdi içerik kartından başlayarak her karta odaklanın ve ona bir arka plan rengi ve dolgusu verin. İçerik kartındaki öğeler için alt seçiciler ekleyin.

ile görüntüye stil verin maksimum genişlik ve sınır yarıçapı. h3 için kenar boşluğunu, yazı tipi ailesini ve yazı tipi boyutunu ayarlayın. Bağlantı etiketi için metin dekorasyonunu kaldırın ve rengi, kenar boşluğunu ve yazı tipi boyutunu ayarlayın.

.içerik kartı {
arka plan: #E9724C;
dolgu malzemesi: 10piksel;
}
.içerik kartıimg {
maksimum genişlik: 100%;
sınır yarıçapı: 5piksel;
}
.içerik kartıh3 {
marj: 10piksel 0;
font ailesi: tek aralıklı;
yazı Boyutu: 1.5rem;
}
.içerik kartıA {
metin dekorasyonu: hiçbiri;
renk: #6f2ed8;
marj:12px 0 7piksel 0;
yazı Boyutu: 1rem;
}

Ürün kartı, ekstra unsurları nedeniyle daha fazla stil gerektirecektir. Her alt öğe için seçiciler oluşturun ve bunlara uygun şekilde stil verin.

bu düğme öğesi, harekete geçirici mesaj efektini elde etmek için en fazla stil özniteliğini içerir. Bağlantı seçicide kendini hizala seçeneğini esnek uca ayarlayarak yalnızca düğmeyi sağa hizalayın.

.ürün kartıimg {
sınır yarıçapı: 5piksel 5piksel 0 0;
Genişlik: 100%;
}
.ürün kartıh3 {
marj: 5piksel 10piksel;
font ailesi: tek aralıklı;
yazı Boyutu: 1.5rem;
}
.ürün kartıP {
marj: 5piksel 10piksel;
font ailesi: Gürcistan, 'ZamanlarYeniRoma', Zamanlar, serif;
}
.ürün kartıA {
kendini hizala: esnek uç;
}
.ürün kartıdüğme {
Genişlik: 100piksel;
yükseklik: 30piksel;
marj: 10piksel;
sınır: 1pikselsağlam#8f3642;
sınır yarıçapı: 4piksel;
arka plan rengi: #FFC857;
yazı tipi ağırlığı: 700;
imleç: Işaretçi;
}

Son olarak, profil kartını şekillendirin. Resmin sağ üst ve sol üst kısmındaki kenarlık yarıçapını kapsayıcıyla eşleşecek şekilde ayarlayın. Görüntü boyutunu ayarlayın ve gerekirse sığdırın. Tanım için metinlerde en az iki yazı tipi türü ve tamamlayıcı renkler kullanın. Ayrıca, eyleme geçirilebilir öğeyi de oluşturabilirsiniz; örn. bağlantı etiketi—bir ile öne çıkın sınır.

.profil kartıimg {
sınır yarıçapı: 5piksel 5piksel 0 0;
yükseklik: 200piksel;
nesneye uygun: kapak;
}
.profil kartıh3 {
marj: 10piksel;
font ailesi: tek aralıklı;
yazı Boyutu: 1.5rem;
}
.profil kartıP: türünün ilk örneği {
marj:0 piksel 10piksel;
font ailesi: 'ZamanlarYeniRoma', Zamanlar, serif;
renk: peygamber çiçeği mavisi;
}
.profil kartıP: türün sonuncusu {
marj: 5piksel 10piksel;
yazı Boyutu: 0.9rem;
}
.profil kartıA {
metin dekorasyonu: hiçbiri;
marj: 5piksel 10piksel 10piksel 10piksel;
dolgu malzemesi: 5piksel 15piksel;
kendini hizala: merkez;
sınır: 1pikselsağlampeygamber çiçeği mavisi;
sınır yarıçapı: 15piksel;
renk: siyah;
font ailesi: tek aralıklı;
yazı tipi ağırlığı: 500;
}

Şekillendirmeden sonra kartlarınız şöyle görünmelidir:

Kart Düzeni ve Esneklik

Duyarlılık, cihazlar arasında arayüzle sorunsuz bir deneyim sağlamak için hayati önem taşır. Yapabilirsiniz CSS Flexbox veya CSS Grid kullanın düzen için. Sonunda, yapabilirsin yanıt verme için medya sorgularını kullanma.

CSS Flexbox'ı Kullanma

İlk önce, bir görüntüleme özelliği ekleyin ve esnek olacak şekilde ayarlayın kart kabı seçicinizde. Flex-wrap uygulayın ve kartların küçük bir ekran boyutunda sarılabilmesi için sarmaya ayarlayın.

Ayrıca, hizalama öğeleri Ve haklı içerik Arzunuza göre özellikler.

​​​​​​.kart kabı {
dolgu malzemesi: 20piksel;
görüntülemek: esnek;
esnek sarma: dürüm;
hizalama öğeleri: merkez;
haklı içerik: eşit boşluk;
}

Sayfa şöyle görünmelidir:

Bu, daha büyük ekran boyutlarında yanıt vermeyi sonuçlandırır. Cep telefonu gibi daha küçük bir görüntü alanı için bir medya sorgu kuralı kullanabilir ve maksimum genişliği ayarlayabilirsiniz.

Medya sorgusunda hangi öğeleri değiştirmek istediğinizi belirleyin. Bu durumda kart kabı değişecektir.

Yı kur esnek yön ile kolon, böylece kartlar dikey olarak istiflenir. Kartları ekranın ortasında yatay olarak görüntülemek için, justify-content ve align-items özelliklerini merkeze ayarlayın:

@medya ekran Ve (maksimum genişlik:480 piksel) {
.kart kabı {
esnek yön: kolon;
haklı içerik: merkez;
hizalama öğeleri: merkez;
 }
}

Medya sorgu efektini görmek için, üzerindeki kodu kontrol edin. kod kalemi.

CSS Izgarasını Kullanma

İlk olarak, kart kabının ekranını ızgaraya ayarlayın. Kullanmak ızgara-şablon-sütunları kartların genişliklerini otomatik olarak ayarlamasına izin vermek için. Kullanın ızgara aralığı kartlar arasındaki boşluk için. Kullanmak haklı-öğeler kartları ortalamak için.

.kart kabı {
dolgu malzemesi: 20piksel;
görüntülemek: Kafes;
ızgara-şablon-sütunları: tekrarlamak(otomatik sığdırma, en az en çok(300piksel, 1Fr));
ızgara aralığı: 20piksel;
haklı-öğeler: merkez;
}

Sayfa şöyle görünmelidir:

Mobil ekranlar için bir medya sorgusu uygulayın. Sorgu içinde, daha küçük görünüm pencereleri için ızgara düzenini değiştirin. Ayarlamak ızgara-şablon-sütunları ile 1fr her kartın tam genişliği kaplamasını sağlamak için. Ayrıca, ayar haklı-öğeler Ve hizalama öğeleri property to center, kartları hem yatay hem de dikey olarak ortalar.

@medya ekran Ve (maksimum genişlik:480 piksel) {
.kart kabı {
ızgara-şablon-sütunları: 1Fr;
haklı-öğeler: merkez;
hizalama öğeleri: merkez;
 }
}

İle CSS Izgarası ve medya sorgularını birleştirme, kartlar daha büyük ekranlarda sarılacak ve daha küçük ekranlarda dikey olarak istiflenecek ve duyarlı bir kart düzeni elde edecek. Medya sorgu efektini görmek için, üzerindeki kodu kontrol edin. kod kalemi.

Kart Bileşenleri için Erişilebilirlikle İlgili Hususlar

Oluşturduğunuz kart bileşenlerinin, engelli olanlar da dahil olmak üzere tüm kullanıcılar tarafından erişilebilir olmasını sağlamak çok önemlidir. Kart bileşenlerini daha erişilebilir hale getirmek için bazı önemli hususlar şunlardır:

• Anlamsal HTML
• Klavye gezintisi
• Odak stilleri
• ARIA etiketleri ve rolleri
• Alternatif metin
• Uygun başlık yapısı
• Renk kontrastı

Web geliştiricileri, bu erişilebilirlik hususlarını uygulayarak kart bileşenlerinin kapsayıcı olmasını sağlayabilir.

Özelleştirme ve Daha Fazla Keşif

Kart bileşeninizi özelleştirerek daha da ileri gidebilirsiniz. İşte inceleyebileceğiniz bazı fikirler:

• Geçişler ve animasyonlar
• Görüntü stilleri
• Arka plan ve renk şemaları
• Kenarlık stilleri
• Etkileşimli öğeler

Kart bileşenlerinizi özelleştirebileceğiniz pek çok farklı yol vardır, bu nedenle denemekten çekinmeyin.

Görsel Olarak Çekici ve Duyarlı Kart Bileşenleri Oluşturun

Kart bileşenleri hemen hemen her web sitesinde rol oynayabilir. HTML ve CSS ile bir tane hazırlamak kolaydır, ancak erişilebilirliği nasıl ele alacağınızı bilmek de önemlidir.

CSS filtreleri ve görsel efektler için karışım modu gibi deneyebileceğiniz başka CSS efektleri de vardır. Görsel çekicilik için farklı özelleştirmelerle daha fazlasını yaratma alıştırması yapın.