Pielāgotu kartes komponentu izveide, izmantojot HTML un CSS

Lai gan kartes komponenti var šķist vienkārši, ir noteikti kritēriji, kas jāņem vērā, tos veidojot. Sākumā jūs saskarsities ar dažādu veidu karšu komponentiem, un kā tīmekļa izstrādātājam jums ir jānodrošina, lai jūsu saskarne būtu pieejama.

Uzziniet, kā izveidot karšu komponentus, izmantojot HTML un CSS, un uzziniet par pieejamības apsvērumiem un pielāgošanu.

HTML struktūra karšu komponentiem

Kartes anatomija ietver kartīšu konteineru, tā galveni, attēlu un pamattekstu, kā arī izvēles kartītes kājeni.

Jūs izveidosit trīs vienkāršas kartes sastāvdaļas: satura, produkta un profila kartes. Šie ir daži no visizplatītākajiem karšu veidiem, kas atrodami tīmeklī.

Sāciet, izveidojot konteinera div, ligzdojot vēl trīs div tagus ar klases atribūtiem katrai tajā esošajai kartītei, ar atbilstošiem pakārtotajiem elementiem katrai no trim kartēm. Izmantojiet elementus, kas atspoguļo visas kartes anatomijas daļas. Piemēram, satura kartītei ir attēla tags multividei, h3 tags virsrakstam un p tags tekstam.

<divklasē="kartes konteiners">
 Satura karte 
<divklasē="satura karte">
<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="Darbvieta ar piezīmju grāmatiņu, kafijas tasi un austiņu">
<h3>Nosaukumsh3>
<lpp>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reklāma
 izņemot explicabo molestiae natus magnam rem...lpp>
<ahref="#">Lasīt vairāka>
div>
 Produkta karte 
<divklasē="produkta karte">
<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="Austiņas uz dzeltena fona">
<h3>produkta nosaukumsh3>
<lpp>$19.99lpp>
<lpp>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.lpp>
<ahref="#"><pogu>Pievienot grozampogu>a>
div>
 Profila karte 
<divklasē="profila karte">
<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="Balts vīrietis ar melnu pogām kreklu">
<h3>Džons Dūh3>
<lpp>Web izstrādātājslpp>
<lpp>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?lpp>
<ahref="#"klasē="profila saite">Skatīt profilua>
div>
div>

Lūk, kā tam vajadzētu izskatīties jūsu pārlūkprogrammā pēc noklusējuma, pirms lietojat pielāgotu stilu:

Ja vēlaties izveidot vairāk kartīšu vai iekļaut vairāk satura vienā kartītē, dariet to pirms turpināt.

CSS stils kartes komponentiem

Izmantojot CSS, varat individuāli veidot katras kartītes stilu, lai tā būtu vizuāli pievilcīga. Izmantojiet universālo selektoru lai atiestatītu piemales, polsterējumi, un novietojiet, izmantojot kastes izmēra noteikšana. Pēc tam ieveidojiet konteineru, piešķirot tam polsterējumu, lai radītu vietu.

​​​​​​* {
starpība: 0;
polsterējums: 0;
kastes izmēra noteikšana: apmale-box;
}
.card-container {
polsterējums: 20px;
}

Pēc tam izmantojiet vairākkārtēju atlasītāju visām kartēm, piešķiriet tai rezervi, lai ap katru karti nodrošinātu vietu, un iestatiet displejs un flex-virziens izkārtojumam. Iestatiet arī apmali, lai definētu kartes, apmales rādiusu dažām līknēm un maksimālo platumu reaģētspējai.

.satura karte,
.product-card,
.profils-karte {
starpība: 20px;
displejs: flex;
flex-virziens: kolonna;
robeža: 2pxciets#ccc;
robeža-rādiuss: 7px;
maksimālais platums: 250px;
}

Tagad koncentrējieties uz katru kartīti, sākot ar satura kartīti, un piešķiriet tai fona krāsu un polsterējumu. Pievienojiet satura kartītes elementu pēcteču atlasītājus.

Veidojiet attēla stilu ar maksimālais platums un robežas rādiuss. Iestatiet h3 piemali, fontu saimi un fonta lielumu. Enkura tagam noņemiet teksta apdari un iestatiet krāsu, augšmalas un fonta lielumu.

