למד כיצד ליצור רכיב אטרקטיבי זה, והשתמש בו כדי להוסיף מגע מקצועי לעיצובי האינטרנט שלך.

בעוד שרכיבי כרטיס עשויים להיראות פשוטים, ישנם קריטריונים ספציפיים שיש לקחת בחשבון בעת ​​יצירתם. אתה תתקל בסוגים שונים של רכיבי כרטיסים מלכתחילה, וכמפתח אינטרנט, עליך לוודא שהממשק שלך נגיש.

גלה כיצד לבנות רכיבי כרטיס באמצעות HTML ו-CSS ולמד על שיקולי נגישות והתאמה אישית.

מבנה HTML עבור רכיבי כרטיס

האנטומיה של כרטיס כוללת את מיכל הכרטיס, הכותרת העליונה, התמונה והגוף שלו וכותרת תחתונה אופציונלית של כרטיס.

תיצור שלושה רכיבי כרטיסים פשוטים: כרטיסי תוכן, מוצר ופרופיל. אלו הם כמה מסוגי הכרטיסים הנפוצים ביותר שנמצאים באינטרנט.

התחל על ידי יצירת div מיכל, קינון שלוש תגיות div נוספות עם תכונות מחלקה עבור כל קלף בתוכו, עם רכיבי צאצא מתאימים לכל אחד משלושת הקלפים. עליך להשתמש באלמנטים המהווים את כל החלקים באנטומיה של הכרטיס. לדוגמה, לכרטיס התוכן יש תג תמונה עבור מדיה, תג h3 עבור הכותרת ותג p עבור טקסט.

<divמעמד="מיכל כרטיסים">
 כרטיס תוכן 
<divמעמד="כרטיס תוכן">
<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"





instagram viewer

alt="סביבת עבודה עם מחברת מקלדת, כוס קפה ואוזנייה">
<h3>כותרתh3>
<ע>Lorem ipsum dolor sit amet consectetur adipisicing elit. מוֹדָעָה
 excepturi explicabo molestiae natus magnam rem...ע>
<אhref="#">קרא עודא>
div>
 כרטיס מוצר 
<divמעמד="כרטיס מוצר">
<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="אוזניות על רקע צהוב">
<h3>שם מוצרh3>
<ע>$19.99ע>
<ע>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.ע>
<אhref="#"><לַחְצָן>הוסף לעגלהלַחְצָן>א>
div>
 כרטיס פרופיל 
<divמעמד="כרטיס פרופיל">
<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="גבר לבן לובש חולצה שחורה מכופתרת">
<h3>פלוני אלמוניh3>
<ע>מפתח אינטרנטע>
<ע>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias דוחה?ע>
<אhref="#"מעמד="פרופיל-קישור">צפה בפרופילא>
div>
div>

כך זה אמור להיראות בדפדפן שלך, כברירת מחדל, לפני שתחיל סגנון מותאם אישית כלשהו:

אם ברצונך ליצור כרטיסים נוספים או לכלול תוכן נוסף בכרטיס בודד, עשה זאת לפני שתמשיך.

עיצוב CSS עבור רכיבי כרטיס

באמצעות CSS, אתה יכול לעצב כל כרטיס בנפרד כדי להפוך אותם למושכים מבחינה ויזואלית. השתמש בבורר האוניברסלי לאתחל שוליים, ריפודים, ומיקום באמצעות גודל קופסא. לאחר מכן עצב את המיכל על ידי מתן ריפוד כדי ליצור קצת מקום.

​​​​​​* {
שולים: 0;
ריפוד: 0;
גודל קופסא: תיבת גבול;
}
.כרטיס-מיכל {
ריפוד: 20פיקסלים;
}

לאחר מכן, השתמש בבורר מרובה עבור כל הקלפים, תן לו שוליים כדי לספק מקום סביב כל קלף, והגדר את לְהַצִיג ו כיוון הגמיש לפריסה. כמו כן, הגדר גבול כדי להגדיר את הקלפים, רדיוס גבול עבור כמה עקומות, ורוחב מקסימלי עבור תגובה.

.content-card,
כרטיס מוצר,
.profile-card {
שולים: 20פיקסלים;
לְהַצִיג: לְהַגמִישׁ;
כיוון הגמיש: טור;
גבול: 2פיקסליםמוצק#ccc;
גבול-רדיוס: 7פיקסלים;
רוחב מקסימלי: 250פיקסלים;
}

כעת התמקדו בכל כרטיס, החל מכרטיס התוכן, ותנו לו צבע רקע וריפוד. הוסף בוררים צאצאים עבור האלמנטים בכרטיס התוכן.

סגננו את התמונה עם רוחב מקסימלי ורדיוס הגבול. הגדר את השוליים, משפחת הגופנים וגודל הגופן עבור h3. עבור תג העוגן, הסר עיטור טקסט והגדר את הצבע, השוליים העליון וגודל הגופן.

