חשבתם שיישור אופקי לאמצע מורכב מידי? כדאי שתחשבו שוב…

כשאנחנו מדברים על יישור אופקי למרכז – מימין לשמאל – יש מס' מצבים, שלכל אחד מתאים פתרון אחר. יישור אלמנט block בעל רוחב קבוע כשרוצים ליישר אלמנט עם display: block + רוחב קבוע – פשוט מגדירים שוליים אוטומטיים משתי הצדדים, מה שיגרום לשוליים להתחלק שווה בשווה בין ימין ושמאל: margin-right: auto; margin-left: auto. יש לשים … להמשך קריאהחשבתם שיישור אופקי לאמצע מורכב מידי? כדאי שתחשבו שוב…

אלמנט סטיקי

אלמנט סטיקי הינו אלמנט שבחלק מהזמן נגלל רגיל עם העמוד, ובחלק אחר נעוץ לחלון של הדפדפן. הוא משלב בין position: absolute לבין position: fixed. מתי עושים שימוש באלמנט סטיקי? בתפריטים שבמצב הראשוני אינם צמודים לחלק העליון של המסך, ובגלילה הם נצמדים ונשארים שם; ברכיבים צידיים, כמו קישור לצור קשר, כפתורי שיתוף או קישורים לרשתות חברתיות … להמשך קריאהאלמנט סטיקי

כך תבנו פופאפ בעצמכם וללא פלאגינים!

בניית פופאפ רספונסיבי ומונגש נראית מסובכת מנשוא, אבל לאחר שתקראו את הפוסט הזה – גם אתם תוכלו לבנות אחד כזה משלכם בלי בעיה. ראשית נפרק את התהליך לשלבים: יצירת הHTML הוספת CSS פתיחת הפופאפ בסקריפט התאמת CSS לפופאפ הפתוח סקריפט סגירת הפופאפ הוספת מעברים חלקים (transition) הוספת מאפיינים וסקריפטים לצורך הנגשת הפופאפ ונתחיל מההתחלה 1. … להמשך קריאהכך תבנו פופאפ בעצמכם וללא פלאגינים!

Position בCSS

נכון לCSS 3 יש מספר ערכי position, כל אחד עם מאפייניו ושיגיונותיו. position: static נתחיל בהגדרה הדיפולטיבית. האלמנט מתחשב באלמנטים אחרים על המסך ואלמנטים אחרים על המסך מתחשבים בו לא ניתן לתת לו הגדרות מיקום אבסולוטיות (הרחבה בפוסט אחר בעז"ה) במידה ונרצה לדרוס הגדרת position בהגדרת הדיפולט – זו ההגדרה הדרושה לנו. בנוסף –  הגדרת הstatic … להמשך קריאהPosition בCSS