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

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

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

הקדמה בקוד HTML, האלמנטים בנויים בצורה של איזשהו עץ משפחה. יש את אלמנט הhtml, שהוא מה שמכונה root – השורש של העץ שלנו. לhtml תמיד יש 2 בנים ישירים – head, body. אלו הם בנים ישירים. יש לו גם צאצאים לא ישירים, לדוגמה div, nav, .myHeader וכל האלמנטים שנמצאים בתוכו. הפוסט הזה ידריך אתכם איך … להמשך קריאהסלקטור "אח" – Siblings בCSS

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

עיצוב אלמנטים של HTML עשוי להיות משימה מאתגרת לעיתים, וזה משום שהפקדים (inputs) מהסוג צ'קבוקס ורדיו לא ממש טורחים לקבל את הCSS שאנחנו כותבים להם, בטח לא בכל הדפדפנים והמכשירים, וזה עוד לפני שדברנו על הסימון הפנימי של עיגול או V, שאם אנחנו רוצים לדוגמה עיגול או V בעיצוב מסויים – זה עשוי להיות כבר … להמשך קריאהעיצוב כפתורי צ'קבוקס ורדיו (checkbox/radio)

float vs inline-block – מתי להשתמש בכל אחת מההגדרות

לעיתים לא נדירות בכל בעת בנית אתר נצטרך למקם יותר מאלמנט אחד בשורה. אם ניקח לצורך העניין שיש לנו div – ההגדרה הדיפולטיבית שלו היא שהוא בלוק – מה שאומר שהוא כברירת מחדל יתפוס לנו שורה שלמה (אלא אם הגדרנו לו רוחב), ובנוסף, הוא ישבור שורה אחרי האלמנטים שלפניו ולפני אלו שאחריו. (קראו עוד על … להמשך קריאהfloat vs inline-block – מתי להשתמש בכל אחת מההגדרות

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

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

before & after

בCSS ישנם מס' אלמנטים פיקטיביים, שבעצם לא באמת קיימים, הם אינם חלק מהHTML, אך בCSS ניתן לתפוס אותם ולתת להם הגדרות סטייל שונות. בפוסט הזה נדבר על שתי האלמנטים before & after. האם כל אלמנט HTMLי יכול לקבל before/after? התשובה היא לא. כל אלמנט של HTML שכולל תגית פתיחה ותגית סגירה – מסוגל לקבל before וafter. … להמשך קריאהbefore & after

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

הפעם נדבר על משקל של סלקטורים. כשיש לנו שתי מופעים של אותה הגדרת CSS עבור אותו אלמנט, מי מכריע? מי דורס את מי וקובע את מה שנראה על המסך? נניח שיש לנו את המבנה הבא: <ul id="drinks"> <li class="favorite">Water</li> <li>Coffee</li> <li>Tea</li> </ul> ואנו נותנים את ההגדרות הבאות: #drinks li{ color: black; font-weight: normal; } .favorite{ … להמשך קריאהמשקל של סלקטורים

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

לא רבים יודעים, אבל ניתן לייצר צורת משולש באמצעות CSS בלבד, ללא שימוש בתמונה או סקריפט. נשמע מדהים? שימו לב לדבר הבא: ועוד אחד – למה שנשתמש בזה? קודם כל – תמיד עדיף להשתמש בCSS כשאפשר, כדי לחסוך טעינת תמונה נוספת מהשרת. עניין של מהירות טעינה. וכשיש הרבה חיצים בעמוד והשרת איטי – זה עשוי … להמשך קריאהיצירת משולש באמצעות CSS

פרק ראשון במעברים חלקים – Transition

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

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

במאמר הזה נסביר בעז"ה על סוגי הערכים שניתן לתת תחת ההגדרה של display. ומה המשמעות של כל הגדרה לעומת ההגדרות האחרות ובכלל. display: none נתחיל מהפשוטה ביותר – האלמנט כאילו לא קיים. הוא לא נראה, הוא לא תופס מקום, פוקוס לא מגיע אליו. display: block המשמעות שלו היא כשמו: בלוק. בהיעדר הגדרות ייעודיות יורד שורה אחרי … להמשך קריאהdisplay – המדריך המלא להגדרה