קטגוריה: עיצוב וחווית משתמש

ממתגים מחדש את האתר שלכם? מעוניינים לשדרג את חווית המשתמש של הגולשים באתר, ליצור אלמנטים חדשים בצורה הנכונה וללמוד טכניקות חדשות ב CSS ו JavaScript?

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

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

קסטומיזציה של underlines בעזרת text-decoration

המודול CSS Text Decoration Module Level 3 מספק לנו מספר דרכים חדשות לקִשּׁוּט ועִטּוּר טקסט בעמודים אינטרנטים, ותמיכת הדפדפנים לשמחתנו במודול זה היא די רחבה. תכונות ה CSS החדשות דוגמת text-decoration-thickness ו text-decoration-color יכולות לעזור בקִשּׁוּט ועִטּוּר טקסט וקווים תחתונים [...]

כיצד להשתמש ב Waze Deep Links

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

איך לבצע אנימציה (Transition) על Gradients?

ב CSS לא ניתן לבצע אנימציה או שינוי חלק של Gradients בעזרת התכונה transition. במילים אחרות, ה transition הבא לא יעבוד: .gradient { min-height: 200px; background-image: linear-gradient( to right, hsl(49.68, 97.89%, 62.75%), hsl(200, 51.54%, 44.51%) ); transition: background-image 0.5s linear; [...]

91 דוגמאות יפות של התכונה box-shadow ב CSS

התכונה box-shadow ב CSS מוסיפה אפקט של צל סביב המסגרת של אלמנט מסויים. ניתן להשתמש ביותר מאפקט אחד על כל אלמנט וזאת על ידי הפרדה בין אפקטים באמצעות פסיק (comma). התכונה box-shadow מתוארת על ידי הֶסֵּט (offset) בציר ה X [...]

שימוש ב CSS Gap עם Flexbox

לעיתים תכופות אנו מעוניינים להוסיף ריווח בין האלמנטים במתווה שלנו (ו margins הם כבר לא התשובה). בפוסט זה נראה כיצד להוסיף ריווח בין flex items תוך שימוש ב gap, הלא היא הקיצור של התכונות row-gap & column-gap.

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

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

עיצוב האות הראשונה ב CSS בעזרת first-letter::

::first-letter הוא עוד psuedo element (פסאודו אלמנט) נחמד שמאפשר לכם לעצב את האות הראשונה בטקסט הנמצא באלמנט כלשהו ללא הצורך לשנות את ה HTML או להוסיף תגית כלשהי כמו span למשל. המתודה עובדת באופן זהה לסיטואציה בה עטפתם את האות [...]