.satura karte {
fons: #E9724C;
polsterējums: 10px;
}
.satura karteimg {
maksimālais platums: 100%;
robeža-rādiuss: 5px;
}
.satura karteh3 {
starpība: 10px 0;
fontu ģimene: monotelpa;
fonta izmērs: 1.5rem;
}
.satura kartea {
teksta dekorēšana: neviens;
krāsa: #6f2ed8;
starpība:12 pikseļi 0 7px 0;
fonta izmērs: 1rem;
}

Produkta kartei būs nepieciešams vairāk stila tās papildu elementu dēļ. Izveidojiet atlasītājus katram bērna elementam un veidojiet tos atbilstoši.

The pogu elements satur visvairāk stila atribūtu, lai panāktu aicinājuma uz darbību efektu. Izlīdziniet tikai pogu pa labi, enkura atlasītājā iestatot pašlīdzināšanas funkciju uz elastīgu galu.

.product-cardimg {
robeža-rādiuss: 5px 5px 0 0;
platums: 100%;
}
.product-cardh3 {
starpība: 5px 10px;
fontu ģimene: monotelpa;
fonta izmērs: 1.5rem;
}
.product-cardlpp {
starpība: 5px 10px;
fontu ģimene: Gruzija, 'reizesJaunsRomāns', reizes, serifs;
}
.product-carda {
izlīdzināt-paši: flex-end;
}
.product-cardpogu {
platums: 100px;
augstums: 30px;
starpība: 10px;
robeža: 1pxciets#8f3642;
robeža-rādiuss: 4px;
fona krāsa: #FFC857;
fonta svars: 700;
kursors: rādītājs;
}

Visbeidzot noformējiet profila karti. Iestatiet apmales rādiusu attēla augšējā labajā un augšējā kreisajā stūrī, lai tas atbilstu konteineram. Ja nepieciešams, pielāgojiet attēla izmēru un pielāgojiet to. Definēšanai izmantojiet tekstos vismaz divus fontu veidus un papildu krāsas. Varat arī izveidot darbības elementu, t.i., enkura zīme — izcelties ar a robeža.

.profils-karteimg {
robeža-rādiuss: 5px 5px 0 0;
augstums: 200px;
objektam piemērots: piesegt;
}
.profils-karteh3 {
starpība: 10px;
fontu ģimene: monotelpa;
fonta izmērs: 1.5rem;
}
.profils-kartelpp:pirmais {
starpība:0px 10px;
fontu ģimene: 'reizesJaunsRomāns', reizes, serifs;
krāsa: rudzupuķu zils;
}
.profils-kartelpp:pēdējais {
starpība: 5px 10px;
fonta izmērs: 0.9rem;
}
.profils-kartea {
teksta dekorēšana: neviens;
starpība: 5px 10px 10px 10px;
polsterējums: 5px 15px;
izlīdzināt-paši: centrs;
robeža: 1pxcietsrudzupuķu zils;
robeža-rādiuss: 15px;
krāsa: melns;
fontu ģimene: monotelpa;
fonta svars: 500;
}

Pēc veidošanas kartēm vajadzētu izskatīties šādi:

Kartes izkārtojums un elastība

Atsaucība ir ļoti svarīga, lai nodrošinātu nevainojamu saskarni visās ierīcēs. Jūs varat izmantojiet CSS Flexbox vai CSS Grid izkārtojumam. Visbeidzot, jūs varat izmantojiet multivides vaicājumus, lai nodrošinātu atsaucību.

Izmantojot CSS Flexbox

Pirmkārt, pievienojiet displeja atribūtu un iestatiet to uz flex jūsu kartes konteinera atlasītājā. Uzklājiet elastīgo aptinumu un iestatiet to, lai kartītes varētu ietīt mazā ekrāna izmērā.

Tāpat iestatiet izlīdzināt vienumus un attaisnot-saturs īpašības pēc jūsu vēlmēm.

​​​​​​.card-container {
polsterējums: 20px;
displejs: flex;
flex-wrap: iesaiņojums;
izlīdzināt vienumus: centrs;
attaisnot-saturs: telpa-vienmērīgi;
}

Lapai vajadzētu izskatīties šādi:

