Internet Explorer`ın Multimedia Filter özelliği sayesinde metin ve grafiklerimize, parlaklık, renk değişimi ve gölge gibi efektler verebiliriz. Internet Explorer, 4.0 `dan itibaren 14 farklı efekti destekler, Netscape ise henüz desteklemiyor. Filtreleri ister Head kısmında Style tag`i içinde, ister bir katmanda style attribute`u içinde kullanabilirsiniz. Şimdi bu filtrelerimizi tanımaya başlayalım.
ALPHA : Nesnenin opasitesini (donukluğunu) belirler. Kullanılışı :
Filter: Alpha(Opacity=xxx, FinishOpacity=xxx, Style=xxx, StartX=xxx, StartY=xxx, FinishX=xxx, FinishY=xxx)
Opacity= Nesnenin Transparan oranını belirler. 0-100 arasında değer alır. 0 değeri tamamen transparan yapar.
FinishOpacity= Opsiyonel olarak bulunur, son opaklık derecesini verir.
Style= Opaklığın tipini belirler. Alacağı değerler, 0 (Uniform ), 1 (Linear), 2 (Radial) ve 3 (Rectangular)
StartX, StartY, FinishX, FinishY= Opaklığın başlayacağı ve biteceği koordinatları belirler.
<div class="katman1" style="font-size: 100px; color: red; position: absolute; filter: Alpha(Opacity=80, Style=3, StartX=0, StartY=0)">
KATMAN 1
</div>
Örneği Görüntülemek için Tıklayın
BLUR : Nesnenin belirli yönlerde piksellerini kaydırarak bulanıklık-ışık yansıması efekti verir. Resim ve metinlerde farklı sonuçlar verebilir. Kullanılışı :
Filter: Blur(add=xxx, direction=xxx, strength=xxx)
Add= 1 veya 0 değeri alır. 1 hareketli bölüme gerçek nesneyi ekler, 0 ise eklemez.
Direction= Saat yönünde açısal değerler alır. 45 derecenin katları şeklinde açısal değerlere sahip olabilir.
Strenght= Efektin kaç piksel uzağa uygulanacağını belirler.
<div class="katman2" style="font-size: 100px; color: red; position: absolute; Filter: Blur(add=1, direction=135, strength=10)">
KATMAN 2
</div>
Örneği Görüntülemek için Tıklayın
CHROMA : istediğiniz bir rengi nesne üzerinde transparan hale getirir. Bu sayede kullandığınız bir resimdeki istediğiniz bir rengi mesela zemini yok edebilirsiniz. Tabii bu rengin tam kodunu bilmeniz şart. Kullanılışı :
Filter: Chroma(color=xxx)
<div class="katman3" style="background-color: blue; font-size: 100px; color: red; position: absolute;
Filter: Chroma(color=red)">
KATMAN 3
</div>
Örneği Görüntülemek için Tıklayın
DROPSHADOW : Nesneye istediğimiz renk ve açıda gölge verebilmemizi sağlar. Kullanılışı :
Filter: DropShadow(color=xxx, OffX=xxx, OffY=xxx, Positive=xxx)
OffX ve OffY= Gölgenin objeden x ve y koordinatlarına göre ne kadar uzakta olacağını belirler. Değerler piksel cinsinden verilir ve eksi (-) değer de alabilir.
Positive= Sıfır haricinde herhangi bir sayısal değer gölgenin transparan alanlardan bağımsız bir şekilde oluşmasını sağlar.
<div class="katman4" style="font-size: 100px; color: red; position: absolute; Filter: DropShadow(color=black, OffX=7, OffY=7, Positive=1)">
KATMAN 4
</div>
Örneği Görüntülemek için Tıklayın
FLIP HORIZONTAL & VERTICAL : Nesneyi yatay ve dikey konumda döndürerek gösterir. Kullanılışı :
Filter: FlipH
Filter: FlipV
<div class="katman5" style="font-size: 100px; color: red; position: absolute; Filter: FlipH">
KATMAN 5
</div>
Örneği Görüntülemek için Tıklayın
GRAY : Nesnenin renk derinliğini yok ederek sadece gri tonlarda görünmesini sağlar. Kullanılışı :
Filter: Gray
<div class="katman6" style="position: absolute; Filter: Gray">
<img src="http://tasarimk.kolayweb.com/resimler/menulogo.gif">
</div>
Örneği Görüntülemek için Tıklayın
Devamı diğer sayfada...
| |
