מדריך CSS – פילטרים ומעברים

‏ • Internet Israel

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

  • alpha קובע את רמת השקיפות של אלמנט.
  • BasicImage כיוונון של תהליך הצביעה, סיבוב, והשקפה של האלמנט.
  • blur מטשטש את האלמנט (כאילו שהוא אינו בפוקוס).
  • chroma גורם לצבע מסויים שנבחר להיות שקוף באלמנט.
  • dropshadow כיוון ועומק צילו של האובייקט, יוצר את האשליה שהאלמנט מרחף ומטיל צל.
  • emboss מבליט את דמות האלמנט בגווני אפור.
  • engrave יוצר את דמות האלמנט כאילו חרוט בתוך הרקע בגווני אפור.
  • glow האלמנט יקבל זוהר בצבע נבחר
  • light הקרנת אור כלפי האלמנט
  • MaskFilter הופך את הפיקסלים השקופים של תמונה לאטומים ואת האטומים לשקופים וכך מאפשר צפיה דרך תמונה.
  • shadow יוצר אשליה שהאלמנט מטיל צל.
  • wave עיוות האלמנט בכיוון מסויים
  • fliph הפיכה אופקית של האלמנט
  • flipv הפיכה אנכית של האלמנט

    בנוסף לפילטרים, קיימים גם transitions, היוצרים מעברי דף מעניינים ומסקרנים. ממש כשם שתגיות <META> יכולות להפיק מעברים מסוגננים, ניתן להשתמש בתכונות דומות גם בשימוש בCSS. לימוד של כל סוגי הפילטרים והמעברים יחרוג ממטרת המדריך הזה, אולם הנה מספר דוגמאות קצרות לשימוש בפילטרים:

    <img style="filter:blur(strength=50)BasicImage(mirror=1)"
        src="myPic.jpg" height="80" width="80" border="0">
    p{filter:glow(color=yellow, strength=4)wave(freq=3,strength=5);
        color:green; width:80%;}
    img{filter:revealtrans(duration=2.0,transition=10); width:100%}
    

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

  • תגיות: , ,

    רן בר-זיק

    מתכנת PHP מנוסה ובעל ידע רב בפיתוח לאינטרנט על בסיס LAMP. מומחה במערכות דרופל, ג'ומלה ו-וורדפרס. שולט היטב בכל מה שקשור לפרונט אנד: JavaScript: jQuery ו-MooTools,ActionScript 2/3 וכמובן HTML 5 + CSS 3.אינטרנט ישראל: www.internet-israel.com

    תגובות בפייסבוק