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

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

שימוש במסנני CSS

אתה מחיל מסנני CSS באמצעות לְסַנֵן מאפיין ומאפיין המציין את סוג האפקט המוחל. כל מאפיין מסנן הוא פונקציית CSS, כלומר עובד בדומה למשתנה CSS פוּנקצִיָה. הוא מקבל פרמטר כדי לציין עד כמה המסנן צריך להשפיע על האלמנט המעוצב.

ישנן 10 פונקציות סינון CSS זמינות לסגנון אלמנט ה-HTML שלך:

  • לְטַשׁטֵשׁ()
  • בְּהִירוּת()
  • בניגוד()
  • drop-shadow()
  • גווני אפור()
  • hue-rotate()
  • לַהֲפוֹך()
  • אֲטִימוּת()
  • לְהַרְווֹת()
  • חוּם כֵּהֶה()

אתה יכול להשתמש במסננים אלה בנפרד או בשילוב כדי ליצור סגנונות ייחודיים ולשפר את המראה של רכיבי ה-HTML שלך.

חלק מהמסננים הללו עובדים הרבה יותר טוב עם אחרים כאשר משתמשים בהם בצורה נכונה.

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

instagram viewer

1. גווני אפור וספיה

ה גווני אפור() מסנן מסיר את כל מידע הצבע מתמונה או אלמנט טקסט. המסנן מקבל ערך בין 0 ל-1, כאשר 0 פירושו הצבע המקורי ו-1 הוא אפקט גווני האפור המלא.

ה חוּם כֵּהֶה() מסנן מחיל אפקט של גוון ספיה על תמונה או אלמנט טקסט. המסנן מקבל גם ערך בין 0 ל-1.

לדוגמה:

img {
לְסַנֵן: גווני אפור(14%) חוּם כֵּהֶה(30%);
}

שילוב גווני אפור() ב-14% ו חוּם כֵּהֶה() ב-30% יכול ליצור אפקט וינטג' או רטרו על התמונה שלך.

2. הפוך והרווי

ה לְהַרְווֹת() מסנן מגדיל או מקטין את הרוויה של תמונה או אלמנט טקסט. המסנן לוקח ערך בין 0 לאינסוף, כאשר 1 הוא הצבע המקורי וערכים גבוהים יותר מגבירים את הרוויה.

ה לַהֲפוֹך() מסנן יהפוך את הצבעים של תמונה או אלמנט טקסט על ידי הפיכת הגוון של כל צבע קיים ב-180 מעלות בגלגל הצבעים. המשמעות היא שהפילטר משנה את רמות הבהירות והרוויה של האלמנט תוך שמירה על הגוון.

לדוגמה:

img {
לְסַנֵן: לַהֲפוֹך(30%) לְהַרְווֹת(75%);
}

קוד זה הופך את צבעי התמונה ומגדיל את הרוויה ב-75%.

3. גוון-סיבוב וניגודיות

ה hue-rotate() המסנן מסובב את הגוונים של אלמנט תמונה או טקסט, מה שאומר שהוא משנה את הצבע הכללי של האלמנט תוך שמירה על רמות הבהירות והרוויה. ניתן לציין את כמות הסיבוב במעלות, כאשר 0 מייצג את הצבע המקורי ו-360 מייצג סיבוב מלא בחזרה לצבע המקורי.

שילוב של hue-rotate() ו בניגוד() מסננים יכולים ליצור אפקט תוסס וצבעוני על התמונות שלך.

לדוגמה:

img {
לְסַנֵן: גוון-סובב(10דרג) בניגוד(150%);
}

גוון-סיבוב יכול לקבל ערך של דרג, גראד, rad, או לפנות. הקוד לעיל מסובב את הגוון של התמונה ב-10 מעלות ומעלה את הניגודיות.

4. בהירות וטשטוש

מסנני הבהירות והטשטוש מאוד מסבירים את עצמם. הראשון מכוון את בהירות התמונה שלך, והאחרון שולט ברמת הטשטוש המוחל.

שילוב של בְּהִירוּת() ו לְטַשׁטֵשׁ() מסננים יכולים ליצור אפקט חלומי ורך על התמונות שלך.

לדוגמה:

img {
לְסַנֵן: בְּהִירוּת(0.8) לְטַשׁטֵשׁ(5פיקסלים);
}

הקוד לעיל מקטין את הבהירות ב 0.8 (80%) ומחיל א 5 פיקסלים אפקט טשטוש לתמונה.

5. טיפת צל ואטימות

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

בינתיים, מסנן האטימות שולט בשקיפות של אלמנט.

שילוב של drop-shadow() ו אֲטִימוּת() מסננים יכולים ליצור אפקט עדין על רכיבי הטקסט שלך.

לדוגמה:

אפקט טקסט {
שינוי צורה: לתרגם(-50%, -50%);
צֶבַע: שָׁחוֹר;
טיפת צל: 10פיקסלים 9פיקסלים 9פיקסליםבז';
אֲטִימוּת: 70%;
}

בדוגמה זו, הצללית ממוקמת 10 פיקסלים מימין ו-9 פיקסלים למטה, עם רדיוס טשטוש של 9 פיקסלים. צבע הצל מצויין כבז'. כמו כן צוין אטימות של 70%.

שימוש במצבי מיזוג CSS

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

כמה ממקרי השימוש הפופולריים ביותר עבור מצבי מיזוג CSS כוללים:

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

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

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

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

הנה דוגמה לשימוש מצב ערבוב לשילוב טקסט ותמונה.

HTML:

<divמעמד="מְכוֹלָה">
<img
 src=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
 class="background-image"
 />
<divמעמד="תוֹכֶן">
<h1>ברוך הבאh1>
<ע>שלום משתמש!ע>
div>
div>

CSS:

.מְכוֹלָה {
עמדה: מוּחלָט;
רוֹחַב: 100%;
גוֹבַה: 100%;
}
.תמונת רקע {
רוֹחַב: 100%;
גוֹבַה: 100%;
התאמה לאובייקט: כיסוי;
}


.תוֹכֶן {
עמדה: מוּחלָט;
חלק עליון: 50%;
שמאלה: 50%;
שינוי צורה: לתרגם(-50%, -50%);
יישור טקסט: מֶרְכָּז;
מצב ערבוב: הֶבדֵל;
}


h1 {
גודל גופן: 60פיקסלים;
צֶבַע: לבן;
}
ע {
גודל גופן: 40פיקסלים;
צֶבַע: לבן;
}

ה הֶבדֵל מצב מיזוג מחשב את ההבדל המוחלט בין ערכי הצבע של הטקסט והתמונה הכהה הבסיסית.

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

שילוב של מסננים ומצבי מיזוג

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

הנה דוגמה המשלבת את מצב המסנן והמיזוג כדי ליצור אפקט מורכב יותר:

.my-element {
לְסַנֵן: בְּהִירוּת(150%) גוון-סובב(180דרג) טיפת צל(0פיקסלים 0פיקסלים 10פיקסליםrgba(0, 0, 0, 0.5));
מצב ערבוב: מָסָך;
}

קוד זה משלב את המסננים; בְּהִירוּת, גוון-סובב, טיפת צל, וכן א מצב ערבוב בעל ערך מָסָך לתמונה. זה מגביר את הבהירות ב-150%, בעוד hue-לסובב יהפוך את צבעי התמונה ב-180 מעלות.

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

שליטה במסננים ובמצבי מיזוג

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

אם תתנסו יותר בטכניקות אלו, תוכלו להוסיף רמה נוספת של עניין ויזואלי לעיצובים שלכם.