לוגו ממורכז בתפריט וורדפרס ואלמנטור

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

מחשבון וטבלת Clamp לפונטים

אם אתם בונים אתרים רספונסיביים, אתם יודעים שטיפוגרפיה יכולה להיות כאב ראש – במיוחד כשצריך לשלוט על גדלים בכל ברייקפוינט. בדיוק בשביל זה יצרתי מחשבון + טבלה ל-clamp. מה זה נותן לכם clamp מאפשר להגדיר פונט דינמי שמתאים את עצמו לרוחב המסך עם גבולות ברורים, בלי media queries ובלי קפיצות. מה יש בכלי? מחשבון שמייצר […]

נקודת סטטוס מהבהבת עם CSS

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

מירכוז עמודות ליסטינג

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

אנימצייה מהמרכז לצדדים בהובר על תפריט

בתפריט של אלמנטור יש לנו מספר פריסטים לאנימציות של הקו התחתון ולפעמים אנחנו נרצה אנימציות קצת שונות או שנראות אחרת בתנועה והאנימציה שלהם. הקוד הבא מייצר אנימציה של קו תחתון מהמרכז לצדדים במעבר מעל פריט בתפריט. כך יראה התפריט עם הקוד: selector nav li{ text-align: center; text-transform: uppercase; } selector li > a:after{ content: "; […]