עריכת תמונות ב-CSS: מצבי מיזוג | Envato Tuts+

פרסומת
תכנון תשתיות רפואיות


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

פרסומת

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

דוגמה מה יהיה אזור המיזוג בין שתי תמונותדוגמה מה יהיה אזור המיזוג בין שתי תמונות

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

מצבי מיזוג זמינים

  • נוֹרמָלִי: במצב זה, הצבע הסופי יהיה הצבע העליון. הערך של הצבע התחתון לא ישפיע על התוצאה הסופית.
  • לְהַכפִּיל: במצב זה, הצבעים העליונים והתחתונים מוכפלים כדי לקבל את הצבע הסופי. הצבע המתקבל תמיד יהיה כהה לפחות כמו כל אחד מהמרכיבים. זה מרמז שעם שכבה שחורה התוצאה הסופית תמיד תהיה שחורה. שימוש בשכבה לבנה לא ישפיע על התוצאה הסופית.
  • מָסָך: במצב זה, הצבע הסופי מתקבל על ידי היפוך של הצבעים העליונים והתחתונים, הכפלתם ואז שוב היפוך התוצאה. הצבע הסופי תמיד יהיה בהיר כמו הצבע העליון או התחתון. זה מרמז ששימוש בשכבה לבנה יהפוך הכל ללבן, ושכבה שחורה לא תשפיע על התוצאה הסופית.
  • כיסוי: במצב זה, הצבע הסופי מתקבל על ידי הכפלה או הקרנה של הצבעים המקוריים על סמך הצבע התחתון. אם הצבע התחתון כהה יותר, הצבעים המקוריים מוכפלים, ואם הוא בהיר יותר, הם מוקרנים. ההדגשות והצללים של הצבע התחתון נשמרים במצב זה.
  • לְהַכּהוֹת: זה די בסיסי. הצבע הסופי במצב זה הוא הצבע הכהה יותר בין השכבה העליונה והתחתונה.
  • לְהִתְבַּהֵר: זהו היפוך של כהה, והצבע הסופי הוא, לפיכך, הצבע הבהיר יותר בין השכבה העליונה והתחתונה.
  • התחמקות צבע: במצב זה, הצבע התחתון מחולק בהיפוך של הצבע העליון כדי לקבל את הערך הסופי. לא תראה שינויים עם רקע שחור במצב זה. אם הצבע העליון הוא ההפוך מהצבע התחתון, הצבע הסופי יהיה גרסה מוארת לחלוטין של הצבע העליון.
  • צריבת צבע: הצבע הסופי במצב זה מיוצר על ידי חלוקת היפוך של הצבע התחתון בערך הצבע העליון והיפוך הערך המתקבל. אם הצבע העליון הוא לבן, לא תראה שום שינויים. צבע עליון שהוא היפוך של הצבע התחתון יביא לתמונה שחורה לחלוטין.
  • אור קשה: מצב אור קשה הוא היפוך מצב שכבת-על. במקרה זה, אם הצבע העליון כהה יותר, הצבעים המקוריים מוכפלים, ואם הוא בהיר יותר, הם מוקרנים. זה בעצם מצב שכבת על כשהשכבות מוחלפות.
  • אור רך: מצב זה הוא בדיוק כמו אור קשה, אך מפיק תוצאות סופיות רכות יותר.
  • הֶבדֵל: מצב זה מוריד את הערך של הצבע הכהה יותר מהצבע הבהיר יותר כדי לקבל את הערך הסופי. זה מרמז שלצבע השחור לא תהיה השפעה, בעוד שלבן יהפוך את הצבע של השכבה השנייה.
  • הוֹצָאָה מִן הַכְלַל: מצב מיזוג זה דומה להבדל, אך לתוצאה הסופית יש ניגודיות נמוכה יותר.
  • צֶבַע: מצב מיזוג זה משתמש בגוון של הצבע העליון וברוויה ובבהירות של הצבע התחתון כדי ליצור את הצבע הסופי.
  • רִוּוּי: במצב זה, לצבע הסופי יש את הרוויה של הצבע העליון ואת הגוון והבהירות של הצבע התחתון.
  • צֶבַע: מצב מיזוג זה מייצר צבע סופי עם הגוון והרוויה של הצבע העליון והבהירות של הצבע התחתון. מצב זה שומר על רמות האפור של הצבע התחתון וניתן להשתמש בו לגוון תמונות צבעוניות.
  • בְּהִירוּת: לצבע הסופי במצב זה יש את הבהירות של הצבע העליון, בעוד שערכי הגוון והרוויה מגיעים מהצבע התחתון. זה בדיוק כמו מצב הצבע אבל עם השכבות מוחלפות.

בנוסף, ישנן שתי דרכים להשתמש במצבי מיזוג. אתה יכול להשתמש ב mix-blend-mode, הקובע כיצד תוכן של אלמנט משתלב עם התוכן של האלמנט שמתחתיו וכן עם הרקע של האלמנט. ה background-blend-modeלעומת זאת, קובע כיצד תמונות הרקע של אלמנט משתלבות זו עם זו ועם צבע הרקע של האלמנט.

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

דוגמה לתמונה המשולבת עם צבע צהבהב תוך שימוש במצבי מיזוג שוניםדוגמה לתמונה המשולבת עם צבע צהבהב תוך שימוש במצבי מיזוג שוניםדוגמה לתמונה המשולבת עם צבע צהבהב תוך שימוש במצבי מיזוג שונים

יצירת גבולות לא סדירים

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

שילוב של מפת ארהשילוב של מפת ארהשילוב של מפת ארה

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

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

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

מיזוג שיפועים צבעוניים

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

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

1
div {
2
  background: url('image-url'), linear-gradient(red, orange, yellow, green, blue, indigo, violet), linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
3
  background-blend-mode: luminosity, overlay;
4
  // More CSS rules
5
}

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

מיזוג טקסט ביחד

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

הדמויות משתמשות ב- mix-blend-mode רכוש, והגוף משתמש background-blend-mode. הנה ה-CSS הרלוונטי:

1
body {
2
  background: #D63 url('image-url') no-repeat;
3
  background-blend-mode: multiply;
4
  background-size: cover;
5
}
6

7
h1 span {
8
  mix-blend-mode: hard-light;
9
}
10


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

מחשבות אחרונות

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

אם יצרת משהו מעניין עם מצבי מיזוג, אנא שתף ​​את עבודתך בהערות למטה.



קישור לכתבת המקור – 2016-02-27 06:39:02

Facebook
Twitter
LinkedIn
Telegram
WhatsApp
Email
פרסומת
X-ray_Promo1

עוד מתחומי האתר