מחולל מסנן CSS

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

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

הכל קורה בדפדפן שלך הדף נפתח על ההגדרה המוגדרת מראש של Vintage; בחר הגדרה מוגדרת מראש אחרת, כוונן כל פונקציה והעתק את ההצהרה. אין חשבון, אין העלאות, והוא ממשיך לעבוד במצב לא מקוון לאחר טעינת הדף.

הנה מחולל מסנן CSS על מראה תמונה חמה לחץ על מסנן הקביעה מראש של Warm ו-CSS שנוצר: בהירות (105%) רוויה (140%) ספיה (25%); כשהתצוגה המקדימה עוברת לכיוון ענבר. גרור את Blur ל-2px והקו הופך למסנן: טשטוש (2px) בהירות (105%) רוויה (140%) ספיה (25%);. לחץ על אין, או לחץ על איפוס, והוא חוזר לסנן: אין; מכיוון שהתצוגה המקדימה היא דגימת צבע קבועה ולא תמונה משלך, בדוק את ה-CSS המועתק בתמונה האמיתית לפני שאתה שולח אותה.

מסננים חלים בסדר הכתוב, והסדר משנה את התוצאה: גווני אפור אז ספיה זה לא זהה לספיה ואז גווני אפור, כי הראשון מסיר את הצבע שהשני היה גוון. הגוצ'ה שכדאי לדעת הוא מבני ולא ויזואלי. כל אלמנט עם מסנן שאינו אף אחד הופך לבלוק מכיל עבור צאצאיו הקבועים והממוקמים באופן מוחלט, כך שנפתח או מודאלי בתוך הורה מסונן יתמקם מול אותו הורה במקום נקודת המבט. זה גם יוצר הקשר הערמה חדש, שיכול לשבור סדר אינדקס z שעבד קודם לכן. אם מסנן שובר פריסה באופן שנראה לא קשור למראה, זה כמעט תמיד הסיבה. מסננים מואצים ב-GPU ברוב הדפדפנים, אבל רדיוסי טשטוש גדולים על אלמנטים גדולים נשארים יקרים. כלי זה תמיד כותב את הפונקציות בסדר קבוע אחד, מטשטש ראשון ואטימות אחרונה, כך שהוא לא יכול לייצר ספיה לפני גווני אפור; סדר מחדש את הפונקציות ביד לאחר העתקה אם אתה צריך את זה.