Vytváření vlastních komponent karet pomocí HTML a CSS

I když se komponenty karty mohou zdát jednoduché, existují specifická kritéria, která je třeba vzít v úvahu při jejich vytváření. Pro začátek se setkáte s různými typy komponent karet a jako webový vývojář musíte zajistit, aby bylo vaše rozhraní přístupné.

Zjistěte, jak sestavovat komponenty karet pomocí HTML a CSS, a zjistěte, jaké jsou aspekty přístupnosti a přizpůsobení.

Struktura HTML pro komponenty karet

Anatomie karty zahrnuje obal na kartu, její záhlaví, obrázek a tělo a volitelné zápatí karty.

Vytvoříte tři jednoduché součásti karty: kartu obsahu, produktu a karty profilu. Toto jsou některé z nejběžnějších typů karet nalezených na webu.

Začněte vytvořením kontejneru div, vnořením tří dalších značek div s atributy třídy pro každou kartu v něm, s příslušnými podřízenými prvky pro každou ze tří karet. Měli byste použít prvky, které odpovídají za všechny části v anatomii karty. Karta obsahu má například značku obrázku pro média, značku h3 pro nadpis a značku p pro text.

<divtřída="karta-kontejner">
 Obsahová karta 
<divtřída="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í prostor s notebookem s klávesnicí, šálkem kávy a sluchátkem">
<h3>Titulh3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inzerát
 extracturi explicabo molestiae natus magnam rem...p>
<Ahref="#">Přečtěte si víceA>
div>
 Produktová karta 
<divtřída="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="Sluchátka na žlutém pozadí">
<h3>jméno výrobkuh3>
<p>$19.99p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.p>
<Ahref="#"><knoflík>Přidat do košíkuknoflík>A>
div>
 Karta profilu 
<divtřída="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="Bílý muž v černé košili s knoflíky">
<h3>John Doeh3>
<p>Web Developerp>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?p>
<Ahref="#"třída="odkaz na profil">Prohlédnout profilA>
div>
div>

Zde je návod, jak by to mělo ve výchozím nastavení vypadat ve vašem prohlížeči, než použijete jakýkoli vlastní styl:

Pokud chcete vytvořit více karet nebo zahrnout více obsahu na jednu kartu, udělejte to, než budete pokračovat.

Styl CSS pro komponenty karty

Pomocí CSS můžete individuálně stylovat každou kartu, aby byla vizuálně přitažlivá. Použijte univerzální volič resetovat okraje, vycpávkya pomocí pozice velikost krabice. Poté nádobu upravte tak, že jí dáte vycpávku, abyste vytvořili prostor.

​​​​​​* {
okraj: 0;
vycpávka: 0;
velikost krabice: border-box;
}
.karta-kontejner {
vycpávka: 20px;
}

Dále použijte vícenásobný volič pro všechny karty, dejte mu okraj, aby kolem každé karty bylo místo, a nastavte Zobrazit a flex-direction pro rozložení. Také nastavte ohraničení pro definování karet, rádius ohraničení pro některé křivky a maximální šířku pro odezvu.

.obsahová karta,
.produktová karta,
.profil-karta {
okraj: 20px;
Zobrazit: flex;
flex-direction: sloupec;
okraj: 2pxpevný#ccc;
hraniční poloměr: 7px;
max. šířka: 250px;
}

Nyní se zaměřte na každou kartu, začněte kartou s obsahem a dejte jí barvu pozadí a výplň. Přidejte selektory potomků pro prvky na kartě obsahu.

Upravte styl obrázku pomocí max. šířka a hraniční poloměr. Nastavte okraj, skupinu písem a velikost písma pro h3. U kotvící značky odstraňte dekoraci textu a nastavte barvu, horní okraj a velikost písma.

.obsahová karta {
Pozadí: #E9724C;
vycpávka: 10px;
}
.obsahová kartaimg {
max. šířka: 100%;
hraniční poloměr: 5px;
}
.obsahová kartah3 {
okraj: 10px 0;
rodina písem: monoprostor;
velikost písma: 1.5rem;
}
.obsahová kartaA {
text-dekorace: žádný;
barva: #6f2ed8;
okraj: 12 pixelů 0 7px 0;
velikost písma: 1rem;
}

Produktová karta bude vyžadovat více stylu, protože obsahuje další prvky. Vytvořte selektory pro každý podřízený prvek a podle toho je upravte.

The knoflík obsahuje nejvíce atributů stylu pro dosažení efektu výzvy k akci. Zarovnejte pouze tlačítko doprava nastavením align-self na flex-end ve voliči kotvy.

.produktová kartaimg {
hraniční poloměr: 5px 5px 0 0;
šířka: 100%;
}
.produktová kartah3 {
okraj: 5px 10px;
rodina písem: monoprostor;
velikost písma: 1.5rem;
}
.produktová kartap {
okraj: 5px 10px;
rodina písem: Gruzie, 'TimesNovýřímský', Times, patka;
}
.produktová kartaA {
zarovnat se: ohebný konec;
}
.produktová kartaknoflík {
šířka: 100px;
výška: 30px;
okraj: 10px;
okraj: 1pxpevný#8f3642;
hraniční poloměr: 4px;
barva pozadí: #FFC857;
tloušťka písma: 700;
kurzor: ukazatel;
}

Nakonec upravte styl karty profilu. Nastavte poloměr ohraničení v pravém horním a levém horním rohu obrázku tak, aby odpovídal kontejneru. V případě potřeby upravte velikost a přizpůsobení obrazu. Pro definici použijte na textech alespoň dva typy písem a doplňkové barvy. Můžete také vytvořit akční prvek – tj. kotvící štítek – vynikne s a okraj.

