Naučite se izdelati to privlačno komponento in jo uporabite za dodajanje profesionalnega pridiha svojim spletnim dizajnom.

Medtem ko se komponente kartice morda zdijo preproste, obstajajo posebna merila, ki jih je treba upoštevati pri njihovem ustvarjanju. Za začetek boste naleteli na različne vrste komponent kartic in kot spletni razvijalec morate zagotoviti, da je vaš vmesnik dostopen.

Ugotovite, kako sestaviti komponente kartic z uporabo HTML in CSS ter spoznati vidike dostopnosti in prilagajanje.

Struktura HTML za komponente kartice

Anatomija kartice vključuje vsebnik kartice, njeno glavo, sliko in telo ter neobvezno nogo kartice.

Ustvarili boste tri preproste komponente kartice: kartice vsebine, izdelka in profila. To je nekaj najpogostejših vrst kartic v spletu.

Začnite z ustvarjanjem vsebnika div, pri čemer ugnezdite tri dodatne oznake div z atributi razreda za vsako kartico v njem, z ustreznimi podrejenimi elementi za vsako od treh kartic. Uporabiti morate elemente, ki upoštevajo vse dele v anatomiji kartice. Kartica z vsebino ima na primer oznako slike za medije, oznako h3 za naslov in oznako p za besedilo.

instagram viewer 

<divrazred="kartica-zabojnik">
 Kartica vsebine 
<divrazred="vsebina-kartica">
<imgsrc=" https://images.unsplash.com/photo-1500989145603-8e7ef71d639e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=obrezovanje&w=200&q=80"alt="Delovni prostor z prenosnim računalnikom s tipkovnico, skodelico kave in slušalko">
<h3>Naslovh3>
<str>Lorem ipsum dolor sit amet consectetur adipisicing elit. oglas
 Excepturi explicabo molestiae natus magnam rem...str>
<ahref="#">Preberi veča>
div>
 Kartica izdelka 
<divrazred="kartica izdelka">
<imgsrc=" https://images.unsplash.com/photo-1505740420928-5e560c06d30e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=obrezovanje&w=200&q=80"alt="Slušalke na rumenem ozadju">
<h3>ime izdelkah3>
<str>$19.99str>
<str>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.str>
<ahref="#"><gumb>Dodaj v vozičekgumb>a>
div>
 Kartica profila 
<divrazred="profilna kartica">
<imgsrc=" https://images.unsplash.com/photo-1535713875002-d1d0cf377fde? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=obrezovanje&w=200&q=80"alt="Beli moški, oblečen v črno srajco z gumbi">
<h3>John Doeh3>
<str>Spletni razvijalecstr>
<str>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?str>
<ahref="#"razred="povezava do profila">Poglej profila>
div>
div>

Tako bi moralo biti to privzeto videti v vašem brskalniku, preden uporabite kateri koli slog po meri:

Če želite ustvariti več kartic ali na eno kartico vključiti več vsebine, to storite, preden nadaljujete.

Oblikovanje CSS za komponente kartic

S pomočjo CSS lahko posamično oblikujete vsako kartico, da bo vizualno privlačna. Uporabite univerzalni izbirnik za ponastavitev marže, oblazinjenjain uporabite položaj velikost škatle. Nato oblikujte posodo tako, da jo oblazinite, da ustvarite nekaj prostora.

​​​​​​* {
marža: 0;
oblazinjenje: 0;
velikost škatle: border-box;
}
.kartica-kontejner {
oblazinjenje: 20px;
}

Nato uporabite večkratni izbirnik za vse kartice, mu dajte rob, da zagotovite prostor okoli vsake kartice, in nastavite zaslon in flex-direction za postavitev. Nastavite tudi obrobo za določitev kartic, radij obrobe za nekatere krivulje in največjo širino za odzivnost.

.content-card,
.kartica izdelka,
.profilna kartica {
marža: 20px;
zaslon: flex;
flex-direction: stolpec;
meja: 2pxtrdna#ccc;
mejni polmer: 7px;
največja širina: 250px;
}

