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

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

ההגדרה בקוד היא מאוד בסיסית ופשוטה להבנה

 filter: blur(25px);

למשל כאן יצרנו אפקט עם עוצמת טשטוש של 25 פיקסלים.

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

טקסט חי לדוגמה

שימו לב שכדי שהאפקט יעבוד בכל הדפדפנים יש צורך להוסיף prefix להגדרת הקוד לפי התמיכה שנרצה:

כרום וספארי –webkit
פיירפוקס –moz
אופרה –o
אקספלורר (כרגע לא תומך) –ms

ככה שההגדרה הקודמת שלנו תראה בקוד עכשיו כך:

-moz-filter: blur(25px);
-ms-filter: blur(25px);
-o-filter: blur(25px);
-webkit-filter: blur(25px);
filter: blur(25px);

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

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