צרו אפקט זכוכית חלבית לממשק. כוונו טשטוש, שקיפות ומסגרת, והעתיקו CSS מוכן לפרויקט. בחינם, בלי הרשמה.
אפקט הזכוכית החלבית הטרנדי לעיצוב אתרים מודרני.
נבנה מהיסוד לפרטיות קפדנית, הרצה מיידית ואפס חיכוך. בלי מנויים, חומות תשלום או הרשמה.
כוונו טשטוש, אטימות ורוויה בזמן אמת על רקע חי, וראו מיד את אפקט הזכוכית.
מייצר אוטומטית קוד backdrop-filter עם קידומת webkit, לתאימות ב-Safari, Chrome ו-Firefox.
צרו מחלקות CSS רגילות, או תרגמו את העיצוב מיד למחלקות עזר של Tailwind CSS.
הכול רץ בצד הלקוח: גוררים מחוונים ורואים את עדכון ה-CSS המתמטי בלי השהיה.
השוו את מנוע ה-WebAssembly המקומי שלנו לכלי ענן ישנים.
| מאפיין | Utiliome (דפדפן מקומי) | ממירי ענן ישנים |
|---|---|---|
| תצוגה חיה | קנבס אינטראקטיבי בזמן אמת | מחוללי קוד סטטיים |
| פלט קוד | CSS רגיל ומחלקות עזר של Tailwind | CSS בלבד |
| תאימות | מוסיף אוטומטית -webkit-backdrop-filter | דורש קידומות ידניות |
| עלות | בחינם לתמיד ובלי פרסומות | חומת תשלום על פריסות פרימיום |
בלי התקנת תוכנה. הכול רץ ישירות בדפדפן.
השתמשו במחוון הטשטוש כדי לקבוע עד כמה הרקע מאחורי כרטיס הזכוכית יהיה חלבי.
שנו את ערוץ האלפא של צבע הרקע, לגוון צפחה כהה עדין או למראה חלבי לבן ובהיר.
לחצו על ייצוא כדי להעתיק קטע CSS מוכן לייצור ישירות ללוח.
תשובה קצרה: Glassmorphism הוא טרנד ממשק מודרני: רקעים שקופים למחצה עם טשטוש רקע חזק (זכוכית חלבית), צללים עדינים בשכבות ומסגרות דקות. הוא יוצר עומק והיררכיה על ציר האנכי.
הסגנון התבסס ב-macOS Big Sur, ב-iOS וב-Fluent Design של Windows 11, והפך לסטנדרט בפועל לאפליקציות ווב מודרניות ופרימיום.
הפילוסופיה נשענת על "ציר Z". השכבה העליונה שקופה למחצה ומטשטשת בחוזקה את השכבות הצבעוניות שמתחתיה, וכך נוצרת היררכיה בלי צללים קשים. המשתמש רואה מה קורה "מאחורי" החלון הפעיל.
תשובה קצרה: המאפיין backdrop-filter מפעיל אפקטים גרפיים כמו טשטוש או הזזת צבע על האזור שמאחורי האלמנט. בניגוד ל-filter שטושטש את האלמנט עצמו, backdrop-filter משפיע רק על מה שנראה דרך הרקע השקוף.
כדי להשיג Glassmorphism, מפתחים נשענים על כלל ה-CSS backdrop-filter. כשמגדירים צבע רקע שקוף למחצה (למשל background: rgba(255, 255, 255, 0.2);) ומוסיפים backdrop-filter: blur(10px);, מנוע הרינדור לוקח את הפיקסלים שמאחורי האלמנט, מטשטש אותם מתמטית וצובע אותם בתוך האלמנט.
מכיוון שהדפדפן מחשב מחדש פיקסלים בזמן גלילה, זה מאפיין מואץ בחומרה. המחולל של Utiliome מחשב את המדדים האלה מיד, ואפשר לראות את השפעת הביצועים בזמן אמת.
תשובה קצרה: ל-Tailwind CSS יש כלי עזר מובנים לאפקט זכוכית. משלבים 'backdrop-blur-md', 'bg-white/30' ומסגרת דקה 'border-white/20' ומקבלים מראה חלבי בלי CSS מותאם.
CSS מותאם מצוין ללמידה, אבל מפתחים מודרניים מעדיפים לעיתים מסגרות עזר כמו Tailwind.
כדי לבנות כרטיס זכוכית ב-Tailwind צריך שלוש שכבות:
backdrop-blur-md או backdrop-blur-lg כדי להחליב את הרקע.bg-white/20 (מצב בהיר) או bg-slate-900/40 (מצב כהה) כדי לתת לזכוכית נוכחות.border border-white/20.המחולל של Utiliome כולל מתג לפלט CSS רגיל או למחרוזת מחלקות Tailwind מעוצבת.
תשובה קצרה: Safari דרש היסטורית את הקידומת '-webkit-' למסנני רקע. בלי הקידומת האפקט נכשל ב-iOS וב-macOS, ונשארת תיבה שקופה שטוחה.
מלכודת נפוצה ביישום Glassmorphism היא שכחת חומרת Apple. Chrome ו-Firefox תומכים ב-backdrop-filter באופן מובנה, אבל Safari (במיוחד גרסאות iOS ישנות) דורש קידומת ספק.
בלי -webkit-backdrop-filter: blur(10px); משתמשי Apple יראו div שקוף ומבלבל, והטקסט יהיה בלתי קריא על הרקע.
מחולל ה-CSS של Utiliome מזריק אוטומטית את קידומות ה-WebKit הנדרשות, כך שהעיצוב נראה זהה במערכות ההפעלה המרכזיות.
תשובה קצרה: Glassmorphism נכשל לעיתים בנגישות, כי טקסט על רקע מטושטש וצבעוני לא עומד ביחסי הניגודיות של WCAG. צבע הטקסט חייב להיות כהה (או בהיר) מספיק ביחס לגוון הממוצע של הזכוכית.
הביקורת הנפוצה על המגמה היא נגישות חלשה. אם תמונת רקע צבעונית עוברת מכחול כהה לצהוב בוהק מאחורי הכרטיס, טקסט לבן עלול להיעלם.
הפתרון הוא גוון רקע חזק (אטימות). לטקסט לבן, למשל, השתמשו ברקע כמו rgba(0, 0, 0, 0.6). כך, לא משנה איזו תמונה עוברת מאחורי הזכוכית, הטקסט שומר על יחס ניגודיות מינימלי של 4.5:1.
תשובה קצרה: לוח זכוכית חלבית שיושב שטוח על המשטח לא נראה כמו זכוכית. צריך להרים אותו בצל רחב ועדין (למשל box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)) כדי להפריד אותו משכבת הרקע.
המוח צריך רמזי תאורה כדי לפרש עומק. טשטוש רקע בלבד יכול להיראות 'שטוח'.
כדי שהזכוכית תבלוט, מרימים אותה על ציר Z. המחולל של Utiliome מאפשר לכוונן box-shadow עדין. אטימות צל נמוכה (כ-10%) ורדיוס טשטוש גבוה (32px) יוצרים הסתרה סביבתית רכה שמפרידה את הזכוכית מהרקע הצבעוני.
כל מה שצריך לדעת על מחולל Glassmorphism ל-CSS החינמי של Utiliome.
Safari דורש את הקידומת '-webkit-backdrop-filter'. Utiliome מייצר את הקידומת הזו אוטומטית בייצוא ה-CSS, לתאימות בין דפדפנים.
כן. במחולל יש מתג שמתרגם את העיצוב למחלקות עזר של Tailwind (למשל backdrop-blur-md bg-white/30).
כן. שימוש מוגזם בטשטוש כבד על אלמנטים גדולים עלול לגרום להשהיה במכשירים חלשים, כי ה-GPU מחשב מחדש פיקסלים בזמן גלילה.
זכוכית אמיתית מחזירה אור בקצוות. הוסיפו מסגרת מוצקה של 1px באטימות נמוכה מאוד (כמו rgba(255, 255, 255, 0.2)) כדי לדמות את ההחזרה.
כן, 100% בחינם, בלי מגבלות, בלי פרסומות ובלי הרשמה.