Zdaj se osredotočite na vsako kartico, začenši s kartico z vsebino, in ji dajte barvo ozadja in oblazinjenje. Dodajte izbirnike potomcev za elemente na kartici vsebine.

Oblikujte sliko z največja širina in mejni polmer. Nastavite rob, družino pisav in velikost pisave za h3. Za sidrno oznako odstranite dekoracijo besedila in nastavite barvo, zgornji rob in velikost pisave.

.content-card {
ozadje: #E9724C;
oblazinjenje: 10px;
}
.content-cardimg {
največja širina: 100%;
mejni polmer: 5px;
}


.content-cardh3 {
marža: 10px 0;
družina pisav: monospace;
velikost pisave: 1.5rem;
}
.content-carda {
besedilo-okras: nič;
barva: #6f2ed8;
marža:12px 0 7px 0;
velikost pisave: 1rem;
}

Kartica izdelka bo zahtevala več stila zaradi dodatnih elementov. Ustvarite izbirnike za vsak podrejeni element in jih ustrezno oblikujte.

The gumb vsebuje največ slogovnih atributov za doseganje učinka poziva k dejanju. Poravnajte samo gumb na desno tako, da nastavite align-self na flex-end v izbirniku sidra.

.kartica izdelkaimg {
mejni polmer: 5px 5px 0 0;
premer: 100%;
}
.kartica izdelkah3 {
marža: 5px 10px;
družina pisav: monospace;
velikost pisave: 1.5rem;
}


.kartica izdelkastr {
marža: 5px 10px;
družina pisav: Georgia, 'TimesNovoRoman', Times, serif;
}


.kartica izdelkaa {
poravnati se: flex-end;
}
.kartica izdelkagumb {
premer: 100px;
višina: 30px;
marža: 10px;
meja: 1pxtrdna#8f3642;
mejni polmer: 4px;
Barva ozadja: #FFC857;
teža pisave: 700;
kazalec: kazalec;
}

Nazadnje oblikujte kartico profila. Nastavite polmer obrobe v zgornjem desnem in zgornjem levem kotu slike, da se ujema z vsebnikom. Prilagodite velikost slike in jo po potrebi prilagodite. Na besedilih za definicijo uporabite vsaj dve vrsti pisav in komplementarne barve. Prav tako lahko naredite dejanjni element – ​​tj. sidrna oznaka – izstopajte z a meja.

.profilna karticaimg {
mejni polmer: 5px 5px 0 0;
višina: 200px;
prileganje objektu: pokrov;
}
.profilna karticah3 {
marža: 10px;
družina pisav: monospace;
velikost pisave: 1.5rem;
}


.profilna karticastr:prvega tipa {
marža:0px 10px;
družina pisav: 'TimesNovoRoman', Times, serif;
barva: cornflowerblue;
}


.profilna karticastr:zadnje vrste {
marža: 5px 10px;
velikost pisave: 0.9rem;
}
.profilna karticaa {
besedilo-okras: nič;
marža: 5px 10px 10px 10px;
oblazinjenje: 5px 15px;
poravnati se: center;
meja: 1pxtrdnacornflowerblue;
mejni polmer: 15px;
barva: Črna;
družina pisav: monospace;
teža pisave: 500;
}

Po oblikovanju bi morale vaše kartice izgledati takole:

Postavitev kartice in prilagodljivost

Odzivnost je ključnega pomena za zagotavljanje brezhibne izkušnje z vmesnikom med napravami. Ti lahko uporabite CSS Flexbox ali CSS Grid za postavitev. Končno lahko uporabite medijske poizvedbe za odzivnost.

Uporaba CSS Flexbox

Prvič, dodajte atribut zaslona in ga nastavite na flex na izbirniku vsebnika kartice. Uporabite flex-wrap in ga nastavite na zavijanje, tako da se lahko kartice zavijejo znotraj majhne velikosti zaslona.

Prav tako nastavite align-items in justify-content lastnosti po vaši želji.

