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

התכונה supports@ ב CSS וכיצד להשתמש בה

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

משחקים עם הצללות טקסט והתכונה text-shadow

התכונה text-shadow ב CSS מוסיפה הצללה לטקסט. היא מקבלת רשימה של הצללות המופרדות בפסיק ואלו מתווסופות לטקסט ולדקורציה של אותו טקסט. כל הצללה מתוארת על ידי קומבינציה של הֶסֵּט X ו Y (במילים אחרות offset) מהאלמנט, רדיוס טשטוש (blur radius), [...]

הוספת אנימציות ל Slick Slider עם animate.css

זה יהיה פוסט קצר וקולע. אם אינכם מכירים את Slick Slider - זוהי ספריית Javascript המאפשרת ליצור סליידרים/קרוסלות בצורה מאד נוחה. כתבתי מאמר על השימוש ב Slick Slider, מוזמנים לתת מבט אם אינכם מכירים. בפוסט זה נראה כיצד כיצד להוסיף אנימציות [...]

רעיונות מגניבים ליצירת Tooltips באמצעות anime.js

במדריך זה נראה כיצד ליצור Tooltips נחמדים. אותם Tooltips הם בעצם SVG's, כאשר האנימציות עצמן מבוצעות עם Anime.js. כבר נכתב פוסט על השימוש ב Anime.js ואני ממליץ לקרוא אותו לפני שאתם מנסים להטמיע את ה Tooltips שאנחנו מתארים בפוסט זה. [...]

רעיונות ל Image Hover Effects – אפקט ריחוף על תמונות

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

שימוש ב anime.js ליצירת אנימציות Javascript

הספרייה Anime.js הוא מנוע Javascript קל משקל ליצירת אנימציות. הוא תומך בכל הדפדפנים המודרנים ומאפשר ליצור אנימציות על כל תכונת CSS, על SVG ועל ערכים של Javascript. במדריך זה אסביר את הבסיס של Anime.js ונראה כיצד להשתמש בו בכדי ליצור...

CSS Variables – מדוע וכיצד להשתמש במשתנים אלו?

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