Renk Değiştirme
CSS Etiketlerini pek bilinmeyenlerinden birisi olan ve Java Script kullanmadan menü ve yazı renklerini değiştirmeye yarayan onmouseover="this.style.background='' "
onmouseout="this.style.background='' " etiketini tanıyacağız.
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.
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):
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);
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):
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=??);
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.
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.
Bu forumda yeni başlıklar açamazsınız Bu forumdaki başlıklara cevap veremezsiniz Bu forumdaki mesajlarınızı değiştiremezsiniz Bu forumdaki mesajlarınızı silemezsiniz Bu forumdaki anketlerde oy kullanamazsınız
Arama
Rütbeliler
Profil
Giriş
