יחידות מידה שונות בCSS – px, %, em, rem, vh, vw
CSS
20-04-2021
את הפוסט הזה אני רוצה להקדיש לנושא יחידות המידה השונות שיש לנו בCSS, מה המאפיינים של כל יחידת מידה, ובמי להשתמש מתי. קודם כל, למה
לפוסט המלא />
כפתורי דירוג (כוכבים) באמצעות css + FontAwesome
CSS
17-04-2021
כפתורי דירוג הפכו פופולריים באתרים רבים. כפתורים אלו מאפשרים לגולשים לדרג עד כמה אהבו את המאמר, נהנו ממנו או כמה הוא ענה על ציפיותיהם. הוא
לפוסט המלא />
img מול background-image, וההגדרה object-fit
CSS
17-05-2020
לאחרונה נתקלתי מספר פעמים בשאלה איך לבנות רכיב שמכיל תמונה, כאשר לפעמים התשובה היא "יש להשתמש בimg" ולפעמים התשובה היא להשתמש בdiv עם הגדרת background-image.
לפוסט המלא />
המדריך הכמעט שלם להגדרת רקע CSS background
CSS
26-01-2020
הגדרת רקע כוללת מספר הגדרות נפרדות, שאותן ניתן לצמצם. נפרט על כל אחת בנפרד, ואז נראה את ההגדרה המצומצמת: background-color - צבע רקע בפשטות כאן
לפוסט המלא />
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 שאנחנו כותבים להם,
לפוסט המלא />
float לעומת inline-block
CSS
08-06-2017
לעיתים לא נדירות בכל בעת בנית אתר נצטרך למקם יותר מאלמנט אחד בשורה. אם ניקח לצורך העניין שיש לנו div - ההגדרה הדיפולטיבית שלו היא
לפוסט המלא />
איך ליישר למרכז אלמנטים באמצעות CSS
CSS
30-04-2017
כשאנחנו מדברים על יישור אופקי למרכז - מימין לשמאל - יש מס' מצבים, שלכל אחד מתאים פתרון אחר. יישור אלמנט block בעל רוחב קבוע כשרוצים
לפוסט המלא />
before & after
CSS
20-04-2017
בCSS ישנם מס' אלמנטים פיקטיביים, שבעצם לא באמת קיימים, הם אינם חלק מהHTML, אך בCSS ניתן לתפוס אותם ולתת להם הגדרות סטייל שונות. בפוסט הזה נדבר
לפוסט המלא />
משקל של סלקטורים
CSS
22-01-2017
הפעם נדבר על משקל של סלקטורים. כשיש לנו שתי מופעים של אותה הגדרת CSS עבור אותו אלמנט, מי מכריע? מי דורס את מי וקובע את
לפוסט המלא />
יישור אנכי לאלמנטים
CSS
20-08-2016
בפוסט זה נדון על יישור אנכי לאלמנטים ביחס לאלמנטים אחרים. קיימות סיטואציות שונות בה אנו רוצים ליישר אלמנטים, ולכל סיטואציה הפתרון/ות שלה. יישור שורה אחת בכפתור
לפוסט המלא />
יצירת משולש באמצעות CSS
CSS
17-08-2016
לא רבים יודעים, אבל ניתן לייצר צורת משולש באמצעות CSS בלבד, ללא שימוש בתמונה או סקריפט. נשמע מדהים? שימו לב לדבר הבא: ועוד אחד
לפוסט המלא />
הגדרת מעברים חלקים Transition בCSS
CSS
14-08-2016
את הנושא של transition - המעברים החלקים בין שתי מצבים, נתחיל בכמה כללים בסיסיים. מהו transition? כשיש לנו אלמנט כלשהו, שיש לו שתי מצבים או
לפוסט המלא />
display – המדריך המלא להגדרה
CSS
14-08-2016
במאמר הזה נסביר בעז"ה על סוגי הערכים שניתן לתת תחת ההגדרה של display. ומה המשמעות של כל הגדרה לעומת ההגדרות האחרות ובכלל. display: none נתחיל
לפוסט המלא />
Position בCSS
CSS
13-08-2016
נכון לCSS 3 יש מספר ערכי position, כל אחד עם מאפייניו ושיגיונותיו. position: static נתחיל בהגדרה הדיפולטיבית. האלמנט מתחשב באלמנטים אחרים על המסך ואלמנטים אחרים על
לפוסט המלא />