Search

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

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

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

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

הגדרת עיצוב שונה לקישורים יוצאים ב CSS

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

אז position:sticky לא עובד לכם? נסו את הפתרון הבא!

אם אתם חווים בעיות עם התכונה position:sticky ב CSS, כלומר אם התכונה אינה עובדת לכם אז הסיבה היא בדרך כלל אחת מאלו: 1. לפני שאתם בכלל ממשיכים עליכם לוודא אם התכונה נתמכת בדפדפן שלכם...

קסטומיזציה של 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.

היחידה Fr ב CSS Grid

CSS Grid הביא איתו לעולם יחידת מידה חדשה. זו בעצם flexible unit מסוג חדש בשם Fr unit. משמעו של Fr הוא Fractional Unit כש 1fr מייצג חלק 1 מסך השטח הפנוי.