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

שימוש ב Lightbox להצגת תמונות ותוכן באמצעות Lity

Lity היא ספריית lightbox קלת משקל, נגישה ורספונסיבית התומכת בתמונות, וידאו, iframes ואף inline content. הספרייה שוקלת כ 3K בלבד כאשר היא דחוסה ובמידה ו gzip מופעל בשרת שלכם. בפוסט קצר זה נראה כיצד להשתמש בה בכדי להציג תוכן…

יצירת פורטפוליו (Masonry) בוורדפרס עם אנימציית טעינה

בפוסט זה, אשר לא מעט מהקוד המופיע בו נלקח מהפוסט הבא אותו כתבה Mary Lou, נראה כיצד ליצור פורטפוליו באמצעות masonry.js ונשתמש ב anime.js (עליו כתבתי לא מעט) בכדי ליצור אנימציות טעינה מגניבות לאותו פורטפוליו. הסיבה שאני כותב פוסט…

יצירת פילטר וסינון אלמנטים באמצעות הספרייה Isotope

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

סלקטורים מגניבים ב CSS Level 4 שיגיעו אלינו בקרוב

הסטטוס הנוכחי של CSS Selectors Level 4 הוא סוג של טיוטה, עם זאת, דפדפנים מודרניים כבר החלו להטמיע חלקים מסויימים של הספסיפיקציות החדשות. תכלס, לעולם לא יהיה CSS4 כפי שלעולם לא יהיה HTML6 אך מה שכן יהיה זה pseudo-classes…

מספר מילים על התכונה object-fit ב CSS

התכונה object-fit מגדירה כיצד אלמנט מסויים מגיב לגובה ולרוחב של ההאלמנט העוטף אותו (Content Box). התכונה מיועדת לשימוש עבור תמונות, וידאו וסוגי מדיה אחרים שניתן להטמיע ועובדת יחד עם התכונה object-position. בפני עצמה, תכונה זו מאפשרת לנו לקצוץ (crop)…

התכונה font-display וכיצד להשתמש בה

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

טעינת פונטים באמצעות font-face

font-face@ הוא חוק ב CSS המאפשר שימוש בפונטים מותאמים (Custom Fonts) עבור הטקסט באתר שלכם. אותם פונטים יכולים להטען משרת חיצוני באמצעות הפונקציה ()url או מהמחשב האישי של הגולש באתר שלכם באמצעות הפונקציה ()local. החוק font-face@ מאפשר לבעלי אתרים…

רעיונות יצירתיים ל Hover Effects על כפתורים

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