.profil-kartaimg {
hraniční poloměr: 5px 5px 0 0;
výška: 200px;
objekt-fit: Pokrýt;
}
.profil-kartah3 {
okraj: 10px;
rodina písem: monoprostor;
velikost písma: 1.5rem;
}
.profil-kartap:první typu {
okraj: 0 pixelů 10px;
rodina písem: 'TimesNovýřímský', Times, patka;
barva: chrpa modrá;
}
.profil-kartap:poslední typ {
okraj: 5px 10px;
velikost písma: 0.9rem;
}
.profil-kartaA {
text-dekorace: žádný;
okraj: 5px 10px 10px 10px;
vycpávka: 5px 15px;
zarovnat se: centrum;
okraj: 1pxpevnýchrpa modrá;
hraniční poloměr: 15px;
barva: Černá;
rodina písem: monoprostor;
tloušťka písma: 500;
}

Po stylingu by vaše karty měly vypadat takto:

Rozložení a flexibilita karty

Odezva je zásadní pro zajištění bezproblémového používání rozhraní napříč zařízeními. Můžeš použijte buď CSS Flexbox nebo CSS Grid pro rozložení. Konečně můžete pro odezvu použijte dotazy na média.

Pomocí CSS Flexbox

Za prvé, přidejte atribut display a nastavte jej na flex na selektoru kontejneru karet. Použijte flex-wrap a nastavte jej tak, aby se karty mohly zabalit na malou velikost obrazovky.

Také nastavte zarovnat-položky a ospravedlnit-obsah vlastnosti dle vašeho přání.

​​​​​​.karta-kontejner {
vycpávka: 20px;
Zobrazit: flex;
flex-wrap: zabalit;
zarovnat-položky: centrum;
ospravedlnit-obsah: prostorově rovnoměrně;
}

Stránka by měla vypadat takto:

Tím končí odezva na větších obrazovkách. Pro menší výřez, jako je mobilní telefon, můžete použít pravidlo dotazu na média a nastavit maximální šířku.

V rámci dotazu na média určete, které prvky chcete změnit. V tomto případě se obal karty změní.

Nastav flex-direction na sloupec, takže se karty skládají svisle. Chcete-li karty zobrazit ve středu obrazovky vodorovně, nastavte vlastnosti justify-content a align-items na střed:

@media obrazovka a (max. šířka:480 pixelů) {
.karta-kontejner {
flex-direction: sloupec;
ospravedlnit-obsah: centrum;
zarovnat-položky: centrum;
 }
}

Chcete-li vidět efekt mediálního dotazu, zkontrolujte zapnutý kód CodePen.

Použití mřížky CSS

Nejprve nastavte zobrazení kontejneru karet na mřížku. Použití mřížka-šablona-sloupce aby si karty automaticky přizpůsobily svou šířku. Použijte a grid-gap pro rozestupy mezi kartami. Použití zarovnat-položky pro vycentrování karet.

.karta-kontejner {
vycpávka: 20px;
Zobrazit: mřížka;
mřížka-šablona-sloupce: opakovat(automatické přizpůsobení, minmax(300px, 1fr));
grid-gap: 20px;
zarovnat-položky: centrum;
}

Stránka by měla vypadat takto:

U mobilních obrazovek použijte dotaz na média. V rámci dotazu upravte rozložení mřížky pro menší výřezy. Soubor mřížka-šablona-sloupce na 1fr aby každá karta zabírala celou šířku. Také nastavení zarovnat-položky a zarovnat-položky vlastnosti na střed vycentrují karty vodorovně i svisle.

@media obrazovka a (max. šířka:480 pixelů) {
.karta-kontejner {
mřížka-šablona-sloupce: 1fr;
zarovnat-položky: centrum;
zarovnat-položky: centrum;
 }
}

Podle kombinující CSS Grid a mediální dotazy, karty se na větších obrazovkách zabalí a na menších obrazovkách se skládají svisle, čímž se dosáhne responzivního rozložení karet. Chcete-li vidět efekt mediálního dotazu, zkontrolujte zapnutý kód CodePen.

Úvahy o přístupnosti komponent karty

Je důležité zajistit, aby komponenty karet, které vytvoříte, byly přístupné všem uživatelům, včetně těch se zdravotním postižením. Zde je několik klíčových úvah, jak zpřístupnit komponenty karty:

• Sémantické HTML
• Navigace pomocí klávesnice
• Styly zaměření
• Štítky a role ARIA
• Alternativní text
• Správná struktura nadpisu
• Barevný kontrast

Implementací těchto aspektů přístupnosti mohou weboví vývojáři zajistit, aby byly komponenty karet inkluzivní.

Přizpůsobení a další průzkum

Můžete jít ještě dále s přizpůsobením komponenty karty. Zde je několik nápadů, na které se můžete podívat:

• Přechody a animace
• Styly obrázků
• Pozadí a barevná schémata
• Styly ohraničení
• Interaktivní prvky

Existuje mnoho různých způsobů, jak si můžete přizpůsobit komponenty karty, takže neváhejte experimentovat.

Vytvářejte vizuálně přitažlivé a citlivé kartové komponenty

Komponenty karty mohou hrát roli téměř na každém webu. Vytvoření pomocí HTML a CSS je snadné, ale důležité je také vědět, jak zacházet s přístupností.

Existují další efekty CSS, které můžete vyzkoušet, jako jsou filtry CSS a režim prolnutí pro vizuální efekty. Procvičte si vytváření více s různými úpravami pro vizuální přitažlivost.