Sužinokite, kaip sukurti šį patrauklų komponentą ir naudokite jį, kad savo interneto dizainą pajustų profesionaliai.

Nors kortelės komponentai gali atrodyti paprasti, juos kuriant reikia atsižvelgti į konkrečius kriterijus. Pirmiausia susidursite su įvairių tipų kortelės komponentais ir, kaip žiniatinklio kūrėjas, turite užtikrinti, kad jūsų sąsaja būtų pasiekiama.

Sužinokite, kaip sukurti kortelės komponentus naudojant HTML ir CSS, ir sužinokite apie pritaikymą neįgaliesiems bei pritaikymą.

Kortelės komponentų HTML struktūra

Kortelės anatomija apima kortelės talpyklą, jos antraštę, vaizdą ir turinį bei pasirenkamą kortelės poraštę.

Sukursite tris paprastus kortelių komponentus: turinio, produkto ir profilio korteles. Tai yra keletas dažniausiai internete randamų kortelių tipų.

Pradėkite nuo sudėtinio rodinio „div“ kūrimo, įterpdami dar tris „div“ žymas su klasės atributais kiekvienai kortelei, su atitinkamais antriniais elementais kiekvienai iš trijų kortelių. Turėtumėte naudoti elementus, kurie atspindi visas kortelės anatomijos dalis. Pavyzdžiui, turinio kortelėje yra vaizdo žyma medijai, h3 žyma pavadinimui ir p žyma tekstui.

instagram viewer 

<divklasė="kortelių konteineris">
 Turinio kortelė 
<divklasė="turinio kortelė">
<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=„Darbo vieta su klaviatūros užrašų knygele, kavos puodeliu ir ausine“>
<h3>Pavadinimash3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reklama
 išskyrus explicabo molestiae natus magnam rem...p>
<ahref="#">Skaityti daugiaua>
div>
 Produkto kortelė 
<divklasė="produkto kortelė">
<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="Ausinės geltoname fone">
<h3>produkto pavadinimash3>
<p>$19.99p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.p>
<ahref="#"><mygtuką>Į krepšelįmygtuką>a>
div>
 Profilio kortelė 
<divklasė="profilio kortelė">
<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="Baltas vyriškis, dėvintis juodus marškinius">
<h3>John Doeh3>
<p>Žiniatinklio kūrėjasp>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?p>
<ahref="#"klasė="profilio nuoroda">Peržiūrėti vartotojo profilįa>
div>
div>

Štai kaip tai turėtų atrodyti jūsų naršyklėje pagal numatytuosius nustatymus, prieš taikant bet kokį tinkintą stilių:

Jei norite sukurti daugiau kortelių arba įtraukti daugiau turinio į vieną kortelę, padarykite tai prieš tęsdami.

CSS stilius kortelių komponentams

Naudodami CSS galite individualiai formuoti kiekvieną kortelę, kad jos būtų vizualiai patrauklios. Naudokite universalųjį selektorių iš naujo nustatyti paraštės, kamšalai, ir padėtis naudojant dėžutės dydžio. Tada formuokite konteinerį, suteikdami jam paminkštinimą, kad atsirastumėte vietos.

​​​​​​* {
marža: 0;
kamšalas: 0;
dėžutės dydžio: kraštinė-dėžė;
}
.kortelė-konteineris {
kamšalas: 20px;
}

Tada naudokite kelių parinkiklį visoms kortelėms, palikite jam paraštę, kad aplink kiekvieną kortelę būtų vietos, ir nustatykite ekranas ir lankstumo kryptis maketavimui. Be to, nustatykite kraštinę, kad apibrėžtumėte korteles, kraštinės spindulį kai kurioms kreivėms ir maksimalų plotį, kad galėtumėte reaguoti.

.turinys-kortelė,
.produktas-kortelė,
.profilis-kortelė {
marža: 20px;
ekranas: lankstus;
lankstumo kryptis: stulpelyje;
siena: 2pxkietas#ccc;
pasienio spindulys: 7px;
maksimalus plotis: 250px;
}

Dabar sutelkite dėmesį į kiekvieną kortelę, pradedant turinio kortele, ir suteikite jai fono spalvą ir užpildymą. Pridėkite turinio kortelės elementų palikuonių parinkiklius.

Stilizuokite vaizdą naudodami maksimalus plotis ir sienos spindulys. Nustatykite h3 paraštę, šriftų šeimą ir šrifto dydį. Prieraišo žymai pašalinkite teksto puošmeną ir nustatykite spalvą, paraštės viršų ir šrifto dydį.

