יחידות מידה שונות בCSS – px, %, em, rem, vh, vw

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

כפתורי דירוג (כוכבים) באמצעות css + FontAwesome

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

בניית תפריט עם קישורים פנימיים לעמוד ארוך

בפוסט הזה נדבר על בניית תפריט עם קישורים פנימיים לאותו עמוד - אנקורים (anchor). משתמשים בזה בעמודי נחיתה שמכילים קומות רבות, בעמודים חשובים באתר, שמכילים
לפוסט המלא

img מול background-image, וההגדרה object-fit

לאחרונה נתקלתי מספר פעמים בשאלה איך לבנות רכיב שמכיל תמונה, כאשר לפעמים התשובה היא "יש להשתמש בimg" ולפעמים התשובה היא להשתמש בdiv עם הגדרת background-image.
לפוסט המלא

בניית רכיב טאבים באמצעות jQuery וCSS

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

המדריך הכמעט שלם להגדרת רקע CSS background

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

jQuery – בניית רכיב שאלות ותשובות – אקורדיון

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

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

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

הוספת כפתורי שיתוף – פייסבוק, טוויטר, לינקדאין, WhatsApp ושליחה במייל

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

iframe ותמונת רקע רספונסיביים באמצעות CSS

בטח נתקלתם בזה יותר מפעם אחת. אתם מטמיעים סרטון מיוטיוב או כל iframe אחר, ונותנים לו רוחב, לדוגמה 100%, או 300 פיקסלים. אתם נותנים גם
לפוסט המלא

בניית טולטיפ – tooltip – הדרך הפשוטה באמצעות CSS

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

סלקטור "אח" – Siblings בCSS

הקדמה בקוד HTML, האלמנטים בנויים בצורה של איזשהו עץ משפחה. יש את אלמנט הhtml, שהוא מה שמכונה root - השורש של העץ שלנו. לhtml תמיד
לפוסט המלא

עיצוב כפתורי צ'קבוקס ורדיו (checkbox/radio)

עיצוב אלמנטים של HTML עשוי להיות משימה מאתגרת לעיתים, וזה משום שהפקדים (inputs) מהסוג צ'קבוקס ורדיו לא ממש טורחים לקבל את הCSS שאנחנו כותבים להם,
לפוסט המלא

הנגשת פופאפ

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

float לעומת inline-block

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

איך ליישר למרכז אלמנטים באמצעות CSS

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

before & after

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

אלמנט סטיקי

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