SePortal
Üye
Kullanıcı Adı:

Şifre:

Sonraki ziyaretimde beni otomatik kaydet!

Şifremi unuttum?
Kayıt



Site İçinde    


Gelişmiş arama

Ders Bölümleri
Dersler
En Çok İzlenenler
Son Eklenen Dersler
En Çok Beğenilenler
Tümünü Göster

Derslerde Ara


Dönüşümlü 10 Ders
Filitreler
Fireworks Genel Tanıtımı
PSP - Metalik Yazı Yapımı
PSP - Resim Eskitme
PSP -Perspektif
Pixel Desenler (Pixel Patterns)
Fireworks Pop-up Menü Yapımı
Micro Buton Yapımı
Flash da Mouse'a İz Yapmak
PSP - Paslı Zemin Yapımı

Site Bilgileri
Sitede 27 kategoride, toplam 93 ders,
Toplam 85 indirilebilir dosya, 63.829 kez indirilme,
Sitedeki derslere uyumlu 8 kategoride, toplam 52 link,
Forumlarda 697 konu, 1.406 ileti bulunmaktadır.
Sitede toplam 13.299 kayıtlı üyemiz var. En yeni üyemiz: mustulk

Şimdiye kadarki en yüksek aktif ziyaretçi sayısı: 131 - Tarih: 21.07.2008 14:45

Toplam ziyaret: 1.620.984
Bugünkü ziyaret: 218

Aktif Kullanıcılar: 11
Şu anda 0 kayıtlı kullanıcı (arasında 0 tanesi gizli) ve 11 ziyaretçi online.
Ana Sayfa / Dersler / Web Tasarımı / CSS Etiketleri / CSS - Örnekleri

CSS - Örnekleri
RSS Feed: CSS - Örnekleri (Dersler)
Eklenme Tarihi: 07.11.2005 - 21:45   (İzlenme: 28809)
Yorumları Oku (1)
Yorum Ekle
Dersi Yazdır / İndir
Yazdır

Sayfalar:

CSS Etiketleri
 
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.
» 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!





Yazan: Yorum:
bekdik
Üye

Kayıt Tarihi: 01.11.2006
Yorumlar: 1
css etiketleri

Renk değiştirme etiketini uyguladım oldu.Ama köprü etiketini uyguladığımda yani URL verdiğimde tüm özellikler kayboldu.(Tex-decaratiıon=none)=Alt çizgiyi kaldırdım yeniden renk verdim.Ama yinede olmadı. Not.Frontpage-2003
03.11.2006 21:09 Offline bekdik beyazpegasus at hotmail.com

RSS Feed: CSS - Örnekleri (Dersler)

Google
 
Editörlerimiz | Link Bannerlarımız | Reklam | Site Amacı | Sık Sorulan Sorular | Yasal Uyarı & Kullanım Şartları
Sizden Gelenler | Site Haritası | Dosyalar