וובמאסטר - תיכנות ובניית אתרים

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

רן בר-זיק ,‏ אינטרנט ישראל‏ ‏/‏ 4 אפריל, 2003
F+
F-
לאקספלורר של מיקרוסופט יש, מאז גירסה 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
    תגיות: CSS‏  /  מדריך‏  /  בניית אתרים‏  

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

    תגובות למאמר



    תגיות פופולאריות

    X
    הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
    וובמאסטר © כל הזכויות שמורות