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

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

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

הוספת אנימציות CSS בגלילה באמצעות AOS

לבטח יצא לכם לראות אתרים בהם מתבצעות אנימציות שונות בזמן שאתם גוללים מטה (On Scroll Animations). אז אשתף אתכם בספרייה בה נתקלתי בשם AOS, המאפשרת להוסיף אנימציות אלו בקלות ועם שליטת CSS מלאה על אותן אנימציות. הרעיון מאחורי AOS…

עיצוב פסי גלילה (Scrollbars) עם CSS

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

יצירת לשוניות רספונסיביות (Tabs) עם CSS בלבד

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

הקדמה על Variable Fonts - העתיד של פונטים ברשת

לפני כשלוש שנים הוצגה אבולוציה של פונטים מסוג OpenType (הפורמט בו השתמשנו שנים) המשנה כמה דברים בצורה מאד מעניינת. פונטים אלו נקראים Variable Fonts או ״פונטים פרמטרים״. ומעבר לכך שהם חוסכים bandwidth הם גם מספקים תכונות בלתי נגמרות כראות…

קו מפריד עם אלמנט באמצע - כיצד עושים זאת ב CSS?

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

על התכונה Grid Areas של CSS Grid בהרחבה

בעימודים או layouts מבוססי CSS Grid - ברירת המחדל להצבת אלמנטים בגריד עצמו היא על ידי הגדרת השורות, או בעצם הגדרת קווי הגריד לפיהם יתחילו ויסתיימו אלמנטים. התכונה Grid Area היא אלטרנטיבה לקביעת קווי הגריד ומציעה דרך שֵׁמִית בה…

הצמדת אלמנט לתחתית קונטיינר באמצעות flex-grow

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

שימוש ב Lightbox להצגת תמונות ותוכן באמצעות Lity

Lity היא ספריית lightbox קלת משקל, נגישה ורספונסיבית התומכת בתמונות, וידאו, iframes ואף inline content. הספרייה שוקלת כ 3K בלבד כאשר היא דחוסה ובמידה ו gzip מופעל בשרת שלכם. בפוסט קצר זה נראה כיצד להשתמש בה בכדי להציג תוכן…