Tanulja meg elkészíteni ezt a vonzó alkatrészt, és használja azt, hogy professzionális megjelenést adjon webdizájnjához.

Bár a kártyaösszetevők egyszerűnek tűnhetnek, bizonyos kritériumokat kell figyelembe venni létrehozásukkor. Kezdetben különféle típusú kártyaösszetevőkkel fog találkozni, és webfejlesztőként gondoskodnia kell arról, hogy a felület elérhető legyen.

Ismerje meg, hogyan készíthet kártyaösszetevőket HTML és CSS használatával, és ismerje meg a kisegítő lehetőségeket és a testreszabást.

HTML-struktúra a kártya összetevőihez

A kártya anatómiája magában foglalja a kártyatárolót, a fejlécet, a képet és a törzset, valamint az opcionális kártya láblécet.

Három egyszerű kártyakomponenst fog létrehozni: tartalom-, termék- és profilkártyákat. Ezek az interneten található leggyakoribb kártyatípusok.

Kezdje azzal, hogy hozzon létre egy tárolódiv-t, és helyezzen be három további div címkét osztályattribútumokkal minden egyes kártyához, a három kártya mindegyikéhez megfelelő gyermekelemekkel. Olyan elemeket kell használnia, amelyek figyelembe veszik a kártya anatómiájának összes részét. Például a tartalomkártyán van egy képcímke a média számára, egy h3 címke a címhez és egy p címke a szöveghez.

instagram viewer 

<divosztály="kártya-tároló">
 Tartalomkártya 
<divosztály="tartalomkártya">
<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="Munkaterület billentyűzettel, kávéval és fülhallgatóval">
<h3>Címh3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hirdetés
 kivételes explicabo molestiae natus magnam rem...p>
<ahref="#">Olvass továbba>
div>
 Termékkártya 
<divosztály="termékkártya">
<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="Fejhallgató sárga alapon">
<h3>termék névh3>
<p>$19.99p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.p>
<ahref="#"><gomb>Kosárbagomb>a>
div>
 Profilkártya 
<divosztály="profil-kártya">
<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="Egy fehér férfi fekete gombos inget visel">
<h3>gipsz Jakabh3>
<p>Webfejlesztőp>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?p>
<ahref="#"osztály="profil-link">Profil megtekintésea>
div>
div>

Ennek alapértelmezés szerint a következőképpen kell kinéznie a böngészőben, mielőtt bármilyen egyéni stílust alkalmazna:

Ha több kártyát szeretne létrehozni, vagy több tartalmat szeretne egyetlen kártyán elhelyezni, tegye ezt a folytatás előtt.

CSS-stílus a kártyakomponensekhez

A CSS használatával az egyes kártyákat egyedileg formázhatja, hogy azok vizuálisan vonzóak legyenek. Használja az univerzális választót visszaállítani margók, párnázások, és pozíció használatával doboz-méretezés. Ezután alakítsa ki a tárolóedényt úgy, hogy párnázza azt, hogy helyet teremtsen.

​​​​​​* {
árrés: 0;
párnázás: 0;
doboz-méretezés: border-box;
}
.kártya-konténer {
párnázás: 20px;
}

Ezután használjon többszörös választót az összes kártyához, hagyjon rá margót, hogy minden kártya körül helyet biztosítson, és állítsa be a kijelző és flex-irány az elrendezéshez. Ezenkívül állítson be egy szegélyt a kártyák meghatározásához, a szegély sugarát egyes görbékhez, és a maximális szélességet a reagálás érdekében.

.content-card,
.termék-kártya,
.profil-kártya {
árrés: 20px;
kijelző: Flex;
flex-irány: oszlop;
határ: 2pxszilárd#ccc;
határ-sugár: 7px;
max szélesség: 250px;
}

Most összpontosítson minden kártyára, kezdve a tartalomkártyával, és adja meg a háttérszínt és a kitöltést. Adjon hozzá leszármazott választókat a tartalomkártya elemeihez.

Stílusozd a képet a következővel max szélesség és határsugár. Állítsa be a margót, a betűcsaládot és a betűméretet a h3-hoz. A horgonycímke esetében távolítsa el a szövegdíszítést, és állítsa be a színt, a margó felső részét és a betűméretet.

