Kohandatud kaardikomponentide loomine HTML-i ja CSS-iga

Kuigi kaardi komponendid võivad tunduda lihtsad, tuleb nende loomisel arvestada konkreetsete kriteeriumidega. Alustuseks puutute kokku erinevat tüüpi kaardikomponentidega ja veebiarendajana peate tagama, et teie liides on juurdepääsetav.

Siit saate teada, kuidas luua kaardikomponente HTML-i ja CSS-i abil, ning tutvuda juurdepääsetavuse ja kohandamise kaalutlustega.

HTML-i struktuur kaardi komponentide jaoks

Kaardi anatoomia sisaldab kaardi konteinerit, selle päist, pilti ja keha ning valikulist kaardi jalust.

Loote kolm lihtsat kaardikomponenti: sisu-, toote- ja profiilikaardid. Need on mõned veebis levinumad kaarditüübid.

Alustage konteineri div loomisega, pesastage iga kaardi jaoks veel kolm div-märgendit koos klassiatribuutidega ja iga kolme kaardi jaoks sobivad alamelemendid. Peaksite kasutama elemente, mis kajastavad kõiki kaardi anatoomia osi. Näiteks sisukaardil on meediumi jaoks pildisilt, pealkirja jaoks märge h3 ja teksti jaoks märgend p.

<divklass="kaardikonteiner">
 Sisukaart 
<divklass="sisukaart">
<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="Tööala klaviatuuri märkmiku, kohvitassi ja kuulariga">
<h3>Pealkirih3>
<lk>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reklaam
 explicabo molestiae natus magnam rem...lk>
<ahref="#">Loe rohkema>
div>
 Tootekaart 
<divklass="tootekaart">
<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="Kõrvaklapid kollasel taustal">
<h3>tootenimih3>
<lk>$19.99lk>
<lk>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.lk>
<ahref="#"><nuppu>Lisa ostukorvinuppu>a>
div>
 Profiilikaart 
<divklass="profiilikaart">
<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="Valge mees, kes kannab musta nööbiga särki">
<h3>John Doeh3>
<lk>Veebiarendajalk>
<lk>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?lk>
<ahref="#"klass="profiili link">Näita profiilia>
div>
div>

Enne kohandatud stiili rakendamist peaks see teie brauseris vaikimisi välja nägema järgmine:

Kui soovite luua rohkem kaarte või lisada ühele kaardile rohkem sisu, tehke seda enne jätkamist.

CSS-stiil kaardi komponentide jaoks

CSS-i abil saate iga kaardi individuaalselt kujundada, et muuta need visuaalselt atraktiivseks. Kasutage universaalset valijat lähtestamiseks marginaalid, polstrid, ja positsiooni kasutades kasti suuruse määramine. Seejärel kujundage konteiner, lisades sellele ruumi loomiseks polsterduse.

​​​​​​* {
marginaal: 0;
polsterdus: 0;
kasti suuruse määramine: ääris-kast;
}
.kaart-konteiner {
polsterdus: 20px;
}

Seejärel kasutage kõigi kaartide jaoks mitmikvalijat, andke sellele varu, et iga kaardi ümber ruumi jätta, ja määrake kuva ja painduv suund paigutuse jaoks. Samuti määrake kaartide määratlemiseks ääris, mõne kõvera jaoks äärise raadius ja reageerimisvõime jaoks maksimaalne laius.

.sisukaart,
.toode-kaart,
.profiil-kaart {
marginaal: 20px;
kuva: painduv;
painduv suund: veerg;
piir: 2pxtahke#ccc;
piiriraadius: 7px;
maksimaalne laius: 250px;
}

Nüüd keskenduge igale kaardile, alustades sisukaardist, ning andke sellele taustavärv ja polsterdus. Lisage sisukaardil olevate elementide jaoks järeltulijad.

Stiilige pilt kasutades maksimaalne laius ja piiriraadius. Määrake h3 veeris, fondiperekond ja fondi suurus. Ankrusildi puhul eemaldage tekstikaunistus ja määrake värv, ülaserv ja fondi suurus.