​​​​​​.kartica-kontejner {
oblazinjenje: 20px;
zaslon: flex;
flex-ovitek: zaviti;
align-items: center;
justify-content: prostorsko enakomerno;
}

Stran bi morala izgledati takole:

S tem se zaključi odzivnost na večjih zaslonih. Za manjše vidno polje, kot je mobilni telefon, lahko uporabite pravilo medijske poizvedbe in nastavite največjo širino.

Znotraj medijske poizvedbe določite, katere elemente želite spremeniti. V tem primeru se bo vsebnik kartice spremenil.

Nastavite flex-direction do stolpec, tako da so karte zložene navpično. Če želite kartice prikazati vodoravno na sredini zaslona, ​​nastavite lastnosti justify-content in align-items na sredino:

@mediji zaslon in (največja širina:480 slikovnih pik) {
.kartica-kontejner {
flex-direction: stolpec;
justify-content: center;
align-items: center;
 }
}

Če želite videti učinek medijske poizvedbe, preverite kodo na CodePen.

Uporaba mreže CSS

Najprej nastavite prikaz posode za kartice na mrežo. Uporaba mreža-predloga-stolpci da lahko kartice samodejno prilagodijo svojo širino. Uporabi mrežna vrzel za razmik med kartami. Uporaba justify-items za centriranje kart.

.kartica-kontejner {
oblazinjenje: 20px;
zaslon: mreža;
mreža-predloga-stolpci: ponovite(samodejno prilagajanje, minmax(300px, 1fr));
mrežna vrzel: 20px;
justify-items: center;
}

Stran bi morala izgledati takole:

Za mobilne zaslone uporabite medijsko poizvedbo. Znotraj poizvedbe spremenite postavitev mreže za manjša vidna okna. Set mreža-predloga-stolpci do 1fr da vsaka karta zavzame celotno širino. Tudi nastavitev justify-items in align-items lastnosti na sredino bodo kartice centrirale vodoravno in navpično.

@mediji zaslon in (največja širina:480 slikovnih pik) {
.kartica-kontejner {
mreža-predloga-stolpci: 1fr;
justify-items: center;
align-items: center;
 }
}

Avtor: združevanje mreže CSS in medijskih poizvedb, se bodo kartice na večjih zaslonih zavile in na manjših zaslonih zložile navpično, kar bo omogočilo odzivno postavitev kartic. Če želite videti učinek medijske poizvedbe, preverite kodo na CodePen.

Premisleki glede dostopnosti za komponente kartice

Bistveno je zagotoviti, da so komponente kartice, ki jih ustvarite, dostopne vsem uporabnikom, vključno s tistimi s posebnimi potrebami. Tukaj je nekaj ključnih premislekov za boljšo dostopnost komponent kartice:

  • Semantični HTML
  • Navigacija s tipkovnico
  • Slogi fokusa
  • Oznake in vloge ARIA
  • Nadomestno besedilo
  • Pravilna struktura naslova
  • Barvni kontrast

Z uvedbo teh premislekov o dostopnosti lahko spletni razvijalci zagotovijo, da so komponente kartice vključujoče.

Prilagajanje in nadaljnje raziskovanje

S prilagajanjem komponente kartice lahko greste še dlje. Tukaj je nekaj zamisli, ki si jih lahko ogledate:

  • Prehodi in animacije
  • Slogi slike
  • Ozadje in barvne sheme
  • Slogi obrobe
  • Interaktivni elementi

Obstaja veliko različnih načinov, na katere lahko prilagodite komponente svoje kartice, zato lahko eksperimentirate.

Ustvarite vizualno privlačne in odzivne komponente kartic

Komponente kartice lahko igrajo vlogo na skoraj vsakem spletnem mestu. Izdelati ga s HTML in CSS je enostavno, vendar je pomembno tudi vedeti, kako ravnati s posebnimi potrebami.

Obstajajo tudi drugi učinki CSS, ki jih lahko preizkusite, kot so filtri CSS in način mešanja za vizualne učinke. Vadite ustvarjanje več z različnimi prilagoditvami za vizualno privlačnost.