.content-card {
háttér: #E9724C;
párnázás: 10px;
}
.content-cardimg {
max szélesség: 100%;
határ-sugár: 5px;
}


.content-cardh3 {
árrés: 10px 0;
betűtípus család: monospace;
betűméret: 1.5rem;
}
.content-carda {
szöveg-dekoráció: egyik sem;
szín: #6f2ed8;
árrés:12px 0 7px 0;
betűméret: 1rem;
}

A termékkártya több stílust igényel majd az extra elemei miatt. Hozzon létre kijelölőket minden gyermekelemhez, és ennek megfelelően alakítsa őket.

A gomb elem tartalmazza a legtöbb stílusattribútumot a cselekvésre ösztönző hatás eléréséhez. Csak a gombot igazítsa jobbra úgy, hogy a horgonyválasztóban az igazítást flex-endre állítja.

.termék-kártyaimg {
határ-sugár: 5px 5px 0 0;
szélesség: 100%;
}
.termék-kártyah3 {
árrés: 5px 10px;
betűtípus család: monospace;
betűméret: 1.5rem;
}


.termék-kártyap {
árrés: 5px 10px;
betűtípus család: Grúzia, 'TimesÚjrómai', Times, serif;
}


.termék-kártyaa {
igazod-ön: hajlékony végű;
}
.termék-kártyagomb {
szélesség: 100px;
magasság: 30px;
árrés: 10px;
határ: 1pxszilárd#8f3642;
határ-sugár: 4px;
háttérszín: #FFC857;
font-weight: 700;
kurzor: mutató;
}

Végül alakítsa ki a profilkártyát. Állítsa be a szegély sugarát a kép jobb és bal felső részén, hogy megfeleljen a tárolónak. Ha szükséges, állítsa be a kép méretét és illeszkedjen. A meghatározáshoz használjon legalább két betűtípust és kiegészítő színt a szövegeken. Ezenkívül elkészítheti az akcióképes elemet – pl. a horgonycímke – tűnjön ki a határ.

.profil-kártyaimg {
határ-sugár: 5px 5px 0 0;
magasság: 200px;
tárgyra illő: borító;
}
.profil-kártyah3 {
árrés: 10px;
betűtípus család: monospace;
betűméret: 1.5rem;
}


.profil-kártyap:típuselső {
árrés:0px 10px;
betűtípus család: 'TimesÚjrómai', Times, serif;
szín: búzavirágkék;
}


.profil-kártyap:utolsó típus {
árrés: 5px 10px;
betűméret: 0.9rem;
}
.profil-kártyaa {
szöveg-dekoráció: egyik sem;
árrés: 5px 10px 10px 10px;
párnázás: 5px 15px;
igazod-ön: központ;
határ: 1pxszilárdbúzavirágkék;
határ-sugár: 15px;
szín: fekete;
betűtípus család: monospace;
font-weight: 500;
}

A formázás után a kártyáknak így kell kinézniük:

Kártyaelrendezés és rugalmasság

A válaszkészség létfontosságú ahhoz, hogy a kezelőfelület zökkenőmentes élményt nyújtson az eszközökön keresztül. tudsz használja a CSS Flexboxot vagy a CSS Grid-et az elrendezéshez. Végül is lehet használjon médialekérdezéseket a válaszkészség érdekében.

CSS Flexbox használata

Először, adjon hozzá egy megjelenítési attribútumot, és állítsa flexre a kártyatároló választóján. Alkalmazza a flex-wrap-ot, és állítsa be, hogy a kártyák kis képernyőméreten belül legyenek.

Ezenkívül állítsa be a align-ites és indokolja-tartalom tulajdonságok az Ön kívánsága szerint.

​​​​​​.kártya-konténer {
párnázás: 20px;
kijelző: Flex;
flex-wrap: betakar;
align-ites: központ;
indokolja-tartalom: térben egyenletesen;
}

Az oldalnak így kell kinéznie:

Ez lezárja a nagyobb képernyőméreteken való reagálást. Kisebb nézetablakhoz, például mobiltelefonhoz, használhat médialekérdezési szabályt, és beállíthatja a maximális szélességet.

A médialekérdezésben határozza meg, hogy mely elemeket szeretné módosítani. Ebben az esetben a kártyatároló megváltozik.

Állítsa be a flex-irány nak nek oszlop, így a kártyák függőlegesen helyezkednek el. Ha a kártyákat a képernyő közepén, vízszintesen szeretné megjeleníteni, állítsa középre a sorkizárt tartalom és az elemek igazítása tulajdonságait:

@média képernyő és (maximális szélesség:480 képpont) {
.kártya-konténer {
flex-irány: oszlop;
indokolja-tartalom: központ;
align-ites: központ;
 }
}

A médialekérdezés hatásának megtekintéséhez ellenőrizze a kódot CodePen.

CSS Grid használata

Először állítsa rácsra a kártyatároló kijelzőjét. Használat rács-sablon-oszlopok hogy a kártyák automatikusan beállítsák a szélességüket. Használj rács-rés a kártyák közötti távolságra. Használat indokol-tételek hogy középre helyezze a kártyákat.

.kártya-konténer {
párnázás: 20px;
kijelző: rács;
rács-sablon-oszlopok: ismétlés(automatikus illeszkedés, minimum maximum(300px, 1fr));
rács-rés: 20px;
indokol-tételek: központ;
}

Az oldalnak így kell kinéznie:

Mobilképernyők esetén alkalmazzon médialekérdezést. A lekérdezésben módosítsa a rács elrendezését a kisebb nézetablakokhoz. Készlet rács-sablon-oszlopok nak nek 1 fr hogy minden kártya a teljes szélességet elfoglalja. Valamint beállítás indokol-tételek és align-ites A középre helyezett tulajdonságok a kártyákat vízszintesen és függőlegesen is középre állítják.

@média képernyő és (maximális szélesség:480 képpont) {
.kártya-konténer {
rács-sablon-oszlopok: 1fr;
indokol-tételek: központ;
align-ites: központ;
 }
}

Által a CSS Grid és a médialekérdezések kombinálása, a kártyák a nagyobb képernyőkre csomagolódnak, a kisebb képernyőkön pedig függőlegesen helyezkednek el, így érzékeny kártyaelrendezés érhető el. A médialekérdezés hatásának megtekintéséhez ellenőrizze a kódot CodePen.

Kisegítő lehetőségek a kártyakomponensekhez

Kulcsfontosságú annak biztosítása, hogy az Ön által létrehozott kártyaösszetevők minden felhasználó számára elérhetőek legyenek, beleértve a fogyatékkal élőket is. Íme néhány fontos szempont a kártyaösszetevők hozzáférhetőbbé tételéhez:

  • Szemantikus HTML
  • Billentyűzet navigáció
  • Fókusz stílusok
  • ARIA címkék és szerepek
  • Alt szöveg
  • Megfelelő címsorszerkezet
  • Színkontraszt

Ezen akadálymentesítési szempontok megvalósításával a webfejlesztők biztosíthatják, hogy a kártyaösszetevők mindenre kiterjedjenek.

Testreszabás és további feltárás

Tovább léphet a kártyakomponens testreszabásával. Íme néhány ötlet, amelyekre érdemes odafigyelni:

  • Átmenetek és animációk
  • Képstílusok
  • Háttér és színsémák
  • Szegély stílusok
  • Interaktív elemek

Rengeteg különböző módon szabhatja testre a kártya összetevőit, ezért nyugodtan kísérletezzen.

Hozzon létre vizuálisan tetszetős és érzékeny kártyakomponenseket

A kártyakomponensek szinte minden webhelyen szerepet játszhatnak. A HTML és CSS segítségével egyszerű elkészíteni, de fontos tudni, hogyan kezeljük a kisegítő lehetőségeket.

Vannak más CSS-effektusok, amelyeket kipróbálhat, például CSS-szűrőket és keverési módot a vizuális effektusokhoz. Gyakoroljon több alkotást különböző testreszabással a vizuális vonzerő érdekében.