תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

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

מחבר:
בתאריך:

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

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

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

מקור התמונה שעליה נדגים את הפילטר של CSS

 

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

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

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

וזו התוצאה:

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

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

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

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

 אפקט חלקי של שחור לבן באמצעות פילטרים CSS

 

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

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

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

אפקט sepia באמצעות פילטרים של CSS

 

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

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

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

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

אפקט opacity באמצעות פילטרים של CSS

 

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

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

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

אפקט טשטוש באמצעות blur של CSS

 

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

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

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

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

אפקט contrast באמצעות CSS

 

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

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

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

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

אפקט brightness באמצעות CSS

 

פילטר hue-rotate

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

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

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

אפקט hue-rotate באמצעות CSS

 

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

הפילטר 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));
}

מדגים הוספת צל לתמונות באמצעות פילטר של CSS

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

 

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

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

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

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

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

 

לסיכום

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

 

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

 

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

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

 

 

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

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

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

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

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

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

דג למים הוא כמו ציפור ל...?