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

בלי כתוביותעם כתוביות

מילון מושגים:

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

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

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

React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.

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

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

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

1. רוחב ופריסה: ל-product-card מגדירים width של 300 פיקסלים ו-display: inline-flex, כך שהכרטיסיות והשני ה-div שבהן עומדים זה לצד זה. עם align-items: center הטקסט מתיישר לאמצע.

2. רקע: background-image מסוג linear-gradient ב-45 מעלות, מ-lightgreen ל-white, בהתאם לירוק שבפרויקט.

3. התמונה: לכלל img בתוך הכרטיסייה נותנים רוחב של 60 פיקסלים, ‏margin של 5 פיקסלים, ‏border-radius של 10 פיקסלים ו-border של פיקסל אחד שחור. עם vertical-align: middle התמונה יושבת באמצע ולא דוחפת את הכרטיסייה למטה.

4. דחיפת התמונה הצידה: ל-div האחרון (last-child) נותנים margin-left: auto, והוא דוחף את התמונה לצד. כדי לצמצם רווח מוסיפים padding-right: 0. אלה טריקים מעולם ה-flex.

5. גלישה של הרשימה: את הטיפול עושים ב-ProductList ולא בכרטיסייה: padding-top של 20, ‏overflow: auto וגובה של 75vh. הגובה באחוזים לא תמיד עובד, ו-vh מדויק יותר.

שימו לב

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

בסוף יש כרטיסיות מעוצבות בתוך רשימה שגוללת בלי לחרוג מהדף.

השיעור הבא בקורס: הצגת פרטי מוצר

פרקי ההרצאה: עיצוב כרטיסיות

תמלול ההרצאה: עיצוב כרטיסיות

הטקסט המלא של הדקות הראשונות בהרצאה «עיצוב כרטיסיות» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

00:02
אז כאן אנחנו רוצים לראות איך אפשר לעצב בצורה ממש פשוטה כל אחד מהקארדים. זה בעצם העיצוב שאנחנו רוצים להגיע אליו. שני הדיבים נמצאים סייד ביי סייד והתמונה נמצאת באיזשהי גודל קבוע ולא כזאתי גדולה כל אחד בגודל שלה.
00:23
אז בואו נצלול לקוד ונראה איך אפשר לעשות את זה. נשים כאן את ה-CSS בצד, את הקונפיג אני לא צריך ויש לנו כאן את ה-CSS של כל אחד מהקארדים.
00:40
אז בואו נגדיר שהproducts card שזה זה תופס לי וויד 300 פיקסלים בוא נניח. כל אחד יתפוס את אותו הוויד. ומה שחשוב זה כל פעם לבדוק מה בעצם אנחנו רואים.
00:56
אז אם יש לנו רוחב 300 של כל אחד אוקיי זה בסדר. בואו נגדיר שהוא יהיה פליי כאינליין פלק ואז הם אמורים להיות כזה סייד ביי סייד אורייט זה בסדר שמנו אותם כאינליין פלקס את הקונטיינר שלהם אז הפריטים עצמם נמצאים סייד ביי סייד בואו נגדיר שהפריטים עצמם הם באמצע ואז הטקסט הזה יהיה בדיוק באמצע זה יהיה align items center בואו
01:41
נראה מה זה נותן לנו. שם לנו אותם כזה באמצע יותר, זה בסדר. בואו נגדיר שה-Background Image זה Linear Gradient, ניתן לו איזה 45 מעלות, Light Green על White אולי, בואו ננסה רגע Light Green על White.
02:16
אוקיי, יש לנו פה איזה צבע רקע שמתאים קצת לירוק הזה שיש לנו בכל הפרויקט, זה בסדר. בואו נטפל קצת בתמונה.
02:28
נגדיר שה-Product Card רווח IMG, כלומר תמונה שנמצאת רק בתוך ה-Plus של ה-Product Card. ניתן לה Width, בואו נניח אולי 60 פיקסלים. אה, היא את אותו דבר, בואו נראה שהוא מצמצם לנו אותם קצת.
02:54
אורייט, צמצם. בואו נגדיר, אולי ניתן לה מרג'ין, חמש פיקסלים, שהיא טיפה תהיה מרווחת מסביב. אולי נביא לה איזה בורדר רדיוס של עשרה פיקסלים, ואז הפינות שלה אמורות להיות קצת עגולות בהתאם לזה.
03:17
אולי נוסיף בורדר של אחד פיקסל סוליד בלאק, סביב לכל תמונה בלאק בצורה כזאת והנה אנחנו רואים בורדר כזה יותר אסתטי ויש לנו אפשרות לשים את התמונה כוורטיקל לליין מידל ואז התמונה הופכת להיות ממש כזה באמצע ולא דוחפת אותנו יותר למטה.
03:50
דבר נוסף אולי כדאי להגדיר פרודקט קארד בתוכו יושב דיו שהוא ה-Last Child, זה הדיו השני ולא הדיו