לאקספלורר של מיקרוסופט יש, מאז גירסה 5.5, את התכונה המדהימה הנקראת filter. אשר בעזרתה ניתן ליצור אפקטים שובי עין.
- alpha קובע את רמת השקיפות של אלמנט.
- BasicImage כיוונון של תהליך הצביעה, סיבוב, והשקפה של האלמנט.
- blur מטשטש את האלמנט (כאילו שהוא אינו בפוקוס).
- chroma גורם לצבע מסויים שנבחר להיות שקוף באלמנט.
- dropshadow כיוון ועומק צילו של האובייקט, יוצר את האשליה שהאלמנט מרחף ומטיל צל.
- emboss מבליט את דמות האלמנט בגווני אפור.
- engrave יוצר את דמות האלמנט כאילו חרוט בתוך הרקע בגווני אפור.
- glow האלמנט יקבל זוהר בצבע נבחר
- light הקרנת אור כלפי האלמנט
- MaskFilter הופך את הפיקסלים השקופים של תמונה לאטומים ואת האטומים לשקופים וכך מאפשר צפיה דרך תמונה.
- shadow יוצר אשליה שהאלמנט מטיל צל.
- wave עיוות האלמנט בכיוון מסויים
- fliph הפיכה אופקית של האלמנט
- flipv הפיכה אנכית של האלמנט
קיימים פילטרים נוספים רבים, אולם אנו ריכזנו כאן את אלו העיקריים. מידע נוסף אודות פילטרים ומעברים, תוכלו למצוא במאמר: Visual Filters and Transitions Reference
בנוסף לפילטרים, קיימים גם 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 אולם הגדרתם לא תפריע לשימוש התקין בדפדפנים אחרים. |
דוגמא נוספת לשימוש בפילטרים היא הפיסקה המופיעה על גבי התמונה המוצגת להלן:
ולאלו מכם המתעניינים בקוד של תמונה זו, הנה הקוד המלא:
<html>
<head>
<style type="text/css">
div.background
{
width:
500px;
height: 250px;
background: url(http://www.w3schools.com/Css/klematis.jpg)
height: 250px;
background: url(http://www.w3schools.com/Css/klematis.jpg)
repeat;
border: 2px solid black;
}
div.transbox
{
width: 400px;
border: 2px solid black;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border:
margin: 30px 50px;
background-color: #ffffff;
border:
1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3
/* for IE */
filter:alpha(opacity=60);
/* CSS3
standard */
opacity:0.6;
}
div.transbox p
{
margin: 30px 40px;
opacity:0.6;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text
that is placed in the transparent box.
This is some text that is placed in the
This is some text that is placed in the
transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text
This is some text
that is placed in the transparent box.
</p>
</div>
</div>
</p>
</div>
</div>
</body>
</html>
</html>
רשומות
אין תגובות:
הוסף רשומת תגובה