Presets
Filters
Blur0px
Brightness105%
Contrast110%
Saturate130%
Grayscale0%
Sepia45%
Invert0%
Hue Rotate0deg
Opacity100%
Generated CSS
filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);Category:css
Mode:Offline
Version:1.0.0
Access:Free
מהו מחולל מסנן CSS?
מחולל מסנן CSS הוא עורך חזותי עבור מאפיין מסנן CSS.אתה מזיז מחוון עבור כל פונקציית סינון - טשטוש, בהירות, ניגודיות, רוויה, גווני אפור, ספיה, הפוך, גוון-סיבוב ואטימות - וצופה באפקט חל על תצוגה מקדימה בזמן אמת, ואז מעתיק את ה-CSS המדויק שהוא מייצר.
מאפיין Filter מחיל אפקטים גרפיים כמו טשטוש, העברת צבע והתאמת ניגודיות ישירות בדפדפן, ללא צורך בעורך תמונות. ניתן לשרשר מספר פונקציות בהצהרה אחת והן מיושמות לפי הסדר, וכך בנויים מראה בסגנון צילום כגון וינטג', חם ודרמטי. כלי זה מנהל עבורך את השרשרת הזו ומוציא רק את הפונקציות ששינית בפועל, ושומר על ה-CSS נקי.
הכל קורה בדפדפן שלך. התחל מהגדרה מראש כמו וינטג' או גווני אפור, כוונן כל פונקציה והעתק את ההצהרה. אין חשבון, אין העלאות, והוא ממשיך לעבוד במצב לא מקוון לאחר טעינת הדף.
מסננים חלים בסדר הכתוב, והסדר משנה את התוצאה: גווני אפור אז ספיה זה לא זהה לספיה ואז גווני אפור, כי הראשון מסיר את הצבע שהשני היה גוון. הגוצ'ה שכדאי לדעת הוא מבני ולא ויזואלי. כל אלמנט עם מסנן מלבד אף אחד הופך לבלוק מכיל עבור צאצאיו הקבועים והממוקמים באופן מוחלט, כך שנפתח או מודאלי בתוך הורה מסונן יתמקם מול אותו הורה במקום נקודת המבט. זה גם יוצר הקשר הערמה חדש, שיכול לשבור סדר אינדקס z שעבד קודם לכן. אם מסנן שובר פריסה באופן שנראה לא קשור למראה, זה כמעט תמיד הסיבה לכך שמסננים מואצים ב-GPU ברוב הדפדפנים, אבל רדיוסי טשטוש גדולים על אלמנטים גדולים נשארים יקרים.
כיצד להשתמש במחולל מסנן CSS?
1
בחר הגדרה מראש או התחל נקי
בחר הגדרה מראש כגון וינטג', חם, קריר, דרמטי או גווני אפור למראה מיידי, או התחל מברירת המחדל (ללא פילטרים מוחלים).
2
כוונן את מחווני המסנן
גרור את המחוונים של הטשטוש, הבהירות, הניגודיות, הרוויה, הגווני האפור, הספיה, ההיפוך, הגוון-סיבוב והאטימות. התצוגה המקדימה מתעדכנת באופן מיידי כך שתוכל לחייג את המראה המדויק.
3
לשלב פונקציות
שכב מספר פונקציות יחד - למשל ספיה פלוס ניגודיות פלוס רוויה למראה סרט חם הכלי משרשר אותן בסדר הנכון באופן אוטומטי.
4
העתק את ה-CSS
העתק את הצהרת המסנן שנוצרה, הכוללת רק את הפונקציות ששינית, והדבק אותה על כל אלמנט או תמונה בגיליון הסגנונות שלך.
תכונות מפתח
כל המסננים הסטנדרטיים
טשטוש, בהירות, ניגודיות, רוויה, גווני אפור, ספיה, הפוך, גוון-סיבוב ואטימות - כל פונקציית מסנן CSS נפוצה עם מחוון ייעודי
תפוקה מינימלית
רק הפונקציות שאתה משנה בפועל נכתבות להצהרה, כך שלעולם לא תשלח ערכי זהות מיותרים כמו בהירות (100%)
תצוגה מקדימה חיה
תצוגה מקדימה מתעדכנת באופן מיידי תוך כדי גרירה, כך שתוכל לראות את האפקט המשולב של כל מסנן לפני העתקת שורה בודדת של CSS
הגדרות קבועות מראש בסגנון צילום
מתכונים אוצרים לוינטג', חמים, קריר, דרמטיים, דהויים, גווני אפור, הפוך וטשטוש נותנים לך נקודת התחלה מוכחת במקום קנבס ריק
Frequently Asked Questions
המאפיין CSS Filter מחיל אפקטים גרפיים כגון טשטוש, בהירות, ניגודיות ומעברי צבע לאלמנט לפני שהוא מוצג. אתה יכול לרשום מספר פונקציות סינון בהצהרה אחת, והן מיושמות בסדר הכתוב.
Related Tools
CBS
css
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CGG
css
CSS Glassmorphism Generator
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius - then copy production-ready CSS.
CSS
css
CSS Gradient Generator
Create beautiful CSS gradients with live preview
CTS
css
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!
css filter generatorcss filterfilter cssimage filter csscss blurcss grayscalecss brightnesscss sepiahue rotate css