Naučte sa, ako vytvoriť tento atraktívny komponent a použiť ho na dodanie profesionálneho vzhľadu svojim webovým návrhom.

Hoci sa komponenty karty môžu zdať jednoduché, pri ich vytváraní je potrebné zvážiť špecifické kritériá. Na začiatok sa stretnete s rôznymi typmi komponentov kariet a ako webový vývojár musíte zabezpečiť, aby bolo vaše rozhranie prístupné.

Zistite, ako zostaviť komponenty kariet pomocou HTML a CSS, a získajte informácie o prístupnosti a prispôsobení.

Štruktúra HTML pre komponenty karty

Anatómia karty zahŕňa obal na kartu, jej hlavičku, obrázok a telo a voliteľnú pätu karty.

Vytvoríte tri jednoduché komponenty karty: obsah, produkt a profilovú kartu. Toto sú niektoré z najbežnejších typov kariet, ktoré nájdete na webe.

Začnite vytvorením kontajnera div, vnorením troch ďalších značiek div s atribútmi triedy pre každú kartu v ňom, s príslušnými podriadenými prvkami pre každú z troch kariet. Mali by ste použiť prvky, ktoré zodpovedajú za všetky časti v anatómii karty. Napríklad karta s obsahom má značku obrázka pre médiá, značku h3 pre názov a značku p pre text.

instagram viewer 
<divtrieda="kartový kontajner">
 Karta obsahu 
<divtrieda="obsahová karta">
<imgsrc=" https://images.unsplash.com/photo-1500989145603-8e7ef71d639e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"alt="Pracovný priestor s notebookom s klávesnicou, šálkou kávy a slúchadlom">
<h3>Názovh3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad
 extracturi explicabo molestiae natus magnam rem...p>
<ahref="#">Čítaj viaca>
div>
 Karta produktu 
<divtrieda="produktová karta">
<imgsrc=" https://images.unsplash.com/photo-1505740420928-5e560c06d30e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"alt="Slúchadlá na žltom pozadí">
<h3>Meno Produktuh3>
<p>$19.99p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.p>
<ahref="#"><tlačidlo>Pridať do košíkatlačidlo>a>
div>
 Karta profilu 
<divtrieda="profilová karta">
<imgsrc=" https://images.unsplash.com/photo-1535713875002-d1d0cf377fde? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"alt="Biely muž v čiernej košeli s gombíkmi">
<h3>John Doeh3>
<p>Web Developerp>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?p>
<ahref="#"trieda="odkaz na profil">Prezrieť profila>
div>
div>

Takto by to malo v predvolenom nastavení vyzerať vo vašom prehliadači pred použitím akéhokoľvek vlastného štýlu:

Ak chcete vytvoriť viac kariet alebo zahrnúť viac obsahu do jednej karty, urobte tak skôr, ako budete pokračovať.

Štýl CSS pre komponenty karty

Pomocou CSS môžete individuálne naštylizovať každú kartu, aby bola vizuálne príťažlivá. Použite univerzálny volič resetovať marže, vypchávkya pomocou polohy box-size. Potom nádobu upravte tak, že jej dáte vypchávku, aby ste vytvorili priestor.

​​​​​​* {
marža: 0;
vypchávka: 0;
box-size: border-box;
}
.karta-kontajner {
vypchávka: 20px;
}

Potom použite viacnásobný volič pre všetky karty, dajte mu okraj, aby sa okolo každej karty vytvoril priestor, a nastavte displej a flex-direction pre rozloženie. Nastavte tiež okraj na definovanie kariet, polomer okraja pre niektoré krivky a maximálnu šírku pre odozvu.

.obsah-karta,
.produktová karta,
.profil-karta {
marža: 20px;
displej: flex;
flex-direction: stĺpec;
hranica: 2pxpevný#ccc;
hraničný polomer: 7px;
max-šírka: 250px;
}

Teraz sa zamerajte na každú kartu, začnite kartou s obsahom a dajte jej farbu pozadia a výplň. Pridajte selektory potomkov pre prvky na karte obsahu.

