שטיגליץ עיצובים

פלקס בוקס – פריסה רספונסיבית

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

ממשק מסוגנן לפרטי משתמש

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

תפריט נפתח עם html5 וcss3

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

שימוש בפונט ייחודי עם @font-face

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

גבולות בcss3

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

זן- הדרך המהירה לכתיבת html וcss

זן קודינג היא מעין ספריית קיצורי דרך לכתיבת html וcss, כך שהעבודה על כתיבת דפים מהירה יותר ויעילה יותר. זן קודינג היא מעין ספריית קיצורי דרך לכתיבת html וcss, כך שהעבודה על כתיבת דפים מהירה יותר ויעילה יותר. לא רק שיש יעילות מבחינת מהירות העבודה אלא גם האפשרות לטעות בסגירת תג (למשל) הופכת לנדירה יותר. […]