יחידות מידה שונות בCSS – px, %, em, rem, vh, vw
CSS
20-04-2021
את הפוסט הזה אני רוצה להקדיש לנושא יחידות המידה השונות שיש לנו בCSS, מה המאפיינים של כל יחידת מידה, ובמי להשתמש מתי. קודם כל, למה
לפוסט המלא />
כפתורי דירוג (כוכבים) באמצעות css + FontAwesome
CSS
17-04-2021
כפתורי דירוג הפכו פופולריים באתרים רבים. כפתורים אלו מאפשרים לגולשים לדרג עד כמה אהבו את המאמר, נהנו ממנו או כמה הוא ענה על ציפיותיהם. הוא
לפוסט המלא />
בניית תפריט עם קישורים פנימיים לעמוד ארוך
רכיבים נפוצים באתרים
19-05-2020
בפוסט הזה נדבר על בניית תפריט עם קישורים פנימיים לאותו עמוד - אנקורים (anchor). משתמשים בזה בעמודי נחיתה שמכילים קומות רבות, בעמודים חשובים באתר, שמכילים
לפוסט המלא />
img מול background-image, וההגדרה object-fit
CSS
17-05-2020
לאחרונה נתקלתי מספר פעמים בשאלה איך לבנות רכיב שמכיל תמונה, כאשר לפעמים התשובה היא "יש להשתמש בimg" ולפעמים התשובה היא להשתמש בdiv עם הגדרת background-image.
לפוסט המלא />
בניית רכיב טאבים באמצעות jQuery וCSS
jQuery
26-01-2020
רכיב טאבים הוא ווידג'ט שבו יש תחילה שורת כפתורים, ומתחתיה כל התכנים, כשבכל זמן נתון רק תוכן אחר פתוח. התכנים נפתחים מתחת לכל הכפתורים כאשר
לפוסט המלא />
המדריך הכמעט שלם להגדרת רקע CSS background
CSS
26-01-2020
הגדרת רקע כוללת מספר הגדרות נפרדות, שאותן ניתן לצמצם. נפרט על כל אחת בנפרד, ואז נראה את ההגדרה המצומצמת: background-color - צבע רקע בפשטות כאן
לפוסט המלא />
jQuery – בניית רכיב שאלות ותשובות – אקורדיון
jQuery
23-05-2019
בפוסט הזה נדבר על יצירה של אקורדיון. אקורדיון הוא רכיב שמשמש בדרך כלל עבור רכיב שאלות ותשובות ורכיבים דומים. מדובר על רשימה של כפתורים שבלחיצה
לפוסט המלא />
הגדרת תגי מטא עבור רשתות חברתיות במערכת וורדפרס
וורדפרס
19-05-2019
בפוסט הקודם דברנו על יצירת כפתורי שיתוף לאתר, והבנו שמשתפים קישור לעמוד, והרובוטים של הרשת החברתית סורקים את האתר שלנו ומוצאים תגי מטא שונים שמגדירים
לפוסט המלא />
הוספת כפתורי שיתוף – פייסבוק, טוויטר, לינקדאין, WhatsApp ושליחה במייל
רכיבים נפוצים באתרים
09-05-2019
אם אתם מפתחים אתר מן הסתם התבקשתם להוסיף לאתר כפתורי שיתוף. אם אתם מפתחי אתם בפלטפורמת WP אני מניחה שהדבר הראשון שאמרתם לעצמכם זה משהו
לפוסט המלא />
iframe ותמונת רקע רספונסיביים באמצעות CSS
CSS
07-01-2019
בטח נתקלתם בזה יותר מפעם אחת. אתם מטמיעים סרטון מיוטיוב או כל iframe אחר, ונותנים לו רוחב, לדוגמה 100%, או 300 פיקסלים. אתם נותנים גם
לפוסט המלא />
בניית טולטיפ – tooltip – הדרך הפשוטה באמצעות CSS
CSS
13-08-2018
בפוסט הזה ננסה לכסות את נושא בניית טולטיפים מסוגים שונים. טולטיפ הוא כמו פופאפ קטן, שנפתח במקום מוגדר בעמוד, ובדרך כלל נותן מידע או כפתורים
לפוסט המלא />
סלקטור "אח" – Siblings בCSS
CSS
07-08-2018
הקדמה בקוד HTML, האלמנטים בנויים בצורה של איזשהו עץ משפחה. יש את אלמנט הhtml, שהוא מה שמכונה root - השורש של העץ שלנו. לhtml תמיד
לפוסט המלא />
עיצוב כפתורי צ'קבוקס ורדיו (checkbox/radio)
CSS
07-08-2018
עיצוב אלמנטים של HTML עשוי להיות משימה מאתגרת לעיתים, וזה משום שהפקדים (inputs) מהסוג צ'קבוקס ורדיו לא ממש טורחים לקבל את הCSS שאנחנו כותבים להם,
לפוסט המלא />
הנגשת פופאפ
רכיבים מונגשים
06-08-2018
לאחר שבנינו פופאפ במדריך הקודם, כעת זה הזמן להנגיש אותו גם כן. ההנגשה כוללת התאמה מלאה לשימוש ניווט מקלדת והתאמה לקוראי מסך, שגם הם ידעו לקרוא
לפוסט המלא />
float לעומת inline-block
CSS
08-06-2017
לעיתים לא נדירות בכל בעת בנית אתר נצטרך למקם יותר מאלמנט אחד בשורה. אם ניקח לצורך העניין שיש לנו div - ההגדרה הדיפולטיבית שלו היא
לפוסט המלא />
איך ליישר למרכז אלמנטים באמצעות CSS
CSS
30-04-2017
כשאנחנו מדברים על יישור אופקי למרכז - מימין לשמאל - יש מס' מצבים, שלכל אחד מתאים פתרון אחר. יישור אלמנט block בעל רוחב קבוע כשרוצים
לפוסט המלא />
before & after
CSS
20-04-2017
בCSS ישנם מס' אלמנטים פיקטיביים, שבעצם לא באמת קיימים, הם אינם חלק מהHTML, אך בCSS ניתן לתפוס אותם ולתת להם הגדרות סטייל שונות. בפוסט הזה נדבר
לפוסט המלא />
אלמנט סטיקי
רכיבים נפוצים באתרים
02-03-2017
אלמנט סטיקי הינו אלמנט שבחלק מהזמן נגלל רגיל עם העמוד, ובחלק אחר נעוץ לחלון של הדפדפן. הוא משלב בין position: absolute לבין position: fixed. מתי
לפוסט המלא />