אנימציית תזוזה עדינה במעבר עכבר
אפקטים קטנים עושים הבדל גדול בחוויית משתמש – במיוחד כשמדובר באינטראקציות בסיסיות כמו מעבר עכבר. הקוד הזה יוצר תנועה עדינה שמזיזה אלמנט מעט שמאלה בעת hover, וגורמת לו להרגיש חי, אינטראקטיבי ונעים יותר לעין. הרעיון פשוט, במצב רגיל מוגדר transition קצר עם פונקציית easing מדויקת, ובמעבר עכבר האלמנט זז ב־translateX ועם אנימציה מעט איטית יותר, […]
נקודת סטטוס מהבהבת עם CSS
בעולם בניית האתרים, הרבה פעמים דווקא הדברים הקטנים הם אלה שעושים את ההבדל בין אתר שנראה טוב לאתר שמרגיש טוב. אחד האלמנטים הכי פשוטים אבל הכי אפקטיביים זה נקודת סטטוס מהבהבת עם אינדיקציה קטנה שמעבירה למשתמש מידע בזמן אמת בצורה ברורה ואינטואיטיבית. במקום להעמיס עם אייקונים או טקסטים מיותרים, אפשר פשוט לשלב נקודה עגולה קטנה […]
אנימציית קו תחתון עם גרדיאנט בתפריט
בווידג'ט התפריט שאלמנטור יש מספר אנמיציות מובנות שניתן להגדיר ולעצב, מעבר לזה ניתן לעצב בדרך אחרת את המעבר (Hover) מעל הפריטים בתפריט. את הצבעים של אנמיציית הקו נשבק בשורה 7 ב- background. המספר צבע הראשון מתחיל בצד ימין המספר צבע השני מסיים בצד שמאל. ניתן לשנות את כיוון האנימציה על ידי שינוי הכיוון בשורה מספר 9 […]