כיצד להוסיף אפקטים מגניבים לתמונות באמצעות קצת קוד CSS?

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

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

זו התמונה שבה נשתמש בדוגמאות:

פילטר להפיכת תמונות לשחור-לבן

הפילטר grayscale משמש אותנו להפיכת תמונות לשחור לבן. לדוגמה:

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

וזו התוצאה:

ערך של 1 גורם לאפקט מלא, וערך של 0 משאיר את התמונה ללא שינוי.

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

img {
  -webkit-filter: grayscale(0.5);
  filter: grayscale(0.5);
}

פילטר שגורם לתמונה חומה יותר (sepia)

הפילטר sepia גורם לתמונה להיות חומה יותר. ערך של 1 גורם לאפקט מלא, וערך של 0 משאיר את התמונה ללא שינוי.

img {
  -webkit-filter: sepia(1);
  filter: sepia(1);
}

פילטר שגורם לשקיפות

הפילטר opacity גורם לתמונה להיות שקופה. ערך של 1 גורם לתמונה להיות שקופה לחלוטין, בעוד ערך של 0 משאיר את התמונה ללא שינוי.

לדוגמה, תמונה בשקיפות של 50%.

img {
 -webkit-filter: opacity(0.5);
  filter: opacity(0.5);
}

פילטר לטשטוש התמונה

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

img {
 -webkit-filter: blur(5px);
  filter: blur(5px);
}

פילטר שגורם לשינוי בניגודיות התמונה

הפילטר contrast גורם לשינוי בניגודיות התמונה. ערך של 0 יגרום לתמונה להיות שחורה לחלוטין, ערך של 100% לא משנה את הניגודיות המקורית, וערך גבוה מ-100% גורם לניגודיות גבוהה יותר.

לדוגמה, ערך של 300%

img {
 -webkit-filter: contrast(300%);
  filter: contrast(300%);
}

פילטר לשינוי בהירות התמונה

הפילטר brightness משנה את בהירות התמונה. ערך 0 יגרום לתמונה שחורה לחלוטין. בעוד ערך של 100% משאיר את התמונה ללא שינוי, וערך גבוה מ-100% גורם לתמונה בהירה יותר.

לדוגמה, ערך של 200%

img {
 -webkit-filter: brightness(200%);
  filter: brightness(200%);
}

פילטר hue-rotate

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

לדוגמה, אפקט של 45%

img {
 -webkit-filter: hue-rotate(45deg);
  filter: hue-rotate(45deg);
}

פילטר להוספת צל

הפילטר drop-shadow מוסיף צל לתמונות. הפילטר עובד בדומה לbox-shadow אבל הצל מתאים את עצמו לכל התמונה ולא רק לשוליים החיצוניים.

img {
  -webkit-filter: drop-shadow(10px 10px 14px rgb(140,140,140,0.8));
  filter: drop-shadow(10px 10px 14px rgb(140,140,140,0.8));
}

הסבר מפורט על התחביר תוכלו למצוא במדריך הוספת צל לתיבות ולטקסט באמצעות CSS3

שימוש במספר פילטרים על אותו אלמנט

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

לדוגמה, שימוש בשני פילטרים. לדוגמה, hue-rotate ביחד עם פילטר שחור לבן.

img {
  -webkit-filter: hue-rotate(45deg) grayscale(50%);
  filter: hue-rotate(45deg) grayscale(50%);
}

לסיכום

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

לכל מדריכי ה-CSS3

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים