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

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

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

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

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

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

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

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

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 ניתן לתפוס אותם ולתת להם הגדרות סטייל שונות. בפוסט הזה נדבר
לפוסט המלא />

משקל של סלקטורים

הפעם נדבר על משקל של סלקטורים. כשיש לנו שתי מופעים של אותה הגדרת CSS עבור אותו אלמנט, מי מכריע? מי דורס את מי וקובע את
לפוסט המלא />

יישור אנכי לאלמנטים

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

יצירת משולש באמצעות CSS

לא רבים יודעים, אבל ניתן לייצר צורת משולש באמצעות CSS בלבד, ללא שימוש בתמונה או סקריפט. נשמע מדהים? שימו לב לדבר הבא:   ועוד אחד
לפוסט המלא />

הגדרת מעברים חלקים Transition בCSS

את הנושא של transition - המעברים החלקים בין שתי מצבים, נתחיל בכמה כללים בסיסיים. מהו transition? כשיש לנו אלמנט כלשהו, שיש לו שתי מצבים או
לפוסט המלא />

display – המדריך המלא להגדרה

במאמר הזה נסביר בעז"ה על סוגי הערכים שניתן לתת תחת ההגדרה של display. ומה המשמעות של כל הגדרה לעומת ההגדרות האחרות ובכלל. display: none נתחיל
לפוסט המלא />

Position בCSS

נכון לCSS 3 יש מספר ערכי position, כל אחד עם מאפייניו ושיגיונותיו. position: static נתחיל בהגדרה הדיפולטיבית. האלמנט מתחשב באלמנטים אחרים על המסך ואלמנטים אחרים על
לפוסט המלא />