Mukautettujen korttikomponenttien luominen HTML: llä ja CSS: llä

Vaikka kortin osat saattavat näyttää yksinkertaisilta, niitä luotaessa on otettava huomioon erityiset kriteerit. Aluksi kohtaat erilaisia ​​korttikomponentteja, ja verkkokehittäjänä sinun on varmistettava, että käyttöliittymäsi on käytettävissä.

Opi rakentamaan korttikomponentteja HTML: n ja CSS: n avulla ja tutustu esteettömyysnäkökohtiin ja mukauttamiseen.

HTML-rakenne korttikomponenteille

Kortin anatomia sisältää korttikotelon, sen otsikon, kuvan ja rungon sekä valinnaisen kortin alatunnisteen.

Luot kolme yksinkertaista korttikomponenttia: sisältö-, tuote- ja profiilikortit. Nämä ovat joitain yleisimmistä verkosta löytyvistä korttityypeistä.

Aloita luomalla säilön div, upottamalla kolme muuta div-tunnistetta, joissa on luokkaattribuutit jokaiselle sen sisällä olevalle kortille ja sopivat alielementit kullekin kolmelle kortille. Sinun tulee käyttää elementtejä, jotka kattavat kaikki kortin anatomian osat. Sisältökortissa on esimerkiksi kuvatunniste medialle, h3-tunniste otsikolle ja p-tunniste tekstille.

<divluokkaa="korttikontti">
 Sisältökortti 
<divluokkaa="sisältökortti">
<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="Työtila, jossa on näppäimistö, kahvikuppi ja kuuloke">
<h3>Otsikkoh3>
<s>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ilmoitus
 paitsi explicabo molestiae natus magnam rem...s>
<ahref="#">Lue lisääa>
div>
 Tuotekortti 
<divluokkaa="tuotekortti">
<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="Kuulokkeet keltaisella pohjalla">
<h3>tuotteen nimih3>
<s>$19.99s>
<s>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.s>
<ahref="#"><-painiketta>Lisää ostoskoriin-painiketta>a>
div>
 Profiilikortti 
<divluokkaa="profiilikortti">
<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="Valkoinen mies, jolla on musta napillinen paita">
<h3>John Doeh3>
<s>Web-kehittäjäs>
<s>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?s>
<ahref="#"luokkaa="profiili-linkki">Näytä profiilia>
div>
div>

Tältä tämän pitäisi näyttää selaimessasi oletuksena, ennen kuin käytät mukautettua tyyliä:

Jos haluat luoda lisää kortteja tai sisällyttää enemmän sisältöä yhteen korttiin, tee se ennen kuin jatkat.

CSS-tyyli korttikomponenteille

CSS: n avulla voit muotoilla jokaisen kortin yksilöllisesti tehdäksesi niistä visuaalisesti houkuttelevia. Käytä yleisvalitsinta nollata marginaalit, pehmusteet, ja asento käyttämällä laatikon kokoinen. Muotoile sitten säiliö antamalla sille pehmustetilaa.

​​​​​​* {
marginaali: 0;
pehmuste: 0;
laatikon kokoinen: raja-laatikko;
}
.card-container {
pehmuste: 20px;
}

Käytä seuraavaksi monivalitsinta kaikille korteille, anna sille marginaali jättääksesi tilaa kunkin kortin ympärille ja aseta näyttö ja flex-suunta asettelua varten. Aseta myös reunus määrittääksesi kortit, reunuksen säde joillekin käyrälle ja enimmäisleveys vastetta varten.

.sisältökortti,
.tuote-kortti,
.profiili-kortti {
marginaali: 20px;
näyttö: flex;
flex-suunta: sarakkeessa;
rajaa: 2pxkiinteä#ccc;
raja-säde: 7px;
max-leveys: 250px;
}

Keskity nyt jokaiseen korttiin, aloittaen sisältökortista, ja anna sille taustaväri ja täyte. Lisää jälkeläisiä valitsimia sisältökortin elementeille.

Muotoile kuva käyttämällä max-leveys ja raja-säde. Aseta marginaali, fonttiperhe ja fonttikoko h3:lle. Poista ankkuritunnisteen tekstikoriste ja aseta väri, marginaalin yläosa ja fonttikoko.

.sisältökortti {
tausta: #E9724C;
pehmuste: 10px;
}
.sisältökorttiimg {
max-leveys: 100%;
raja-säde: 5px;
}
.sisältökorttih3 {
marginaali: 10px 0;
font-perhe: monospace;
Fonttikoko: 1.5 rem;
}
.sisältökorttia {
teksti-sisustus: ei mitään;
väri: #6f2ed8;
marginaali:12px 0 7px 0;
Fonttikoko: 1rem;
}

Tuotekortti vaatii enemmän tyyliä lisäelementtiensä vuoksi. Luo valitsimia kullekin alaelementille ja muotoile ne vastaavasti.

The -painiketta elementti sisältää eniten tyylimääritteitä toimintakehotusvaikutelman saavuttamiseksi. Kohdista vain painike oikealle asettamalla kohdistaminen joustavaan päähän ankkurin valitsimessa.

.tuote-korttiimg {
raja-säde: 5px 5px 0 0;
leveys: 100%;
}
.tuote-korttih3 {
marginaali: 5px 10px;
font-perhe: monospace;
Fonttikoko: 1.5 rem;
}
.tuote-korttis {
marginaali: 5px 10px;
font-perhe: Georgia, 'AjatUusiroomalainen', Ajat, serif;
}
.tuote-korttia {
kohdistaa itsensä: joustava pää;
}
.tuote-kortti-painiketta {
leveys: 100px;
korkeus: 30px;
marginaali: 10px;
rajaa: 1pxkiinteä#8f3642;
raja-säde: 4px;
taustaväri: #FFC857;
fontin paino: 700;
kohdistin: osoitin;
}

Muotoile lopuksi profiilikortti. Aseta reunan säde kuvan oikeaan ja vasempaan yläkulmaan vastaamaan säilöä. Säädä kuvan kokoa ja sovita tarvittaessa. Käytä vähintään kahta kirjasintyyppiä ja täydentäviä värejä teksteissä määrittelyssä. Voit myös tehdä toiminnallisesta elementistä – esim. ankkuritunniste – erotu joukosta a rajaa.

.profiili-korttiimg {
raja-säde: 5px 5px 0 0;
korkeus: 200px;
esineeseen sopiva: peite;
}
.profiili-korttih3 {
marginaali: 10px;
font-perhe: monospace;
Fonttikoko: 1.5 rem;
}
.profiili-korttis:ensimmäinen {
marginaali:0px 10px;
font-perhe: 'AjatUusiroomalainen', Ajat, serif;
väri: ruiskukansininen;
}
.profiili-korttis:tyypin viimeinen {
marginaali: 5px 10px;
Fonttikoko: 0.9rem;
}
.profiili-korttia {
teksti-sisustus: ei mitään;
marginaali: 5px 10px 10px 10px;
pehmuste: 5px 15px;
kohdistaa itsensä: keskusta;
rajaa: 1pxkiinteäruiskukansininen;
raja-säde: 15px;
väri: musta;
font-perhe: monospace;
fontin paino: 500;
}

Muotoilun jälkeen korttisi pitäisi näyttää tältä:

Kortin asettelu ja joustavuus

Responsiivisuus on elintärkeää saumattoman käyttökokemuksen tarjoamiseksi eri laitteiden välillä. Sinä pystyt käytä joko CSS Flexboxia tai CSS Gridiä asettelua varten. Lopulta voit käytä mediakyselyitä vasteen saamiseksi.

CSS Flexboxin käyttö

Ensinnäkin lisää näyttömäärite ja aseta se flex-tilaan korttisi säilön valitsimessa. Käytä flex-wrapia ja aseta se käärimään, jotta kortit voivat kääriä pieneen näyttöön.

Aseta myös kohdista-kohteet ja perustele-sisältö ominaisuuksia toiveidesi mukaan.

​​​​​​.card-container {
pehmuste: 20px;
näyttö: flex;
flex-wrap: kääri;
kohdista-kohteet: keskusta;
perustele-sisältö: tilaa tasaisesti;
}

Sivun pitäisi näyttää tältä:

Tämä päättelee reagoivuuden suuremmilla näytöillä. Pienemmässä kuvaportissa, kuten matkapuhelimessa, voit käyttää mediakyselysääntöä ja asettaa enimmäisleveyden.

Määritä mediakyselyssä, mitä elementtejä haluat muuttaa. Tässä tapauksessa korttisäiliö vaihtuu.

Aseta flex-suunta to sarakkeessa, joten kortit pinoutuvat pystysuoraan. Jos haluat näyttää kortit näytön keskellä vaakasuunnassa, aseta tasaussisällön ja kohteiden tasauksen ominaisuudet keskelle:

@media näyttö ja (suurin leveys:480 pikseliä) {
.card-container {
flex-suunta: sarakkeessa;
perustele-sisältö: keskusta;
kohdista-kohteet: keskusta;
 }
}

Jos haluat nähdä mediakyselyn vaikutuksen, tarkista koodi päällä CodePen.

CSS-ruudukon käyttö

Aseta ensin korttikotelon näyttö ruudukkoon. Käyttää ruudukko-malli-sarakkeet sallia korttien säätää leveyttä automaattisesti. Käytä ruudukkoväli korttien väliin. Käyttää perustella kohteita keskittääksesi kortit.

.card-container {
pehmuste: 20px;
näyttö: ruudukko;
ruudukko-malli-sarakkeet: toistaa(automaattinen sovitus, minmax(300px, 1fr));
ruudukkoväli: 20px;
perustella kohteita: keskusta;
}

Sivun pitäisi näyttää tältä:

Käytä mobiilinäyttöjä mediakyselyä. Muokkaa kyselyn sisällä ruudukon asettelua pienempiä näkymäportteja varten. Aseta ruudukko-malli-sarakkeet to 1fr jotta jokainen kortti vie koko leveyden. Myös asetus perustella kohteita ja kohdista-kohteet ominaisuudet keskitetään keskittää kortit sekä vaaka- että pystysuunnassa.

@media näyttö ja (suurin leveys:480 pikseliä) {
.card-container {
ruudukko-malli-sarakkeet: 1fr;
perustella kohteita: keskusta;
kohdista-kohteet: keskusta;
 }
}

Tekijä: CSS Gridin ja mediakyselyjen yhdistäminen, kortit käärivät suuremmille näytöille ja pinoutuvat pystysuunnassa pienemmille näytöille, jolloin saadaan reagoiva korttiasetelma. Jos haluat nähdä mediakyselyn vaikutuksen, tarkista koodi päällä CodePen.

Korttikomponenttien esteettömyysnäkökohdat

On erittäin tärkeää varmistaa, että luomasi korttikomponentit ovat kaikkien käyttäjien, myös vammaisten, saatavilla. Tässä on joitain keskeisiä näkökohtia kortin komponenttien helpottamiseksi:

• Semanttinen HTML
• Näppäimistön navigointi
• Keskitä tyylejä
• ARIA-merkit ja roolit
• Vaihtoehtoinen teksti
• Oikea otsikon rakenne
• Värikontrasti

Ottamalla nämä esteettömyysnäkökohdat käyttöön verkkokehittäjät voivat varmistaa, että korttikomponentit ovat kattavat.

Räätälöinti ja lisätutkimus

Voit mennä pidemmälle korttikomponentin mukauttamisessa. Tässä on joitain ideoita, joita voit tarkastella:

• Siirtymät ja animaatiot
• Kuvatyylit
• Tausta ja värimaailma
• Reunuksen tyylit
• Interaktiiviset elementit

Voit muokata korttikomponenttejasi useilla eri tavoilla, joten kokeile rohkeasti.

Luo visuaalisesti houkuttelevia ja reagoivia korttikomponentteja

Kortin komponenteilla voi olla rooli lähes kaikilla verkkosivuilla. Sen luominen HTML: n ja CSS: n avulla on helppoa, mutta myös esteettömyyden hallinta on tärkeää.

Voit kokeilla muita CSS-tehosteita, kuten CSS-suodattimia ja visuaalisten tehosteiden sekoitustilaa. Harjoittele luomista lisää erilaisilla muokkauksilla visuaalisen houkuttelevuuden saavuttamiseksi.