Štýl obrázka pomocou max-šírka a hraničný polomer. Nastavte okraj, skupinu písiem a veľkosť písma pre h3. Pre značku ukotvenia odstráňte dekoráciu textu a nastavte farbu, horný okraj a veľkosť písma.

.obsah-karta {
pozadie: #E9724C;
vypchávka: 10px;
}
.obsah-kartaimg {
max-šírka: 100%;
hraničný polomer: 5px;
}


.obsah-kartah3 {
marža: 10px 0;
font-family: monopriestor;
veľkosť písma: 1.5rem;
}
.obsah-kartaa {
text-dekorácia: žiadny;
farba: #6f2ed8;
marža: 12 pixelov 0 7px 0;
veľkosť písma: 1rem;
}

Karta produktu si bude vyžadovať viac štýlu, pretože obsahuje ďalšie prvky. Vytvorte selektory pre každý podradený prvok a podľa toho ich upravte.

The tlačidlo obsahuje najviac atribútov štýlu na dosiahnutie efektu výzvy na akciu. Zarovnajte iba tlačidlo doprava nastavením vlastného zarovnania na ohybný koniec vo voliči kotvy.

.produktová kartaimg {
hraničný polomer: 5px 5px 0 0;
šírka: 100%;
}
.produktová kartah3 {
marža: 5px 10px;
font-family: monopriestor;
veľkosť písma: 1.5rem;
}


.produktová kartap {
marža: 5px 10px;
font-family: Gruzínsko, 'TimesNovýRoman', Times, serif;
}


.produktová kartaa {
zarovnať sa: ohybný koniec;
}
.produktová kartatlačidlo {
šírka: 100px;
výška: 30px;
marža: 10px;
hranica: 1pxpevný#8f3642;
hraničný polomer: 4px;
farba pozadia: #FFC857;
font-weight: 700;
kurzor: ukazovateľ;
}

Nakoniec upravte štýl karty profilu. Nastavte polomer okraja v pravom hornom a ľavom hornom rohu obrázka tak, aby zodpovedal kontajneru. V prípade potreby upravte veľkosť a prispôsobenie obrázka. Na definovanie textu použite aspoň dva typy písma a doplnkové farby. Môžete tiež vytvoriť akčný prvok – t.j. kotviaca značka – vyniknite s a hranica.

.profil-kartaimg {
hraničný polomer: 5px 5px 0 0;
výška: 200px;
objekt-fit: kryt;
}
.profil-kartah3 {
marža: 10px;
font-family: monopriestor;
veľkosť písma: 1.5rem;
}


.profil-kartap:prvého typu {
marža: 0 pixelov 10px;
font-family: 'TimesNovýRoman', Times, serif;
farba: chrpa modrá;
}


.profil-kartap:posledný typ {
marža: 5px 10px;
veľkosť písma: 0.9rem;
}
.profil-kartaa {
text-dekorácia: žiadny;
marža: 5px 10px 10px 10px;
vypchávka: 5px 15px;
zarovnať sa: stred;
hranica: 1pxpevnýchrpa modrá;
hraničný polomer: 15px;
farba: čierna;
font-family: monopriestor;
font-weight: 500;
}

Po úprave by vaše karty mali vyzerať takto:

Rozloženie a flexibilita karty

Rýchlosť odozvy je životne dôležitá na zabezpečenie bezproblémového zážitku s rozhraním naprieč zariadeniami. Môžeš použite buď CSS Flexbox alebo CSS Grid pre rozloženie. Nakoniec môžete použite mediálne dotazy na odozvu.

Pomocou CSS Flexbox

po prvé, pridajte atribút display a nastavte ho na flex na výber kontajnera kariet. Použite flex-balenie a nastavte ho tak, aby sa kartičky zabalili do malej veľkosti obrazovky.

Tiež nastavte align-items a ospravedlniť-obsah vlastnosti podľa vašich predstáv.

​​​​​​.karta-kontajner {
vypchávka: 20px;
displej: flex;
flex-balenie: obal;
align-items: stred;
ospravedlniť-obsah: priestor-rovnomerne;
}

Stránka by mala vyzerať takto:

