| »
Ana Sayfa |
| »
Linkler |
| »
İletişim |
| »
Forum |
|
Daha
iyi anlamak için yan taraftaki örneğimizdeki 4 satırlı
ve cellpadding: 2 ve cellspacing: 2 olan bir tablo yaratalım.
<TD> etiketi arasına,
bgcolor="#DDDDDD"
onmouseover="this.style.background='#808080'"
onmouseout="this.style.background='#DDDDDD'"
etiketleri yazarsanız yan taraftaki sonucu alırsınız.
|
|
 Buna
göre örneğin Ana Sayfa yazan hücremizin HTML kodu aşağıdadır:
|
|
<td
width="100%"
bgcolor="#DDDDDD"
onMouseOver="this.style.background='#808080';
this.style.color='#FFFFFF'"
onMouseOut="this.style.background='#DDDDDD';
this.style.color=''"
style="cursor:hand;"><font
face="Arial"
size="2">»
Ana Sayfa</font></td> |
|
Buradaki yazının
renklerini, this.style.color=' ' etiketi ile değiştirebileceğiniz
gibi this.style.background=' ' etiketi ile de hücre
zemini renklerini istediğiniz gibi değiştirebilirsiniz.
İsterseniz <b></b> etiketi ile yazıyı kalınlaştırıp,
<ı></ı> etiketini kullanarak da italik (eğik)
yazı tipi elde edebilirsiniz. |
|
|
|
|
Drop
Shadow (Yazıya Gölge Vermek): |
| |
|
|
»
Ana Sayfa |
|
»
Forum |
|
»
Linkler |
|
»
İletişim |
|
Grafikler
ile fazla uğraşmadan yazılarınıza gölge efekti
verebilirsiniz. Çok kullanışlı olan bu etiket ile web
sayfalarınıza hoş bir görünüm verebilirsiniz.
Burada yine <TD> etiketi arasına, kullanacağımız
etiket;
filter:dropshadow(color=#000000, offx=1,
offy=1);
Buna
göre örneğin Ana Sayfa yazısı bulunan hücrenin HTML kodu aşağıdadır:
|
|
<td
width="100%"
style="width:120;
color:#FFFFFF; filter:dropshadow(color=#000000, offx=1,
offy=1)"><font
face="Arial"
size="2">»
Ana Sayfa</font></td> |
|
Buradaki
esas yazı rengi beyaz ( #FFFFFF ) renk, gölge oluşturan
yazı ise siyah (#000000 ) renktir ve offx= ve offy= ile gölge etkisi veren yazının esas
yazıya göre uzaklığını yani gölge etkisini [( - ) işaretini
de kullanarak, aşağı-yukarı,
sağ-sol gibi] ayarlayabilirsiniz. |
| |
|
|
Yazı
ve İmajda Şeffaflık (Transparency): |
| |
|
|
Stil
= 1 |
| |
|
Stil
= 2 |
| |
|
Stil
= 3 |
|
Yazılarda
ve imajlarda Alpha filitresini uygulayarak şeffaf görüntüler
elde edebilirsiniz.
Bunun için yine <TD> etiketi arasına, kullanacağımız etiket;
filter:alpha(Opacity=??, FinishOpacity=??, Style=?, StartX=??, StartY=??, FinishX=??, FinishY=??);
Buna
göre Stil = 1 yazısı bulunan hücrenin HTML kodu:
<td width="100" style="width:120; color:#FFFFFF; filter:alpha(finishopacity=0, style=1)" bgcolor="#808080" align="center"><font face="Verdana,Arial,Geneva,Sans Serif" size="3">Stil = 1</font></td>
Stil
= 2 yazısı bulunan hücrenin HTML kodu:
<td width="100" style="width:120; color:#FFFFFF; filter:alpha(finishopacity=0, style=2)" bgcolor="#808080" align="center"><font face="Verdana,Arial,Geneva,Sans Serif" size="3">Stil = 2</font></td>
Stil
= 3 yazısı bulunan hücrenin HTML kodu:
<td width="100" style="width:120; color:#FFFFFF; filter:alpha(finishopacity=0, style=3)" bgcolor="#808080" align="center"><font face="Verdana,Arial,Geneva,Sans Serif" size="3">Stil = 3</font></td>
|
| |
|
| Stil
= 1 |
 |
| |
| Mauseover |
|
|
|
Alpha efekti ile Style uygulamasını imajlara da
uygulayabiliriz.
Ancak bu defa efekt etiketini, imajın
bulunduğu hürenin
<td> etiketi içine değil de imajın kendisine ait
ve <img ile başlayan
etiketi içine ekliyoruz.
Stil =
1 de gösterilen imajın HTML kodu:
<img border="0" src="baner.gif" width="88" height="31" style="filter:alpha(finishopacity=0, style=1)">
Mauseover
da gösterilen imajın HTML kodu:
<img border="0" src="baner.gif" width="88" height="31" onMouseOver="this.filters.alpha.opacity='100'" onMouseOut="this.filters.alpha.opacity='50'" style="filter:alpha(opacity=50)">
Dikkat ederseniz önce şeffaf görünen imaj, mause üzerine
gelince netleşiyor. Ayrılınca tekrar şeffaflaşıyor.
|
| |
|
|
IE
Scroolbar (Kaydırma Çubuğu) Renklendirmesi: |
| |
|
IE
un kaydırma çubukları renklendirmesi ise
<head></head> tagları içine doğrudan yerleştirilen
<style type='text/css'>
BODY
{scrollbar-face-color: #[renk]; scrollbar-shadow-color:
#[renk];
scrollbar-highlight-color: #[renk]; scrollbar-3dlight-color:
#[renk];
scrollbar-darkshadow-color: #[renk]; scrollbar-track-color:
#[renk];
scrollbar-arrow-color: #[renk];}
</style>
etiketleri ile yada css kodlarının bulunduğu
dosyanın web alanımızdaki yerine link vermek suretiyle
( yine
<head> </head> taglar arasına ) Örneğin; <link rel="stylesheet" type="text/css"
href="css/styles.css"> belirtmek
yoluyla sağlanır.
Yan taraftaki şekilde bu kodlara yazılacak renklerin, çubuğun neresine etki ettiği gösterilmiştir.
İsterseniz Kod Yaratıcısını Kullanabilirsiz!
|
 |
|
|
|
|
Devamı » |