Tas noslēdz atsaucību uz lielākiem ekrāna izmēriem. Mazākam skata logam, piemēram, mobilajam tālrunim, varat izmantot multivides vaicājuma kārtulu un iestatīt maksimālo platumu.

Multivides vaicājumā nosakiet, kurus elementus vēlaties mainīt. Šajā gadījumā karšu konteiners mainīsies.

Iestatiet flex-virziens uz kolonna, tāpēc kartītes ir sakrājušās vertikāli. Lai kartītes tiktu rādītas ekrāna centrā horizontāli, iestatiet satura pamatojumu un vienumu līdzināšanas rekvizītus centrā:

@media ekrāns un (maksimālais platums:480 pikseļi) {
.card-container {
flex-virziens: kolonna;
attaisnot-saturs: centrs;
izlīdzināt vienumus: centrs;
 }
}

Lai redzētu multivides vaicājuma efektu, pārbaudiet kodu CodePen.

Izmantojot CSS režģi

Vispirms iestatiet karšu konteinera displeju uz režģi. Izmantot režģis-veidne-kolonnas lai kartes automātiski pielāgotu platumu. Lieto režģa sprauga atstarpēm starp kartēm. Izmantot attaisnot-preces lai centrētu kartes.

.card-container {
polsterējums: 20px;
displejs: režģis;
režģis-veidne-kolonnas: atkārtojiet(automātiska pielāgošana, minmax(300px, 1fr));
režģa sprauga: 20px;
attaisnot-preces: centrs;
}

Lapai vajadzētu izskatīties šādi:

Mobilo ierīču ekrāniem lietojiet multivides vaicājumu. Vaicājumā mainiet režģa izkārtojumu mazākiem skatu portiem. Iestatīt režģis-veidne-kolonnas uz 1fr lai katra karte aizņemtu visu platumu. Arī iestatīšana attaisnot-preces un izlīdzināt vienumus Īpašības centrēšanai centrēs kartes gan horizontāli, gan vertikāli.

@media ekrāns un (maksimālais platums:480 pikseļi) {
.card-container {
režģis-veidne-kolonnas: 1fr;
attaisnot-preces: centrs;
izlīdzināt vienumus: centrs;
 }
}

Autors CSS Grid un multivides vaicājumu apvienošana, kartes tiks ietītas uz lielākiem ekrāniem un sakrautas vertikāli uz mazākiem ekrāniem, tādējādi nodrošinot adaptīvu karšu izkārtojumu. Lai redzētu multivides vaicājuma efektu, pārbaudiet kodu CodePen.

Kartes komponentu pieejamības apsvērumi

Ir ļoti svarīgi nodrošināt, lai jūsu izveidotie karšu komponenti būtu pieejami visiem lietotājiem, tostarp personām ar invaliditāti. Šeit ir daži galvenie apsvērumi, lai padarītu kartes komponentus pieejamākus.

• Semantiskais HTML
• Tastatūras navigācija
• Fokusa stili
• ARIA etiķetes un lomas
• Alternatīvais teksts
• Pareiza virsraksta struktūra
• Krāsu kontrasts

Ieviešot šos pieejamības apsvērumus, tīmekļa izstrādātāji var nodrošināt, ka kartes komponenti ir iekļauti.

Pielāgošana un tālāka izpēte

Varat iet tālāk, pielāgojot kartes komponentu. Šeit ir dažas idejas, kuras varat izpētīt:

• Pārejas un animācijas
• Attēlu stili
• Fona un krāsu shēmas
• Apmales stili
• Interaktīvie elementi

Ir daudz dažādu veidu, kā pielāgot kartes komponentus, tāpēc nekautrējieties eksperimentēt.

Izveidojiet vizuāli pievilcīgus un atsaucīgus kartes komponentus

Kartes komponentiem var būt nozīme gandrīz jebkurā vietnē. Tā izveide, izmantojot HTML un CSS, ir vienkārša, taču svarīga ir arī pieejamības pārvaldība.

Varat izmēģināt citus CSS efektus, piemēram, CSS filtrus un vizuālo efektu sajaukšanas režīmu. Praktizējiet radīt vairāk, izmantojot dažādus pielāgojumus vizuālai pievilcībai.