Tworzenie niestandardowych komponentów kart za pomocą HTML i CSS

Chociaż elementy karty mogą wydawać się proste, podczas ich tworzenia należy wziąć pod uwagę określone kryteria. Na początku napotkasz różne rodzaje komponentów kart, a jako programista stron internetowych musisz zapewnić dostępność interfejsu.

Dowiedz się, jak tworzyć komponenty kart za pomocą HTML i CSS oraz zapoznaj się z zagadnieniami dotyczącymi ułatwień dostępu i dostosowywania.

Struktura HTML dla komponentów karty

Anatomia karty obejmuje pojemnik karty, jej nagłówek, obraz i treść oraz opcjonalną stopkę karty.

Utworzysz trzy proste komponenty karty: karty zawartości, produktu i profilu. Oto niektóre z najczęściej spotykanych typów kart w Internecie.

Zacznij od utworzenia kontenera div, zagnieżdżając trzy kolejne znaczniki div z atrybutami klasy dla każdej karty w nim zawartej, z odpowiednimi elementami potomnymi dla każdej z trzech kart. Powinieneś użyć elementów, które uwzględniają wszystkie części w anatomii karty. Na przykład karta zawartości zawiera znacznik obrazu dla multimediów, znacznik h3 dla tytułu i znacznik p dla tekstu.

<dzklasa=„pojemnik na karty”>
 Karta zawartości 
<dzklasa=„karta treści”>
<imgźródło=" https://images.unsplash.com/photo-1500989145603-8e7ef71d639e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=formatowanie&dopasowanie=przycinanie&w=200&q=80"alt=„Miejsce do pracy z notatnikiem na klawiaturze, filiżanką kawy i słuchawką”>
<h3>Tytułh3>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ogłoszenie
 z wyjątkiem explicabo molestiae natus magnam rem...P>
<Ahref="#">Czytaj więcejA>
dz>
 Karta produktu 
<dzklasa="karta-produktu">
<imgźródło=" https://images.unsplash.com/photo-1505740420928-5e560c06d30e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=formatowanie&dopasowanie=przycinanie&w=200&q=80"alt="Słuchawki na żółtym tle">
<h3>Nazwa produktuh3>
<P>$19.99P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.P>
<Ahref="#"><przycisk>Dodaj do koszykaprzycisk>A>
dz>
 Karta profilu 
<dzklasa=„karta profilu”>
<imgźródło=" https://images.unsplash.com/photo-1535713875002-d1d0cf377fde? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=formatowanie&dopasowanie=przycinanie&w=200&q=80"alt=„Biały mężczyzna ubrany w czarną koszulę zapinaną na guziki”>
<h3>nieznany z nazwiskah3>
<P>Twórca stron internetowychP>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?P>
<Ahref="#"klasa=„link do profilu”>Zobacz profilA>
dz>
dz>

Oto, jak powinno to wyglądać domyślnie w Twojej przeglądarce, zanim zastosujesz niestandardowy styl:

Jeśli chcesz utworzyć więcej kart lub zawrzeć więcej treści na jednej karcie, zrób to, zanim przejdziesz dalej.

Styl CSS dla komponentów kart

Korzystając z CSS, możesz indywidualnie stylizować każdą kartę, aby była atrakcyjna wizualnie. Użyj uniwersalnego selektora zresetować marginesy, wyściółkii pozycja za pomocą rozmiar pudełka. Następnie stylizuj pojemnik, nadając mu wypełnienie, aby uzyskać trochę miejsca.

​​​​​​* {
margines: 0;
wyściółka: 0;
rozmiar pudełka: ramka;
}
.pojemnik na karty {
wyściółka: 20piks;
}

Następnie użyj selektora wielokrotnego dla wszystkich kart, daj mu margines, aby zapewnić miejsce wokół każdej karty, i ustaw wyświetlacz I kierunek zginania dla układu. Ustaw również obramowanie, aby zdefiniować karty, promień obramowania dla niektórych krzywych i maksymalną szerokość dla responsywności.

.karta treści,
.karta-produktu,
.profil-karta {
margines: 20piks;
wyświetlacz: przewód;
kierunek zginania: kolumna;
granica: 2pikssolidny#ccc;
promień granicy: 7piks;
maksymalna szerokość: 250piks;
}

Teraz skup się na każdej karcie, zaczynając od karty zawartości, i nadaj jej kolor tła i wypełnienie. Dodaj selektory elementów podrzędnych dla elementów na karcie zawartości.

