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

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

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

כיצד להוסיף אפקטים מגניבים לתמונות באמצעות קצת קוד 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

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

 

= 3 + 8