25 דוגמאות ל-backdrop-filter ב-CSS בצירוף קוד ודוגמאות חיות
התכונה backdrop-filter ב-CSS מחילה אפקטים ויזואליים על מה שנמצא מאחורי אלמנט. בפוסט זה תמצאו 25 דוגמאות מעשיות, קוד מוכן להעתקה וכלי אינטראקטיבי.
פוסטים בנושא: עיצוב ו-CSS
CSS היא שפת העיצוב של הווב – שליטה על מתווה ופריסות, טיפוגרפיה, אנימציות ועיצוב רספונסיבי. בקטגוריה זו תמצאו מדריכים על יסודות ותכונות מודרניות שתוכלו ליישם כבר היום.
חדשים ב-CSS? התחילו עם מדריך למתחילים. לפריסות, היכנסו למדריך CSS Grid ולמדריך Flexbox. תמצאו גם מדריכים על תכונות מודרניות כמו CSS Nesting, הסלקטור ()has:, משתני CSS ו-property@.
CSS Container Queries – מדריך מלא עם דוגמאות אינטראקטיביות
תארו לכם את הסיטואציה הבאה: בניתם קומפוננטה כלשהי, סוג של כרטיס מוצר למשל. הוא נראה מושלם באזור התוכן הראשי – תמונה בצד, פרטים לידה, מרווח ונעים. ואז המעצב שלכם זורק את אותו כרטיס לתוך סיידבר של 280px, ואותו רכיב מתפרק. [...]
התכונה aspect-ratio ב-CSS: מדריך ויזואלי עם דוגמאות חיות
התכונה aspect-ratio ב-CSS מאפשרת להגדיר את היחס בין רוחב לגובה של אלמנט. במקום לקבוע את שני המימדים בצורה מפורשת, מגדירים את היחס והדפדפן מחשב את המימד השני באופן אוטומטי. זה שימושי בכל מקום – תמונות רספונסיביות, מקומות שמורים לווידאו, פריסות [...]
התכונה property@ ב-CSS: מדריך מקיף עם דוגמאות חיות
@property מעניק למשתני CSS יכולת שמעולם לא הייתה להם: מערכת טיפוסים (Type System) המאפשרת להגדיר לדפדפן שמשתנה מסוים הוא צבע, זווית או אורך למשל. יכולת זו פותחת עולם של אפשרויות כמו אנימציות גרדיאנט (gradients) או אנימציות ל borders למשל. יכולות [...]
איך ליצור Gradient Borders ב-CSS (עם דוגמאות חיות)
CSS מאפשר להגדיר borders בצבע אחד, אבל אינו תומך ב-gradient כברירת מחדל. אך ניתן עם כמה טכניקות להוסיף בכל זאת gradient borders לכפתורים, כרטיסים או כל דבר אחר כדי להבליט אלמנטים חשובים בעמוד. בפוסט הזה תלמדו מה זה gradient borders, [...]
CSS image-set: התמונה האידיאלית עם fallback לפורמטים ישנים
הפונקציה image-set ב-CSS מאפשרת להגדיר מספר גרסאות של אותה תמונה כך שהדפדפן יוכל לבחור את הגרסה האופטימלית ביותר באופן אוטומטי, כך שניתן יהיה לקבל ביצועים טובים יותר כמו גם לשמור על תאימות למכשירים ישנים. כשמדובר על פיתוח אתרים השימוש ב [...]
עיצוב טופס של HubSpot באמצעות CSS (וורדפרס)
הטמעת טופס של HubSpot ישירות בתוך קובץ תבנית של ערכת העיצוב באתר וורדפרס מעניקה לכם שליטה מלאה על המיקום והמבנה – אבל מה לגבי העיצוב? במדריך זה תלמדו כיצד לעקוף את עיצובי ברירת המחדל של HubSpot ולהחיל סגנונות CSS מותאמים [...]
מדריך CSS למתחילים – כל מה שאתם צריכים לדעת
CSS (גיליונות סגנון מדורגים – Cascading Style Sheets) היא השפה ששולטת במראה של אתרי אינטרנט. בעוד ש-HTML מגדיר את המבנה והתוכן של עמוד, CSS אחראית על כל מה שוויזואלי – צבעים, גופנים, מרווחים, פריסות ואנימציות. במדריך זה אלווה אתכם דרך [...]
CSS Nesting: מדריך מקיף עם דוגמאות
ניתן לומר ש- CSS Nesting הוא סוג של מהפכה באופן בו מפתחים כותבים CSS בכך שהוא מאפשר לכללי CSS לשקף ישירות את המבנה ההיררכי של HTML. לא רק שהשימוש ב CSS Nesting משפר את קריאות הקוד, אלא גם מאפשר תחזוקה [...]
התכונה text-wrap ב- CSS: הסבר על pretty ו balance
התכונה text-wrap ב- CSS מספקת דרך לשלוט באופן בו הטקסט נשבר בתוך קונטיינר. בעוד שבדרך כלל שבירת הטקסט מתבססת על חוקים בסיסיים, ערכים חדשים כמו pretty ו-balance מאפשרים אפשרויות מתקדמות יותר לטיפוגרפיה מאוזנת וקריאה יותר. בפוסט זה נבחן כיצד ערכים [...]