Stylizuj obraz za pomocą maksymalna szerokość i promień granicy. Ustaw margines, rodzinę czcionek i rozmiar czcionki dla h3. W przypadku znacznika zakotwiczenia usuń dekorację tekstu i ustaw kolor, górny margines i rozmiar czcionki.

.karta treści {
tło: #E9724C;
wyściółka: 10piks;
}
.karta treściimg {
maksymalna szerokość: 100%;
promień granicy: 5piks;
}
.karta treścih3 {
margines: 10piks 0;
rodzina czcionek: jednoprzestrzeń;
rozmiar czcionki: 1.5 rem;
}
.karta treściA {
dekoracja tekstu: nic;
kolor: #6f2ed8;
margines:12px 0 7piks 0;
rozmiar czcionki: 1Rem;
}

Karta produktu będzie wymagała więcej stylu ze względu na dodatkowe elementy. Utwórz selektory dla każdego elementu podrzędnego i odpowiednio je nadaj stylowi.

The przycisk element zawiera najwięcej atrybutów stylu, aby uzyskać efekt wezwania do działania. Wyrównaj tylko przycisk w prawo, ustawiając wyrównanie na elastyczny koniec w selektorze kotwicy.

.karta-produktuimg {
promień granicy: 5piks 5piks 0 0;
szerokość: 100%;
}
.karta-produktuh3 {
margines: 5piks 10piks;
rodzina czcionek: jednoprzestrzeń;
rozmiar czcionki: 1.5 rem;
}
.karta-produktuP {
margines: 5piks 10piks;
rodzina czcionek: Gruzja, 'CzasyNowyrzymski', Czasy, szeryfowy;
}
.karta-produktuA {
wyrównać siebie: elastyczny koniec;
}
.karta-produktuprzycisk {
szerokość: 100piks;
wysokość: 30piks;
margines: 10piks;
granica: 1pikssolidny#8f3642;
promień granicy: 4piks;
kolor tła: #FFC857;
grubość czcionki: 700;
kursor: wskaźnik;
}

Na koniec nadaj styl karcie profilu. Ustaw promień obramowania w prawym górnym i lewym górnym rogu obrazu, aby pasował do kontenera. Dostosuj rozmiar obrazu i dopasuj, jeśli to konieczne. Użyj co najmniej dwóch rodzajów czcionek i uzupełniających się kolorów w tekstach do zdefiniowania. Możesz także sprawić, że element, który można wykonać, np. tag kotwicy — wyróżnij się za pomocą a granica.

.profil-kartaimg {
promień granicy: 5piks 5piks 0 0;
wysokość: 200piks;
dopasowanie do obiektu: okładka;
}
.profil-kartah3 {
margines: 10piks;
rodzina czcionek: jednoprzestrzeń;
rozmiar czcionki: 1.5 rem;
}
.profil-kartaP:pierwszy w swoim rodzaju {
margines:0px 10piks;
rodzina czcionek: 'CzasyNowyrzymski', Czasy, szeryfowy;
kolor: chabrowy;
}
.profil-kartaP:ostatni z typu {
margines: 5piks 10piks;
rozmiar czcionki: 0.9rem;
}
.profil-kartaA {
dekoracja tekstu: nic;
margines: 5piks 10piks 10piks 10piks;
wyściółka: 5piks 15piks;
wyrównać siebie: Centrum;
granica: 1pikssolidnychabrowy;
promień granicy: 15piks;
kolor: czarny;
rodzina czcionek: jednoprzestrzeń;
grubość czcionki: 500;
}

Po stylizacji Twoje karty powinny wyglądać tak:

Układ kart i elastyczność

Szybkość reakcji jest niezbędna do zapewnienia bezproblemowego korzystania z interfejsu na różnych urządzeniach. Możesz użyj CSS Flexbox lub CSS Grid dla układu. Wreszcie możesz użyj zapytań o media, aby uzyskać responsywność.

Korzystanie z CSS Flexbox

Po pierwsze, dodaj atrybut wyświetlania i ustaw go na flex w selektorze pojemników na karty. Zastosuj folię elastyczną i ustaw ją na zawijanie, aby karty mogły się zawijać na małym ekranie.

Ustaw też tzw wyrównaj elementy I uzasadnij treść właściwości według własnego uznania.

