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

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

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

המדריך המלא לשימוש ב Flexbox

במדריך זה נסביר בהרחבה כיצד להשתמש ב flexbox ובתכונות ה justification וה alignment שהוא מציע (בין היתר) ליצירת גריד ועימודים שונים.

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

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

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

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

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

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

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

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

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

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

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

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