.content-card {
רקע כללי: #E9724C;
ריפוד: 10פיקסלים;
}
.content-cardimg {
רוחב מקסימלי: 100%;
גבול-רדיוס: 5פיקסלים;
}


.content-cardh3 {
שולים: 10פיקסלים 0;
משפחת גופן: מונוספייס;
גודל גופן: 1.5 רמ;
}
.content-cardא {
טקסט-קישוט: אף אחד;
צֶבַע: #6f2ed8;
שולים:12 פיקסלים 0 7פיקסלים 0;
גודל גופן: 1rem;
}

כרטיס המוצר ידרוש יותר סגנון בגלל האלמנטים הנוספים שלו. צור בוררים עבור כל אלמנט ילד וסגנון אותם בהתאם.

ה לַחְצָן האלמנט מכיל את מירב תכונות הסגנון כדי להשיג את אפקט הקריאה לפעולה. יישר רק את הלחצן ימינה על ידי הגדרת ה-align-self לקצה גמיש בבורר העוגן.

כרטיס מוצרimg {
גבול-רדיוס: 5פיקסלים 5פיקסלים 0 0;
רוֹחַב: 100%;
}
כרטיס מוצרh3 {
שולים: 5פיקסלים 10פיקסלים;
משפחת גופן: מונוספייס;
גודל גופן: 1.5 רמ;
}


כרטיס מוצרע {
שולים: 5פיקסלים 10פיקסלים;
משפחת גופן: גאורגיה, 'פִּיחָדָשׁרוֹמִי', פִּי, תָג;
}


כרטיס מוצרא {
ליישר-עצמי: קצה גמיש;
}
כרטיס מוצרלַחְצָן {
רוֹחַב: 100פיקסלים;
גוֹבַה: 30פיקסלים;
שולים: 10פיקסלים;
גבול: 1פיקסליםמוצק#8f3642;
גבול-רדיוס: 4פיקסלים;
צבע רקע: #FFC857;
משקל גופן: 700;
סַמָן: מַצבִּיעַ;
}

לבסוף, סגננו את כרטיס הפרופיל. הגדר את רדיוס הגבול בחלק הימני העליון והשמאלי העליון של התמונה כך שיתאים למיכל. התאם את גודל התמונה והתאמה במידת הצורך. השתמש לפחות בשני סוגי גופנים ובצבעים משלימים בטקסטים להגדרה. כמו כן, אתה יכול להפוך את האלמנט הניתן לפעולה - כלומר. תג העוגן-בלט עם א גבול.

.profile-cardimg {
גבול-רדיוס: 5פיקסלים 5פיקסלים 0 0;
גוֹבַה: 200פיקסלים;
התאמה לאובייקט: כיסוי;
}
.profile-cardh3 {
שולים: 10פיקסלים;
משפחת גופן: מונוספייס;
גודל גופן: 1.5 רמ;
}


.profile-cardע:ראשון מהסוג {
שולים:0px 10פיקסלים;
משפחת גופן: 'פִּיחָדָשׁרוֹמִי', פִּי, תָג;
צֶבַע: כחול cornflower;
}


.profile-cardע:אחרון מהסוג {
שולים: 5פיקסלים 10פיקסלים;
גודל גופן: 0.9 רמ;
}
.profile-cardא {
טקסט-קישוט: אף אחד;
שולים: 5פיקסלים 10פיקסלים 10פיקסלים 10פיקסלים;
ריפוד: 5פיקסלים 15פיקסלים;
ליישר-עצמי: מֶרְכָּז;
גבול: 1פיקסליםמוצקכחול cornflower;
גבול-רדיוס: 15פיקסלים;
צֶבַע: שָׁחוֹר;
משפחת גופן: מונוספייס;
משקל גופן: 500;
}

לאחר העיצוב, הכרטיסים שלך צריכים להיראות כך:

פריסת כרטיס וגמישות

היענות היא חיונית כדי לספק חוויה חלקה עם הממשק בין מכשירים. אתה יכול השתמש ב-CSS Flexbox או ב-CSS Grid עבור הפריסה. לבסוף, אתה יכול השתמש בשאילתות מדיה להיענות.

שימוש ב-CSS Flexbox

קוֹדֶם כֹּל, הוסף תכונת תצוגה והגדר אותה להתגמש בבורר מכלי הכרטיסים שלך. החל כיסוי גמיש והגדר אותו לעטוף, כך שהכרטיסים יוכלו להתעטף בגודל מסך קטן.

כמו כן, הגדר את align-items ו להצדיק-תוכן נכסים לפי רצונך.

​​​​​​.כרטיס-מיכל {
ריפוד: 20פיקסלים;
לְהַצִיג: לְהַגמִישׁ;
גמיש-עטיפה: לַעֲטוֹף;
align-items: מֶרְכָּז;
להצדיק-תוכן: שטח באופן שווה;
}

