מדריכים ומאמרים בנושא: עיצוב והתנהגות אתרי וורדפרס

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

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

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

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

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

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

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

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

עולמה של Flexbox - יישור אלמנטים ב Flex Container

אז כיצד ניתן ליצור עימודים בצורה קלה ומהירה? כיצד ליישר אלמנטים בצורה נוחה? Flexbox זו התשובה כמעט תמיד, במיוחד כשמדובר על עימודים חד מימדיים, ושלא כמו CSS Grid המיועד בד״כ עבור עימוד דו מימדי. במדריך זה נראה בהרחבה כיצד להשתמש…

משחקים עם הצללות טקסט והתכונה 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 שאנחנו מתארים בפוסט זה.…