Naučite kako izraditi ovu atraktivnu komponentu i upotrijebite je za dodavanje profesionalne note vašem web dizajnu.
Iako se komponente kartice mogu činiti jednostavnima, postoje posebni kriteriji koje treba uzeti u obzir prilikom njihove izrade. Za početak ćete se susresti s raznim vrstama komponenti kartice i, kao web programer, morate osigurati da je vaše sučelje dostupno.
Saznajte kako izraditi komponente kartice pomoću HTML-a i CSS-a i naučite o pristupačnosti i prilagodbi.
HTML struktura za komponente kartice
Anatomija kartice uključuje spremnik kartice, njezino zaglavlje, sliku i tijelo te izborno podnožje kartice.
Napravit ćete tri jednostavne komponente kartice: kartice sadržaja, proizvoda i profila. Ovo su neke od najčešćih vrsta kartica koje se nalaze na webu.
Započnite stvaranjem spremnika div, ugniježđujući još tri div oznake s atributima klase za svaku karticu unutar njega, s odgovarajućim podređenim elementima za svaku od tri kartice. Trebali biste koristiti elemente koji odgovaraju svim dijelovima anatomije karte. Na primjer, kartica sadržaja ima oznaku slike za medije, oznaku h3 za naslov i oznaku p za tekst.
<divrazreda="spremnik za kartice">
Kartica sadržaja
<divrazreda="kartica-sadržaja">
<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="Radni prostor s prijenosnom tipkovnicom, šalicom kave i slušalicom">
<h3>Titulah3>
<str>Lorem ipsum dolor sit amet consectetur adipisicing elit. Oglas
osim eksplicabo molestiae natus magnam rem...str>
<ahref="#">Čitaj višea>
div>Kartica proizvoda
<divrazreda="kartica proizvoda">
<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="Slušalice na žutoj pozadini">
<h3>ime proizvodah3>
<str>$19.99str>
<str>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aspernatur, voluptatibus.str>
<ahref="#"><dugme>Dodaj u košaricudugme>a>
div>
Kartica profila
<divrazreda="profilna kartica">
<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="Bijeli muškarac nosi crnu zakopčanu košulju">
<h3>John Doeh3>
<str>Web programerstr>
<str>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Expedita tempora eos molestias repellat?str>
<ahref="#"razreda="link na profil">Pogledaj profila>
div>
div>
Evo kako bi to trebalo izgledati u vašem pregledniku, prema zadanim postavkama, prije nego što primijenite prilagođeni stil:
Ako želite izraditi više kartica ili uključiti više sadržaja u jednu karticu, učinite to prije nego nastavite.
CSS stil za komponente kartice
Pomoću CSS-a možete zasebno stilizirati svaku karticu kako bi bila vizualno privlačna. Koristite univerzalni selektor resetirati margine, obloge, i položaj pomoću dimenzioniranje kutije. Zatim stilizirajte spremnik tako da ga podstavite kako biste stvorili malo prostora.
* {
margina: 0;
podstava: 0;
dimenzioniranje kutije: rubni okvir;
}
.kartica-kontejner {
podstava: 20px;
}
Zatim upotrijebite višestruki birač za sve kartice, dajte mu marginu kako biste osigurali prostor oko svake kartice i postavite prikaz i flex-direction za raspored. Također, postavite obrub za definiranje kartica, radijus obruba za neke krivulje i maksimalnu širinu za odziv.
.kartica-sadržaja,
.kartica proizvoda,
.profilna kartica {
margina: 20px;
prikaz: savijati;
flex-direction: stupac;
granica: 2pxčvrsta#ccc;
granični radijus: 7px;
maksimalna širina: 250px;
}Sada se usredotočite na svaku karticu, počevši od kartice sadržaja, i dajte joj boju pozadine i ispunu. Dodajte birače potomaka za elemente na kartici sadržaja.
Stilizirajte sliku pomoću maksimalna širina i granični radijus. Postavite marginu, obitelj fonta i veličinu fonta za h3. Za oznaku sidra uklonite ukras teksta i postavite boju, gornji rub i veličinu fonta.
.kartica-sadržaja {
pozadina: #E9724C;
podstava: 10px;
}.kartica-sadržajaimg {
maksimalna širina: 100%;
granični radijus: 5px;
}.kartica-sadržajah3 {
margina: 10px 0;
obitelj-fontova: monospace;
veličina fonta: 1.5rem;
}
.kartica-sadržajaa {
tekst-ukras: nikakav;
boja: #6f2ed8;
margina:12px 0 7px 0;
veličina fonta: 1rem;
}
Kartica proizvoda će zahtijevati više stila zbog dodatnih elemenata. Stvorite selektore za svaki podređeni element i stilizirajte ih u skladu s tim.
The dugme element sadrži najviše atributa stila za postizanje efekta poziva na radnju. Poravnajte samo gumb udesno postavljanjem align-self na flex-end u biraču sidra.
.kartica proizvodaimg {
granični radijus: 5px 5px 0 0;
širina: 100%;
}.kartica proizvodah3 {
margina: 5px 10px;
obitelj-fontova: monospace;
veličina fonta: 1.5rem;
}.kartica proizvodastr {
margina: 5px 10px;
obitelj-fontova: Gruzija, 'putaNovirimski', puta, serif;
}.kartica proizvodaa {
poravnati se: savitljivi kraj;
}
.kartica proizvodadugme {
širina: 100px;
visina: 30px;
margina: 10px;
granica: 1pxčvrsta#8f3642;
granični radijus: 4px;
boja pozadine: #FFC857;
težina fonta: 700;
kursor: pokazivač;
}
Na kraju, stilizirajte karticu profila. Postavite polumjer obruba u gornjem desnom i gornjem lijevom kutu slike kako bi odgovarao spremniku. Podesite veličinu slike i prilagodite je ako je potrebno. Koristite najmanje dvije vrste fonta i komplementarne boje na tekstovima za definiciju. Također, možete napraviti aktivni element—tj. oznaka sidra—istaknite se s a granica.
.profilna karticaimg {
granični radijus: 5px 5px 0 0;
visina: 200px;
pristajanje objekta: pokriti;
}.profilna karticah3 {
margina: 10px;
obitelj-fontova: monospace;
veličina fonta: 1.5rem;
}.profilna karticastr:prvi-od-vrste {
margina:0px 10px;
obitelj-fontova: 'putaNovirimski', puta, serif;
boja: cornflowerblue;
}.profilna karticastr:posljednji-od-vrste {
margina: 5px 10px;
veličina fonta: 0.9rem;
}
.profilna karticaa {
tekst-ukras: nikakav;
margina: 5px 10px 10px 10px;
podstava: 5px 15px;
poravnati se: centar;
granica: 1pxčvrstacornflowerblue;
granični radijus: 15px;
boja: crno;
obitelj-fontova: monospace;
težina fonta: 500;
}
Nakon oblikovanja, vaše bi kartice trebale izgledati ovako:
Izgled kartice i fleksibilnost
Responzivnost je ključna za pružanje besprijekornog iskustva sa sučeljem na svim uređajima. Možeš koristite CSS Flexbox ili CSS Grid za raspored. Konačno, možete koristite medijske upite za odziv.
Korištenje CSS Flexboxa
Prvo, dodajte atribut prikaza i postavite ga na fleksibilnost na biraču spremnika kartice. Primijenite flex-wrap i postavite ga na omot, tako da se kartice mogu omotati unutar male veličine zaslona.
Također, postavite align-items i opravdati-sadržaj svojstva po vašoj želji.
.kartica-kontejner {
podstava: 20px;
prikaz: savijati;
flex-wrap: omotati;
align-items: centar;
opravdati-sadržaj: prostorno ravnomjerno;
}Stranica bi trebala izgledati ovako:
To zaključuje odziv na većim veličinama zaslona. Za manji okvir za prikaz, poput mobilnog telefona, možete koristiti pravilo medijskog upita i postaviti maksimalnu širinu.
Unutar medijskog upita odredite koje elemente želite promijeniti. U tom slučaju, spremnik kartice će se promijeniti.
Postavi flex-direction do stupac, tako da se karte slažu okomito. Za prikaz kartica u sredini zaslona, vodoravno, postavite svojstva justify-content i align-items na središte:
@mediji zaslon i (maksimalna širina:480 px) {
.kartica-kontejner {
flex-direction: stupac;
opravdati-sadržaj: centar;
align-items: centar;
}
}Da biste vidjeli učinak medijskog upita, provjerite kôd na CodePen.
Korištenje CSS mreže
Prvo postavite prikaz spremnika kartice na rešetku. Koristiti rešetka-predložak-stupci kako bi kartice automatski prilagodile svoju širinu. Koristi grid-gap za razmak između kartica. Koristiti justify-items centrirati karte.
.kartica-kontejner {
podstava: 20px;
prikaz: rešetka;
rešetka-predložak-stupci: ponoviti(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
justify-items: centar;
}Stranica bi trebala izgledati ovako:
Za mobilne zaslone primijenite medijski upit. Unutar upita izmijenite raspored rešetke za manje prozore. set rešetka-predložak-stupci do 1fr kako bi svaka karta zauzela punu širinu. Također, postavljanje justify-items i align-items svojstva za centriranje centrirat će kartice vodoravno i okomito.
@mediji zaslon i (maksimalna širina:480 px) {
.kartica-kontejner {
rešetka-predložak-stupci: 1fr;
justify-items: centar;
align-items: centar;
}
}Po kombinirajući CSS Grid i medijske upite, kartice će se omotati na većim zaslonima i slagati okomito na manjim zaslonima, postižući responzivni izgled kartice. Da biste vidjeli učinak medijskog upita, provjerite kôd na CodePen.
Razmatranja pristupačnosti za komponente kartice
Ključno je osigurati da komponente kartice koje izradite budu dostupne svim korisnicima, uključujući one s invaliditetom. Evo nekoliko ključnih stvari koje treba uzeti u obzir kako bi komponente kartice bile pristupačnije:
- Semantički HTML
- Navigacija tipkovnicom
- Fokus stilova
- ARIA oznake i uloge
- Alternativni tekst
- Ispravna struktura naslova
- Kontrast boja
Implementacijom ovih razmatranja pristupačnosti, web programeri mogu osigurati da su komponente kartice uključive.
Prilagodba i daljnje istraživanje
Možete ići dalje s prilagodbom svoje kartice. Evo nekoliko ideja koje možete razmotriti:
- Prijelazi i animacije
- Stilovi slike
- Pozadina i sheme boja
- Stilovi obruba
- Interaktivni elementi
Postoji mnogo različitih načina na koje možete prilagoditi komponente svoje kartice, stoga slobodno eksperimentirajte.
Stvorite vizualno privlačne i osjetljive komponente kartice
Komponente kartice mogu igrati ulogu na gotovo svakoj web stranici. Izrada jednog s HTML-om i CSS-om je jednostavna, ali je također važno znati kako se nositi s pristupačnošću.
Postoje i drugi CSS efekti koje možete isprobati, poput CSS filtara i načina stapanja za vizualne efekte. Vježbajte stvarati više s različitim prilagodbama za vizualnu privlačnost.