.turinys-kortelė {
fone: #E9724C;
kamšalas: 10px;
}
.turinys-kortelėimg {
maksimalus plotis: 100%;
pasienio spindulys: 5px;
}


.turinys-kortelėh3 {
marža: 10px 0;
šrifto šeima: monospace;
šrifto dydis: 1.5rem;
}
.turinys-kortelėa {
tekstas-dekoravimas: nė vienas;
spalva: #6f2ed8;
marža:12px 0 7px 0;
šrifto dydis: 1rem;
}

Produkto kortelei reikės daugiau stiliaus dėl papildomų elementų. Sukurkite kiekvieno vaiko elemento parinkiklius ir atitinkamai juos stilizuokite.

The mygtuką elemente yra daugiausia stiliaus atributų, kad būtų pasiektas raginimo veikti efektas. Sulygiuokite tik mygtuką į dešinę, inkaro parinkiklyje nustatydami lygiavimo funkciją į lanksčią galą.

.produktas-kortelėimg {
pasienio spindulys: 5px 5px 0 0;
plotis: 100%;
}
.produktas-kortelėh3 {
marža: 5px 10px;
šrifto šeima: monospace;
šrifto dydis: 1.5rem;
}


.produktas-kortelėp {
marža: 5px 10px;
šrifto šeima: Gruzija, 'LaikaiNaujaRomanas', Laikai, serifas;
}


.produktas-kortelėa {
lygiuotis-savaime: lankstus galas;
}
.produktas-kortelėmygtuką {
plotis: 100px;
aukščio: 30px;
marža: 10px;
siena: 1pxkietas#8f3642;
pasienio spindulys: 4px;
fono spalva: #FFC857;
šrifto svoris: 700;
žymeklį: rodyklė;
}

Galiausiai formuokite profilio kortelę. Nustatykite kraštinės spindulį viršutiniame dešiniajame ir viršutiniame kairiajame vaizdo kampe, kad jis atitiktų sudėtinį rodinį. Jei reikia, pakoreguokite vaizdo dydį ir pritaikykite. Apibrėžimui tekstuose naudokite bent du šriftų tipus ir papildomas spalvas. Taip pat galite padaryti veiksmą elementą, t.y. inkaro žyma – išsiskirkite a siena.

.profilis-kortelėimg {
pasienio spindulys: 5px 5px 0 0;
aukščio: 200px;
tinkamas objektui: viršelis;
}
.profilis-kortelėh3 {
marža: 10px;
šrifto šeima: monospace;
šrifto dydis: 1.5rem;
}


.profilis-kortelėp:pirmasis tipo {
marža:0px 10px;
šrifto šeima: 'LaikaiNaujaRomanas', Laikai, serifas;
spalva: rugiagėlių mėlyna;
}


.profilis-kortelėp:paskutinis tipo {
marža: 5px 10px;
šrifto dydis: 0.9rem;
}
.profilis-kortelėa {
tekstas-dekoravimas: nė vienas;
marža: 5px 10px 10px 10px;
kamšalas: 5px 15px;
lygiuotis-savaime: centras;
siena: 1pxkietasrugiagėlių mėlyna;
pasienio spindulys: 15px;
spalva: juodas;
šrifto šeima: monospace;
šrifto svoris: 500;
}

Po stiliaus jūsų kortelės turėtų atrodyti taip:

Kortelės išdėstymas ir lankstumas

Reagavimas yra labai svarbus norint užtikrinti sklandžią sąsają visuose įrenginiuose. Tu gali naudokite CSS Flexbox arba CSS Grid dėl išdėstymo. Pagaliau tu gali reagavimui naudokite medijos užklausas.

Naudojant CSS Flexbox

Pirma, pridėkite rodymo atributą ir nustatykite jį į flex kortelės konteinerio parinkiklyje. Užtepkite lanksčią apvyniojimą ir nustatykite, kad kortelės būtų apvyniotos mažo dydžio ekrane.

Taip pat nustatykite išlyginti elementus ir pateisinti-turinys savybės pagal jūsų pageidavimus.

​​​​​​.kortelė-konteineris {
kamšalas: 20px;
ekranas: lankstus;
lankstus įvyniojimas: apvynioti;
išlyginti elementus: centras;
pateisinti-turinys: erdvė-tolygiai;
}

Puslapis turėtų atrodyti taip:

