CSS Grid הוא מודול המאפשר ליצור עימוד (layout) המבוסס רשת (grid) תוך שימוש בעמודות ושורות. עד לא מזמן, העימוד ב HTML נבנה בעזרת floats, tables ועוד תכונות CSS כאלו ואחרות שבהחלט לא התאימו ליצירת עמודים או מבנה מורכב. ואז...
פוסט אש מאז ומתמיד השימוש בגריד היה חלק בלתי נפרד מעולם העיצוב ופיתוח האתרים. כמפתחי Frontend, לבטח נתקלתם באתרים הבנויים על CSS Framework כלשהו דוגמת Bootstrap, Tailwind CSS ואחרים, המאפשרים (בין היתר) שימוש בקלאסים מוכנים ליצירת גריד הבנוי משורות ועמודות. אך...
פוסט אש אם אתם עוקבים אחר הבלוג, לבטח אתם יודעים כי כבר נכתבו לא מעט פוסטים ברשת (זה למשל) על השימוש ב Anime.js ליצירת אנימציות Javascript כאלו ואחרות. פוסט זה גם כן מדבר על שימוש בספרייה מגניבה זו על מנת להוסיף...
לפי ויקיפדיה, מיזוג (או ״מצבי ערבוב״) בעריכת תמונות דיגיטליות וגרפיקה ממוחשבת משמש בכדי לקבוע כיצד שתי שכבות משתלבות זו בזו. במרבית היישומים מצב ברירת המחדל של מיזוג הוא פשוט להסתיר את השכבה התחתונה על ידי כיסוי של זו עם...
לבטח יהיה מאד קשה למצוא אתר אינטרנט בו אין לפחות סוג אחד של כפתור. לכפתורים תפקיד חשוב באתרי אינטרנט ואלו בדרך כלל אלמנטים שנועדו בכדי לגרום למשתמש לבצע פעולה כלשהי. בפוסט הבא אציג מספר סוגים של אפקטים בעת ריחוף...
התכונה background-clip מאפשרת לנו לשלוט על המרחק בו תמתח תמונת הרקע (או צבע הרקע) מעבר ל Padding או לתוכן עצמו של אלמנט כלשהו. אני מניח שהסבר זה קשה להבנה ללא דוגמאות ומבט על קוד אז תכף נראה כמה מאלו,...
clip-path היא תכונת CSS מאד מעניינת המאפשרת לכם ״לקטום״ (clip) חלק כלשהו הגלוי לעין באלמנטים כגון SVG, תמונות ו HTML. התכונה יוצרת צורה כלשהי הקובעת איזה חלק מהאלמנט יהיה גלוי. החלק אשר בתוך הצורה יהיה גלוי והחלק מחוצה לה...
CSS Flexbox כמו גם CSS Grid הם כלים מצויינים בכדי לנהל מתווה (layout) באתרים. flexbox דואגת לעימוד חד מימדי בצורה נפלאה, ו CSS Grid פותר לנו את עניין העימוד הדו-מימדי בעזרת עמודות ושורות. לעיתים תכופות אנו מעוניינים להוסיף ריווח...
פוסט אש המודול CSS Text Decoration Module Level 3 מספק לנו מספר דרכים חדשות לקִשּׁוּט ועִטּוּר טקסט בעמודים אינטרנטים, ותמיכת הדפדפנים לשמחתנו במודול זה היא די רחבה. תכונות ה CSS החדשות דוגמת ו יכולות לעזור בקִשּׁוּט ועִטּוּר טקסט וקווים תחתונים בדרכים...
זהו פוסט קצר המתאר כיצד ליצור קו מפריד עם אלמנט באמצע, מעין סוג של divider עם טקסט או תמונה כאשר משמאל ומימין לו קיים אותו קו מפריד לטובת דקורציה. אז נאמר ואני מבקש מכם לעשות קו מפריד עם תמונה/טקסט...
טיפוגרפיה עניינה אותי מהרגע שהתחלתי לפתח אתרים ולהתעניין בעיצוב, ועוד לפני שהיה שימוש נרחב בפונטי רשת. ולמרות שפונטי רשת קיימים כבר כמעט עשר שנים, תמיד נאלצנו לאזן בין כמות הפונטים בהם רצינו להשתמש מול כמות המידע אותו המבקרים באתר...
לבטח יצא לכם לראות אתרים בהם מתבצעות אנימציות שונות בזמן שאתם גוללים מטה (On Scroll Animations). אז אשתף אתכם בספרייה בה נתקלתי בשם AOS, המאפשרת להוסיף אנימציות אלו בקלות ועם שליטת CSS מלאה על אותן אנימציות. הרעיון מאחורי AOS...
Lity היא ספריית lightbox קלת משקל, נגישה ורספונסיבית התומכת בתמונות, וידאו, iframes ואף inline content. הספרייה שוקלת כ 3K בלבד כאשר היא דחוסה ובמידה ו gzip מופעל בשרת שלכם. בפוסט קצר זה נראה כיצד להשתמש בה בכדי להציג תוכן...
כבר כתבתי בעבר מדריך המתיימר לכסות את הנושא של Flexbox. קיימת תכונה המוזכרת שם בקצרה ומאד שימושית כשיוצרים גריד כזה או אחר. אתן הקדמה קצרה לפני שנמשיך – כמעט בכל אתר שאני מפתח קיים שימוש בסוג של גריד כאשר...
בעימודים או layouts מבוססי CSS Grid – ברירת המחדל להצבת אלמנטים בגריד עצמו היא על ידי הגדרת השורות, או בעצם הגדרת קווי הגריד לפיהם יתחילו ויסתיימו אלמנטים. התכונה Grid Area היא אלטרנטיבה לקביעת קווי הגריד ומציעה דרך שֵׁמִית בה...
היא תכונה ספציפית הקיימת כחלק מהמודול CSS flexbox. באמצעות תכונה זו ניתן לקבוע כיצד flex items יוצגו ויתנהגו ב flex container כשאין לרשותם מספיק מקום. התכונה מספקת לנו דרך מהירה להפוך flex container לרספונסיבי יותר, ולעיתים אף מסירה...
CSS Grid הביא איתו לעולם יחידת מידה חדשה. זו בעצם flexible unit מסוג חדש בשם Fr unit. משמעו של Fr הוא Fractional Unit כש 1fr מייצג חלק 1 מסך השטח הפנוי. מטה אציג שתי דוגמאות לשימוש ב fr unit,...
...טופס עם כל שדות המידע על אותו משתמש. עלכם למחוק את הערך שנמצא תחת השדה ולהחליף אותו בסיסמה החדשה שלכם. תחת העמודה function בחרו MD5 מתפריט הבחירה ולחצו על הכפתור Go. הסיסמה כעת תהיה מוצפנת באמצעות MD5 hash ותשמר...
הסטטוס הנוכחי של CSS Selectors Level 4 הוא סוג של טיוטה, עם זאת, דפדפנים מודרניים כבר החלו להטמיע חלקים מסויימים של הספסיפיקציות החדשות. תכלס, לעולם לא יהיה CSS4 כפי שלעולם לא יהיה HTML6, אך מה שכן יהיה זה סלקטורים...
WebP הוא פורמט תמונות שפותח על ידי גוגל ב 2010 ונוצר בכדי להוות אלטרנטיבה לפורמטים כגון PNG ו JPG. הפורמט מציע גודל קובץ קטן בהרבה מאלו וכל זאת כאשר הוא שומר על איכות תמונה די זהה. שימו לב לדוגמאות...
פוסט אש אחד האספקטים בו אתרים משתרכים מאחורי אפליקציות native הוא חווית משתמש חלקה. התפיסה של חוויה חלקה מגיעה ברובה מתגובת הממשק הגרפי לאינטראקציות המשתמש, ופעולת הגלילה של תוכן היא חלק חשוב מאותן אינטראקציות. מול אותן מגבלות, פנו מפתחי ה frontend...
CSS Containment הוא מודול המתאר תכונת CSS יחידה הנקראית . תכונה זו מאפשרת לנו כמפתחים לבודד Subtree של אלמנט מסויים ב DOM ולהגדירו כעצמאי ונפרד משאר האלמנטים ב DOM. המטרה העיקרית של CSS Containment היא שיפור ביצועי הרינדור (rendering)...
התוסף Advanced Custom Fields בגירסת ה Pro שלו מגיע עם האופציה להוסיף ״שדה חזרה״ (Repeater Field). שדה חזרה מאפשר למשתמש להוסיף מספר שורות (rows) בלתי מוגבל (תיאורטית) לפוסט או עמוד בוורדפרס. שדה זה יכול להיות פתרון אידיאלי עבור הלקוח...
הוא עוד psuedo element (פסאודו אלמנט) נחמד שמאפשר לכם לעצב את האות הראשונה בטקסט הנמצא באלמנט כלשהו ללא הצורך לשנות את ה HTML או להוסיף תגית כלשהי כמו למשל. המתודה עובדת באופן זהה לסיטואציה בה עטפתם את האות...
ב CSS לא ניתן לבצע אנימציה או שינוי חלק של Gradients בעזרת התכונה . במילים אחרות, ה הבא לא יעבוד: במקרה של הקוד מעלה, המעבר בין מצב אחד לשני לא יהיה חלק אלא יקפוץ מיידית בין שני המצבים. זה...
