תגית: CSS

אם אתם חווים בעיות עם התכונה position:sticky ב CSS, כלומר אם התכונה אינה עובדת לכם אז הסיבה היא בדרך כלל אחת מאלו: 1. לפני שאתם בכלל ממשיכים עליכם לוודא אם התכונה נתמכת בדפדפן שלכם...

המודול CSS Text Decoration Module Level 3 מספק לנו מספר דרכים חדשות לקִשּׁוּט ועִטּוּר טקסט בעמודים אינטרנטים, ותמיכת הדפדפנים לשמחתנו במודול זה היא די רחבה. תכונות ה CSS החדשות דוגמת text-decoration-thickness ו text-decoration-color יכולות לעזור בקִשּׁוּט ועִטּוּר טקסט וקווים תחתונים [...]

ב CSS לא ניתן לבצע אנימציה או שינוי חלק של Gradients בעזרת התכונה transition. במילים אחרות, ה transition הבא לא יעבוד: .gradient { min-height: 200px; background-image: linear-gradient( to right, hsl(49.68, 97.89%, 62.75%), hsl(200, 51.54%, 44.51%) ); transition: background-image 0.5s linear; [...]

התכונה box-shadow ב CSS מוסיפה אפקט של צל סביב המסגרת של אלמנט מסויים. ניתן להשתמש ביותר מאפקט אחד על כל אלמנט וזאת על ידי הפרדה בין אפקטים באמצעות פסיק (comma). התכונה box-shadow מתוארת על ידי הֶסֵּט (offset) בציר ה X [...]

לעיתים תכופות אנו מעוניינים להוסיף ריווח בין האלמנטים במתווה שלנו (ו margins הם כבר לא התשובה). בפוסט זה נראה כיצד להוסיף ריווח בין flex items תוך שימוש ב gap, הלא היא הקיצור של התכונות row-gap & column-gap.

CSS Grid הביא איתו לעולם יחידת מידה חדשה. זו בעצם flexible unit מסוג חדש בשם Fr unit. משמעו של Fr הוא Fractional Unit כש 1fr מייצג חלק 1 מסך השטח הפנוי.

::first-letter הוא עוד psuedo element (פסאודו אלמנט) נחמד שמאפשר לכם לעצב את האות הראשונה בטקסט הנמצא באלמנט כלשהו ללא הצורך לשנות את ה HTML או להוסיף תגית כלשהי כמו span למשל. המתודה עובדת באופן זהה לסיטואציה בה עטפתם את האות [...]

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

CSS Containment הוא מודול המתאר תכונת CSS יחידה הנקראית contain . תכונה זו מאפשרת לנו כמפתחים לבודד Subtree של אלמנט מסויים ב DOM ולהגדירו כעצמאי ונפרד משאר האלמנטים ב DOM. המטרה העיקרית של CSS Containment היא שיפור ביצועי הרינדור (rendering) [...]

flex-wrap היא תכונה ספציפית הקיימת במודול CSS flexbox. באמצעות תכונה זו ניתן לקבוע כיצד flex items יוצגו ויתנהגו ב flex container כשאין לרשותם מספיק מקום. התכונה flex-wrap אף מספקת לנו דרך מהירה להפוך flex container לרספונסיבי יותר, ולעיתים אף מסירה [...]

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

ב CSS קיימות שתי תכונות האחראיות למיזוג (blending במיים אחרות). התכונה mix-blend-mode אחראית למיזוג אלמנטים ב DOM, ולעומתה, התכונה background-blend-mode אחראית לשילוב של מספר תמונות רקע (background-image ב CSS), או שילוב של background-image יחד עם background-color.

לבטח יצא לכם לראות אתרים בהם מתבצעות אנימציות שונות בזמן שאתם גוללים מטה (On Scroll Animations). אז אשתף אתכם בספרייה בה נתקלתי בשם AOS, המאפשרת להוסיף אנימציות אלו בקלות ועם שליטת CSS מלאה על אותן אנימציות. הרעיון מאחורי AOS הוא [...]

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

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

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

בעימודים או layouts מבוססי CSS Grid - ברירת המחדל להצבת אלמנטים בגריד עצמו היא על ידי הגדרת השורות, או בעצם הגדרת קווי הגריד לפיהם יתחילו ויסתיימו אלמנטים. התכונה Grid Area היא אלטרנטיבה לקביעת קווי הגריד ומציעה דרך שֵׁמִית בה ניתן [...]

ישנה תכונה מאד שימושית בשם flex-grow שניתן להעזר בה כאשר יוצרים גריד כזה או אחר. אתן הקדמה קצרה לפני שנמשיך - כמעט בכל אתר שאני מפתח קיים שימוש בסוג של גריד כאשר האלמנטים בגריד הם בעלי גובה זהה (ראו דוגמה [...]

הסטטוס הנוכחי של CSS Selectors Level 4 הוא סוג של טיוטה, עם זאת, דפדפנים מודרניים כבר החלו להטמיע חלקים מסויימים של הספסיפיקציות החדשות. תכלס, לעולם לא יהיה CSS4 כפי שלעולם לא יהיה HTML6 אך מה שכן יהיה זה pseudo-classes ברמה [...]

התכונה object-fit מגדירה כיצד אלמנט מסויים מגיב לגובה ולרוחב של ההאלמנט העוטף אותו (Content Box). התכונה מיועדת לשימוש עבור תמונות, וידאו וסוגי מדיה אחרים שניתן להטמיע ועובדת יחד עם התכונה object-position. בפני עצמה, תכונה זו מאפשרת לנו לקצוץ (crop) תמונות [...]

התכונה font-display קובעת כיצד פונטים הנטענים באמצעות font-face@ מוצגים, וזאת על בסיס השאלה האם הפונט כבר ירד ומכן לשימוש או לא. בכדי להתמודד עם התופעה בה הטקסט כבר קיים אך הפונטים עדיין לא נטענו הדפדפן משתמש בשתי טכניקות שונות. התכונה [...]

font-face@ הוא חוק ב CSS המאפשר שימוש בפונטים מותאמים (Custom Fonts) עבור הטקסט באתר שלכם. אותם פונטים יכולים להטען משרת חיצוני באמצעות הפונקציה ()url או מהמחשב האישי של הגולש באתר שלכם באמצעות הפונקציה ()local. החוק font-face@ מאפשר לבעלי אתרים לספק [...]

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

נסביר בפוסט זה על התכונה background-clip. התכונה background-clip מאפשרת לנו לשלוט על המרחק בו תמתח תמונת הרקע (או צבע הרקע) מעבר ל Padding או לתוכן עצמו של אלמנט כלשהו. אני מניח שהסבר זה קשה להבנה ללא דוגמאות ומבט על קוד [...]

clip-path היא תכונת CSS מאד מעניינת המאפשרת לכם ״לקטום״ (clip) חלק כלשהו הגלוי לעין באלמנטים כגון SVG, תמונות ו HTML. התכונה יוצרת צורה כלשהי הקובעת איזה חלק מהאלמנט יהיה גלוי. החלק אשר בתוך הצורה יהיה גלוי והחלק מחוצה לה יהיה [...]

אימוץ הפלקסביליות של CSS Grid מספקת לנו את האפשרות ליצור אתרים עמידים וחזקים (Frontend Wise) בהם במקום להשתמש בגדלים ספציפיים וקבועים, אנו תוחמים אלמנטים בגבולות מסויימים ומאפשרים להם למלא את השטח הריק הנותר. אז לא רק ש CSS Grid שינה [...]

כמעט עשור שאני מפתח וורדפרס ובמהלך השנים שמתי לב כי זיהוי פיצ׳רים מסויימים הנתמכים בדפדפן מתבצע בעיקר באמצעות Javascript ובאמצעות ספריות כגון Modernizer ומקבילותיה. אך ישנו פיצ׳ר הקיים ב CSS שנים רבות המאפשר לנו לבדוק אם הדפדפן תומך בתכונה מסויימת לפני [...]

במדריך זה נסביר בהרחבה כיצד להשתמש ב flexbox ובתכונות ה justification וה alignment שהוא מציע (בין היתר) ליצירת גריד ועימודים שונים.

התכונה text-shadow ב CSS מוסיפה הצללה לטקסט. היא מקבלת רשימה של הצללות המופרדות בפסיק ואלו מתווסופות לטקסט ולדקורציה של אותו טקסט. כל הצללה מתוארת על ידי קומבינציה של הֶסֵּט X ו Y (במילים אחרות offset) מהאלמנט, רדיוס טשטוש (blur radius), [...]

זה יהיה פוסט קצר וקולע. אם אינכם מכירים את Slick Slider - זוהי ספריית Javascript המאפשרת ליצור סליידרים/קרוסלות בצורה מאד נוחה. כתבתי מאמר על השימוש ב Slick Slider, מוזמנים לתת מבט אם אינכם מכירים. בפוסט זה נראה כיצד כיצד להוסיף אנימציות [...]

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

CSS Variables, הנקראים גם CSS Custom Properties כעת נתמכים בכל הדפדפנים המודרנים והם פונקציונליות לה מפתחי Frontend חיכו המון זמן. הם מביאים את הכח של שימוש במשתנים ל CSS וכתוצאה מכך מספר החזרות על קוד קטן יותר, הקוד קריא יותר [...]

נסביר בצורה רחבה על הפונקציה minmax של CSS Grid. אחד הפיצ׳רים השימושיים שהוצגו יחד עם הספסיפקציות של CSS Grid הינו הפונקציה minmax. הפוקנציה פותחת לנו דלת ומאפשרת לכתוב CSS חזק ותמציתי יותר על ידי כך שמאפשרת לנו לקבוע ערך מינימלי [...]

נתחיל ונאמר כי CSS Grid הוא מודול המאפשר ליצור עימוד (Layout) המבוסס רשת (Grid) על ידי שימוש בעמודות ושורות. ניתן לומר, שעד לא מזמן העימוד ב HTML נבנה באמצעות Tables, Floats ועוד תכונות כאלה ואחרות ב CSS שלא התאימו ליצירת עמודים [...]