To uzatvára odozvu na väčších veľkostiach obrazovky. Pre menšiu zobrazovanú oblasť, ako je napríklad mobilný telefón, môžete použiť pravidlo dopytu na médiá a nastaviť maximálnu šírku.

V rámci mediálneho dotazu určite, ktoré prvky chcete zmeniť. V tomto prípade sa zmení kontajner karty.

Nastaviť flex-direction do stĺpec, takže karty sa ukladajú vertikálne. Ak chcete karty zobraziť v strede obrazovky vodorovne, nastavte vlastnosti justify-content a align-items na stred:

@media obrazovke a (maximálna šírka:480 pixelov) {
.karta-kontajner {
flex-direction: stĺpec;
ospravedlniť-obsah: stred;
align-items: stred;
 }
}

Ak chcete vidieť efekt mediálneho dopytu, skontrolujte zapnutý kód CodePen.

Použitie mriežky CSS

Najprv nastavte zobrazenie kontajnera kariet na mriežku. Použite mriežka-šablóna-stĺpce aby sa kartám mohla automaticky prispôsobiť ich šírka. Použite a grid-gap pre medzery medzi kartami. Použite zarovnať-položky na vycentrovanie kariet.

.karta-kontajner {
vypchávka: 20px;
displej: mriežka;
mriežka-šablóna-stĺpce: opakovať(automatické prispôsobenie, minmax(300px, 1fr));
grid-gap: 20px;
zarovnať-položky: stred;
}

Stránka by mala vyzerať takto:

V prípade mobilných obrazoviek použite dopyt na médiá. V rámci dotazu upravte rozloženie mriežky pre menšie výrezy. Set mriežka-šablóna-stĺpce do 1fr aby každá karta zaberala celú šírku. Tiež nastavenie zarovnať-položky a align-items vlastnosti na stred vycentrujú karty horizontálne aj vertikálne.

@media obrazovke a (maximálna šírka:480 pixelov) {
.karta-kontajner {
mriežka-šablóna-stĺpce: 1fr;
zarovnať-položky: stred;
align-items: stred;
 }
}

Autor: kombinovanie CSS Grid a mediálnych dopytov, karty sa na väčších obrazovkách zabalia a na menších obrazovkách uložia vertikálne, čím sa dosiahne responzívne rozloženie kariet. Ak chcete vidieť efekt mediálneho dopytu, skontrolujte zapnutý kód CodePen.

Úvahy o prístupnosti komponentov karty

Je dôležité zabezpečiť, aby boli komponenty karty, ktoré vytvoríte, prístupné pre všetkých používateľov vrátane tých so zdravotným postihnutím. Tu je niekoľko kľúčových úvah, aby boli komponenty karty prístupnejšie:

  • Sémantické HTML
  • Navigácia pomocou klávesnice
  • Štýly zamerania
  • Štítky a roly ARIA
  • Alternatívny text
  • Správna štruktúra nadpisov
  • Farebný kontrast

Implementáciou týchto úvah o prístupnosti môžu weboví vývojári zabezpečiť, aby boli komponenty karty inkluzívne.

Prispôsobenie a ďalšie skúmanie

Môžete ísť ďalej s prispôsobením komponentu karty. Tu je niekoľko nápadov, ktoré môžete preskúmať:

  • Prechody a animácie
  • Štýly obrázkov
  • Pozadie a farebné schémy
  • Štýly okrajov
  • Interaktívne prvky

Existuje mnoho rôznych spôsobov, ako si môžete prispôsobiť komponenty karty, takže neváhajte experimentovať.

Vytvárajte vizuálne príťažlivé a citlivé kartové komponenty

Komponenty karty môžu hrať úlohu takmer na každej webovej stránke. Vytvorenie pomocou HTML a CSS je jednoduché, ale dôležité je aj vedieť, ako zvládnuť prístupnosť.

Existujú aj ďalšie efekty CSS, ktoré môžete vyskúšať, napríklad filtre CSS a režim prelínania pre vizuálne efekty. Precvičte si vytváranie viac s rôznymi prispôsobeniami pre vizuálnu príťažlivosť.