לפי ויקיפדיה, מיזוג (או ״מצבי ערבוב״) בעריכת תמונות דיגיטליות וגרפיקה ממוחשבת משמש בכדי לקבוע כיצד שתי שכבות משתלבות זו בזו. במרבית היישומים מצב ברירת המחדל של מיזוג הוא פשוט להסתיר את השכבה התחתונה על ידי כיסוי של זו עם השכבה [...]
לבטח יצא לכם לראות אתרים בהם מתבצעות אנימציות שונות בזמן שאתם גוללים מטה (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@ מוצגים, וזאת על בסיס השאלה האם הפונט כבר ירד ומכן לשימוש או לא. בכדי להתמודד עם התופעה בה הטקסט כבר קיים אך הפונטים עדיין לא נטענו הדפדפן משתמש בשתי טכניקות שונות. התכונה [...]