Tai lemia didesnio dydžio ekrano reagavimą. Jei norite naudoti mažesnę peržiūros sritį, pvz., mobilųjį telefoną, galite naudoti medijos užklausos taisyklę ir nustatyti maksimalų plotį.

Medijos užklausoje nustatykite, kuriuos elementus norite pakeisti. Tokiu atveju kortelės talpykla pasikeis.

Nustatyti lankstumo kryptis į stulpelyje, todėl kortelės sukraunamos vertikaliai. Norėdami, kad kortelės būtų rodomos ekrano centre, horizontaliai, nustatykite turinio lygiavimo ir elementų lygiavimo ypatybes į centrą:

@media ekranas ir (maksimalus plotis:480 pikselių) {
.kortelė-konteineris {
lankstumo kryptis: stulpelyje;
pateisinti-turinys: centras;
išlyginti elementus: centras;
 }
}

Norėdami pamatyti medijos užklausos efektą, patikrinkite įjungtą kodą CodePen.

Naudojant CSS tinklelį

Pirmiausia nustatykite kortelių talpyklos ekraną į tinklelį. Naudokite tinklelis-šablonas-stulpeliai kad kortelės automatiškai reguliuotų savo plotį. Naudoti tinklelis-tarpelis tarpams tarp kortelių. Naudokite pateisinti-elementai centruoti korteles.

.kortelė-konteineris {
kamšalas: 20px;
ekranas: tinklelis;
tinklelis-šablonas-stulpeliai: kartoti(automatinis pritaikymas, minmax(300px, 1fr));
tinklelis-tarpelis: 20px;
pateisinti-elementai: centras;
}

Puslapis turėtų atrodyti taip:

Jei naudojate mobiliųjų įrenginių ekranus, taikykite medijos užklausą. Užklausoje modifikuokite tinklelio išdėstymą mažesnėms peržiūros sritims. Nustatyti tinklelis-šablonas-stulpeliai į 1fr kad kiekviena kortelė užimtų visą plotį. Taip pat nustatymas pateisinti-elementai ir išlyginti elementus ypatybės į centrą centruos korteles tiek horizontaliai, tiek vertikaliai.

@media ekranas ir (maksimalus plotis:480 pikselių) {
.kortelė-konteineris {
tinklelis-šablonas-stulpeliai: 1fr;
pateisinti-elementai: centras;
išlyginti elementus: centras;
 }
}

Autorius derinant CSS Grid ir medijos užklausas, kortelės bus apvyniotos didesniuose ekranuose ir vertikaliai sukraunamos ant mažesnių ekranų, todėl kortelių išdėstymas bus jautrus. Norėdami pamatyti medijos užklausos efektą, patikrinkite įjungtą kodą CodePen.

Kortelės komponentų prieinamumo aplinkybės

Labai svarbu užtikrinti, kad jūsų sukurti kortelės komponentai būtų prieinami visiems vartotojams, įskaitant turinčius negalią. Štai keletas pagrindinių aspektų, kad kortelės komponentai būtų prieinamesni:

  • Semantinis HTML
  • Klaviatūros navigacija
  • Fokusavimo stiliai
  • ARIA etiketės ir vaidmenys
  • Alternatyvus tekstas
  • Tinkama antraštės struktūra
  • Spalvų kontrastas

Įgyvendindami šias prieinamumo nuostatas, žiniatinklio kūrėjai gali užtikrinti, kad kortelės komponentai būtų įtraukti.

Pritaikymas ir tolesnis tyrimas

Galite tęsti savo kortelės komponento pritaikymą. Štai keletas idėjų, į kurias galite pažvelgti:

  • Perėjimai ir animacijos
  • Vaizdo stiliai
  • Fonas ir spalvų schemos
  • Kraštinių stiliai
  • Interaktyvūs elementai

Yra daugybė skirtingų būdų, kuriais galite tinkinti kortelės komponentus, todėl drąsiai eksperimentuokite.

Kurkite vizualiai patrauklius ir reaguojančius kortelės komponentus

Kortelės komponentai gali atlikti vaidmenį beveik bet kurioje svetainėje. Sukurti jį naudojant HTML ir CSS paprasta, tačiau taip pat svarbu žinoti, kaip elgtis su pritaikymu neįgaliesiems.

Yra ir kitų CSS efektų, kuriuos galite išbandyti, pvz., CSS filtrus ir vaizdo efektų maišymo režimą. Praktikuokite kurdami daugiau naudodami skirtingus pritaikymus, kad gautumėte vizualinį patrauklumą.