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

התכונה font-display וכיצד להשתמש בה

התכונה font-display קובעת כיצד פונטים הנטענים באמצעות font-face@ מוצגים, וזאת על בסיס השאלה האם הפונט כבר ירד ומכן לשימוש או לא. בכדי להתמודד עם התופעה בה הטקסט כבר קיים אך הפונטים עדיין לא נטענו הדפדפן משתמש בשתי טכניקות שונות.…

טעינת פונטים באמצעות font-face

font-face@ הוא חוק ב CSS המאפשר שימוש בפונטים מותאמים (Custom Fonts) עבור הטקסט באתר שלכם. אותם פונטים יכולים להטען משרת חיצוני באמצעות הפונקציה ()url או מהמחשב האישי של הגולש באתר שלכם באמצעות הפונקציה ()local. החוק font-face@ מאפשר לבעלי אתרים…

רעיונות יצירתיים ל Hover Effects על כפתורים

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

משחקים עם התכונה background-clip

נסביר בפוסט זה על התכונה background-clip. התכונה background-clip מאפשרת לנו לשלוט על המרחק בו תמתח תמונת הרקע (או צבע הרקע) מעבר ל Padding או לתוכן עצמו של אלמנט כלשהו. אני מניח שהסבר זה קשה להבנה ללא דוגמאות ומבט על…

אנימציות על טקסט באמצעות Anime.js

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

התכונה clip-path ב CSS וכיצד להשתמש בה

clip-path היא תכונת CSS מאד מעניינת המאפשרת לכם ״לקטום״ (clip) חלק כלשהו הגלוי לעין באלמנטים כגון SVG, תמונות ו HTML. התכונה יוצרת צורה כלשהי הקובעת איזה חלק מהאלמנט יהיה גלוי. החלק אשר בתוך הצורה יהיה גלוי והחלק מחוצה לה…

עימוד ריספונסיבי עם CSS Grid ללא שימוש ב Media Queries

אימוץ הפלקסביליות של CSS Grid מספקת לנו את האפשרות ליצור אתרים עמידים וחזקים (Frontend Wise) בהם במקום להשתמש בגדלים ספציפיים וקבועים, אנו תוחמים אלמנטים בגבולות מסויימים ומאפשרים להם למלא את השטח הריק הנותר. אז לא רק ש CSS Grid…

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

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