העמוד אמור להיראות כך:

זה מסכם את ההיענות בגדלי מסך גדולים יותר. עבור נקודת מבט קטנה יותר, כמו טלפון נייד, אתה יכול להשתמש בכלל שאילתת מדיה ולהגדיר את הרוחב המקסימלי.

בתוך שאילתת המדיה, קבע אילו אלמנטים ברצונך לשנות. במקרה זה, מיכל הכרטיס ישתנה.

הגדר את כיוון הגמיש ל טור, כך שהקלפים נערמים בצורה אנכית. כדי להציג את הקלפים במרכז המסך, בצורה אופקית, הגדר את מאפייני הצדק-תוכן ויישור-פריטים למרכז:

@כְּלֵי תִקְשׁוֹרֶת מָסָך ו (רוחב מקסימלי:480 פיקסלים) {
.כרטיס-מיכל {
כיוון הגמיש: טור;
להצדיק-תוכן: מֶרְכָּז;
align-items: מֶרְכָּז;
 }
}

כדי לראות את אפקט שאילתת המדיה, בדוק את הקוד המופעל CodePen.

שימוש ב-CSS Grid

ראשית, הגדר את התצוגה של מיכל הכרטיס לרשת. להשתמש עמודות-תבנית-רשת כדי לאפשר לכרטיסים להתאים את הרוחב שלהם באופן אוטומטי. תשתמש ב רשת-פער למרווח בין הקלפים. להשתמש להצדיק-פריטים למרכז את הקלפים.

.כרטיס-מיכל {
ריפוד: 20פיקסלים;
לְהַצִיג: רֶשֶׁת;
עמודות-תבנית-רשת: חזור(התאמה אוטומטית, מינימום מקסימום(300פיקסלים, 1fr));
רשת-פער: 20פיקסלים;
להצדיק-פריטים: מֶרְכָּז;
}

העמוד אמור להיראות כך:

עבור מסכים ניידים, החל שאילתת מדיה. בתוך השאילתה, שנה את פריסת הרשת עבור יציאות תצוגה קטנות יותר. מַעֲרֶכֶת עמודות-תבנית-רשת ל 1fr כדי לגרום לכל כרטיס לתפוס את כל הרוחב. כמו כן, הגדרה להצדיק-פריטים ו align-items מאפיינים למרכז ירכזו את הקלפים הן אופקית והן אנכית.

@כְּלֵי תִקְשׁוֹרֶת מָסָך ו (רוחב מקסימלי:480 פיקסלים) {
.כרטיס-מיכל {
עמודות-תבנית-רשת: 1fr;
להצדיק-פריטים: מֶרְכָּז;
align-items: מֶרְכָּז;
 }
}

על ידי שילוב של CSS Grid ושאילתות מדיה, הקלפים יתעטפו על מסכים גדולים יותר ויערמו אנכית על מסכים קטנים יותר, ויגיעו לפריסת כרטיסים מגיבה. כדי לראות את אפקט שאילתת המדיה, בדוק את הקוד המופעל CodePen.

שיקולי נגישות עבור רכיבי כרטיס

חשוב לוודא שרכיבי הכרטיס שאתה יוצר נגישים לכל המשתמשים, כולל לבעלי מוגבלויות. הנה כמה שיקולים מרכזיים להפיכת רכיבי הכרטיס לנגישים יותר:

  • HTML סמנטי
  • ניווט מקלדת
  • פוקוס סגנונות
  • תוויות ותפקידים של ARIA
  • טקסט חלופי
  • מבנה כותרת תקין
  • ניגודיות צבע

על ידי יישום שיקולי נגישות אלה, מפתחי אתרים יכולים להבטיח שרכיבי הכרטיס כוללים.

התאמה אישית וחקירה נוספת

אתה יכול ללכת רחוק יותר עם התאמה אישית של רכיב הכרטיס שלך. הנה כמה רעיונות שתוכלו לבדוק:

  • מעברים ואנימציות
  • סגנונות תמונה
  • ערכות רקע וצבעים
  • סגנונות גבול
  • אלמנטים אינטראקטיביים

יש הרבה דרכים שונות שבהן אתה יכול להתאים אישית את רכיבי הכרטיס שלך, אז אתה מוזמן להתנסות.

צור רכיבי כרטיסים מושכים ויזואלית רספונסיביים

רכיבי כרטיסים יכולים לשחק תפקיד כמעט בכל אתר אינטרנט. קל ליצור אחד עם HTML ו-CSS, אבל לדעת איך להתמודד עם נגישות זה גם חשוב.

ישנם אפקטים אחרים של CSS שאתה יכול לנסות, כמו מסנני CSS ומצב מיזוג לאפקטים חזותיים. תרגל יצירה נוספת עם התאמה אישית שונה למשיכה ויזואלית.