.sisukaart {
taustal: #E9724C;
polsterdus: 10px;
}
.sisukaartimg {
maksimaalne laius: 100%;
piiriraadius: 5px;
}
.sisukaarth3 {
marginaal: 10px 0;
font-perekond: monoruum;
fondi suurus: 1.5rem;
}
.sisukaarta {
tekst-kaunistus: mitte ühtegi;
värvi: #6f2ed8;
marginaal:12 pikslit 0 7px 0;
fondi suurus: 1rem;
}

Tootekaart nõuab oma lisaelementide tõttu rohkem stiili. Looge iga alamelemendi jaoks valijad ja kujundage need vastavalt.

The nuppu element sisaldab tegevusele kutsuva efekti saavutamiseks kõige rohkem stiiliatribuute. Joondage ainult nupp paremale, määrates ankurdusvalijas joondamise painduva otsaga.

.toode-kaartimg {
piiriraadius: 5px 5px 0 0;
laius: 100%;
}
.toode-kaarth3 {
marginaal: 5px 10px;
font-perekond: monoruum;
fondi suurus: 1.5rem;
}
.toode-kaartlk {
marginaal: 5px 10px;
font-perekond: Gruusia, 'AjadUusRooma', Ajad, serif;
}
.toode-kaarta {
joondus-ise: painduv ots;
}
.toode-kaartnuppu {
laius: 100px;
kõrgus: 30px;
marginaal: 10px;
piir: 1pxtahke#8f3642;
piiriraadius: 4px;
taustavärv: #FFC857;
font-weight: 700;
kursor: osuti;
}

Lõpuks kujundage profiilikaart stiiliks. Määrake pildi paremas ja vasakpoolses ülanurgas äärise raadius, et see vastaks konteinerile. Reguleerige pildi suurust ja vajadusel sobitage. Kasutage määratlemiseks tekstides vähemalt kahte fonditüüpi ja täiendavaid värve. Samuti saate teha toimingukõlbliku elemendi, st. ankrusilt – paista silma a-ga piir.

.profiil-kaartimg {
piiriraadius: 5px 5px 0 0;
kõrgus: 200px;
objektile sobiv: kaas;
}
.profiil-kaarth3 {
marginaal: 10px;
font-perekond: monoruum;
fondi suurus: 1.5rem;
}
.profiil-kaartlk:tüüpi esimene {
marginaal:0 pikslit 10px;
font-perekond: 'AjadUusRooma', Ajad, serif;
värvi: rukkilillesinine;
}
.profiil-kaartlk:viimane {
marginaal: 5px 10px;
fondi suurus: 0.9rem;
}
.profiil-kaarta {
tekst-kaunistus: mitte ühtegi;
marginaal: 5px 10px 10px 10px;
polsterdus: 5px 15px;
joondus-ise: Keskus;
piir: 1pxtahkerukkilillesinine;
piiriraadius: 15px;
värvi: must;
font-perekond: monoruum;
font-weight: 500;
}

Pärast kujundamist peaksid teie kaardid välja nägema järgmised:

Kaardi paigutus ja paindlikkus

Vastupidavus on ülioluline, et tagada liidese sujuv kasutuskogemus kõigis seadmetes. Sa saad kasutage kas CSS Flexboxi või CSS Gridit paigutuse jaoks. Lõpuks saate kasutage reageerimise tagamiseks meediapäringuid.

CSS Flexboxi kasutamine

Esiteks, lisage kuvaatribuut ja määrake see paindumiseks kaardi konteineri valijal. Rakendage painduv mähis ja seadke see pakkima, et kaardid saaksid ümbritseda väikese ekraaniga.

Samuti määrake joondada-üksused ja õigustama-sisu omadused vastavalt teie soovile.

​​​​​​.kaart-konteiner {
polsterdus: 20px;
kuva: painduv;
flex-wrap: mähis;
joondada-üksused: Keskus;
õigustama-sisu: ruumiliselt ühtlaselt;
}

Leht peaks välja nägema selline:

See lõpetab reageerimise suuremate ekraanisuuruste korral. Väiksema vaateava (nt mobiiltelefoni) jaoks saate kasutada meediumipäringu reeglit ja määrata maksimaalse laiuse.

Määrake meediumipäringus, milliseid elemente soovite muuta. Sellisel juhul muutub kaardi konteiner.

Määrake painduv suund juurde veerg, nii et kaardid virnastati vertikaalselt. Kaartide kuvamiseks ekraani keskel horisontaalselt seadke sisu joondamise ja joondamise atribuudid keskele:

@meedia ekraan ja (maksimaalne laius:480 pikslit) {
.kaart-konteiner {
painduv suund: veerg;
õigustama-sisu: Keskus;
joondada-üksused: Keskus;
 }
}

Meediumipäringu efekti nägemiseks kontrollige sisse lülitatud koodi CodePen.

CSS Gridi kasutamine

Esmalt seadke kaardimahuti ekraan ruudustikule. Kasutage ruudustik-mall-veerud et võimaldada kaartidel oma laiust automaatselt reguleerida. Kasuta grid-gap kaartide vahekauguste jaoks. Kasutage õigustama-esemed kaartide tsentreerimiseks.

.kaart-konteiner {
polsterdus: 20px;
kuva: võre;
ruudustik-mall-veerud: korda(automaatne sobivus, minmax(300px, 1fr));
grid-gap: 20px;
õigustama-esemed: Keskus;
}

Leht peaks välja nägema selline:

Mobiiliekraanide puhul rakendage meediumipäring. Muutke päringus väiksemate vaateavade jaoks ruudustiku paigutust. Määra ruudustik-mall-veerud juurde 1 fr et iga kaart hõivaks kogu laiuse. Samuti seadmine õigustama-esemed ja joondada-üksused atribuudid keskele tsentreerivad kaardid nii horisontaalselt kui ka vertikaalselt.

@meedia ekraan ja (maksimaalne laius:480 pikslit) {
.kaart-konteiner {
ruudustik-mall-veerud: 1fr;
õigustama-esemed: Keskus;
joondada-üksused: Keskus;
 }
}

Kõrval CSS Gridi ja meediapäringute kombineerimine, mähitakse kaardid suurematele ekraanidele ja virnatakse väiksematel ekraanidel vertikaalselt, saavutades tundliku kaardipaigutuse. Meediumipäringu efekti nägemiseks kontrollige sisse lülitatud koodi CodePen.

Kaardikomponentide juurdepääsetavuse kaalutlused

Väga oluline on tagada, et teie loodud kaardikomponendid oleksid juurdepääsetavad kõigile kasutajatele, sealhulgas puuetega inimestele. Siin on mõned peamised kaalutlused kaardi komponentide kättesaadavamaks muutmiseks.

• Semantiline HTML
• Klaviatuuriga navigeerimine
• Fookuse stiilid
• ARIA sildid ja rollid
• Asendustekst
• Õige pealkirja struktuur
• Värvi kontrast

Nende juurdepääsetavuse kaalutluste rakendamisel saavad veebiarendajad tagada, et kaardi komponendid on kaasavad.

Kohandamine ja edasine uurimine

Kaardikomponendi kohandamisega saate minna kaugemale. Siin on mõned ideed, mida saate uurida:

• Üleminekud ja animatsioonid
• Pildi stiilid
• Taust ja värvilahendused
• Ääriste stiilid
• Interaktiivsed elemendid

Kaardikomponentide kohandamiseks on palju erinevaid viise, nii et katsetage julgelt.

Looge visuaalselt ahvatlevaid ja tundlikke kaardikomponente

Kaardi komponendid võivad mängida rolli peaaegu igal veebisaidil. Selle loomine HTML-i ja CSS-iga on lihtne, kuid oluline on ka juurdepääsetavuse käsitsemise teadmine.

Saate proovida ka teisi CSS-efekte, nagu CSS-filtrid ja visuaalsete efektide segamisrežiim. Harjutage visuaalse atraktiivsuse saavutamiseks erinevate kohandamiste abil rohkem loomist.