​​​​​​.pojemnik na karty {
wyściółka: 20piks;
wyświetlacz: przewód;
flex-wrap: zawinąć;
wyrównaj elementy: Centrum;
uzasadnij treść: równomiernie;
}

Strona powinna wyglądać tak:

Na tym kończy się responsywność na większych ekranach. W przypadku mniejszego widocznego obszaru, takiego jak telefon komórkowy, możesz użyć reguły zapytania o media i ustawić maksymalną szerokość.

W zapytaniu o media określ, które elementy chcesz zmienić. W takim przypadku zmieni się pojemnik na karty.

Ustaw kierunek zginania Do kolumna, więc karty układają się pionowo. Aby wyświetlić karty na środku ekranu, poziomo, ustaw właściwości justify-content i align-items na środek:

@głoska bezdźwięczna ekran I (maksymalna szerokość:480 pikseli) {
.pojemnik na karty {
kierunek zginania: kolumna;
uzasadnij treść: Centrum;
wyrównaj elementy: Centrum;
 }
}

Aby zobaczyć efekt zapytania o media, sprawdź kod włączony CodePen.

Korzystanie z siatki CSS

Najpierw ustaw wyświetlanie kontenera kart na siatkę. Używać kolumny szablonu siatki aby karty automatycznie dostosowywały swoją szerokość. Użyć przerwa w siatce dla odstępów między kartami. Używać uzasadnij-pozycje aby wyśrodkować karty.

.pojemnik na karty {
wyściółka: 20piks;
wyświetlacz: siatka;
kolumny szablonu siatki: powtarzać(automatyczne dopasowanie, minimum maksimum(300piks, 1fr));
przerwa w siatce: 20piks;
uzasadnij-pozycje: Centrum;
}

Strona powinna wyglądać tak:

W przypadku ekranów mobilnych zastosuj zapytanie o media. W zapytaniu zmodyfikuj układ siatki dla mniejszych rzutni. Ustawić kolumny szablonu siatki Do 1fr aby każda karta zajmowała całą szerokość. Również ustawienie uzasadnij-pozycje I wyrównaj elementy właściwości do środka spowoduje wyśrodkowanie kart zarówno w poziomie, jak iw pionie.

@głoska bezdźwięczna ekran I (maksymalna szerokość:480 pikseli) {
.pojemnik na karty {
kolumny szablonu siatki: 1fr;
uzasadnij-pozycje: Centrum;
wyrównaj elementy: Centrum;
 }
}

Przez połączenie CSS Grid i zapytań o media, karty będą zawijać się na większych ekranach i układać pionowo na mniejszych ekranach, uzyskując responsywny układ kart. Aby zobaczyć efekt zapytania o media, sprawdź kod włączony CodePen.

Uwagi dotyczące ułatwień dostępu dla komponentów karty

Bardzo ważne jest, aby tworzone przez Ciebie komponenty kart były dostępne dla wszystkich użytkowników, w tym osób niepełnosprawnych. Oto kilka kluczowych kwestii, dzięki którym komponenty karty będą bardziej dostępne:

• Semantyczny HTML
• Nawigacja za pomocą klawiatury
• Style ostrości
• Etykiety i role ARIA
• Tekst alternatywny
• Właściwa struktura nagłówków
• Kontrast kolorów

Wdrażając te kwestie związane z ułatwieniami dostępu, twórcy stron internetowych mogą zapewnić, że komponenty kart są zintegrowane.

Personalizacja i dalsza eksploracja

Możesz pójść dalej, dostosowując komponent karty. Oto kilka pomysłów, którym możesz się przyjrzeć:

• Przejścia i animacje
• Style obrazu
• Schematy tła i kolorów
• Style obramowania
• Elementy interaktywne

Istnieje wiele różnych sposobów dostosowywania elementów karty, więc nie krępuj się eksperymentować.

Twórz atrakcyjne wizualnie i responsywne komponenty kart

Elementy karty mogą odgrywać rolę w prawie każdej witrynie internetowej. Stworzenie takiego za pomocą HTML i CSS jest łatwe, ale ważna jest również wiedza o tym, jak radzić sobie z ułatwieniami dostępu.

Istnieją inne efekty CSS, które możesz wypróbować, takie jak filtry CSS i tryb mieszania efektów wizualnych. Poćwicz tworzenie większej liczby różnych dostosowań, aby uzyskać atrakcyjność wizualną.