Merhabalar.. İlk olarak bu dersi Video olarak anlatmayı düşünmüştüm fakat şuan farkettim ki mikrofonumda yine sorun devam ediyor ve ses kaydını çok az alıyordu.. Sanırım Windows 7 yüklemem ile ilgili bir durum, internetten araştırdım fakat başaramadım bu sorunu çözen varsa yorum olarak bildirmesini dilerim.. Konuya geçelim.

Bilindiği üzere Photoshop ile harikalar yaratılmakta.. Çoğu menü, link ya da butonlar iki ayrı Photoshop dosyası kullanarak hover yöntemiyle değişen tipte iki resmi tek bir resim gibi göstermemizi sağlıyor.. CSS derslerimin başından beri sizlere anlatmak istediğim olay ise şuydu; Photoshop harika bir programdır, ona diyecek lafımız yok, lakin Photoshop’u bu gibi basit bileşenleri oluşturmaktansa daha profesyonel işler için kullanmalıyız.. Bu konuda basit bir hover efekti ile bir h1 etiketine nasıl stil kazandırırız bunu göstereceğim.

[download]Demo için tıklayınız.[/download]

• İlk olarak html kaynağımıza bir başlık ve içerisine  link girelim;

<h1><a href="#"> Zingocan CSS </a></h1>

• Şimdi yavaş yavaş CSS kodlarımızı oluşturmaya başlayalım. İlk olarak bir body tag’i girip renk ayarlarını oluşturuyorum;

body {
background: #666;
padding: 1em;
}

• Bu ayarlar basit CSS kodlarından oluşuyor. Değerleri dilediğiniz gibi oluşturabilir hatta isterseniz hiç yazmayabilirsiniz.Burada önemli olan kodlarımız h1 ile alakadardır. hover özelliği kullanmadan önce ilk olarak h1 tag’ini şekillendirelim;

h1 {
position: relative;
font-size: 200px;
margin-top: 0;
font-family: 'Myriad Pro', 'Myriad', helvetica, arial, sans-serif;
text-shadow: 2px 3px 3px #292929;
letter-spacing: -7px;
}

• Kodlarımızda, Arka tarafta görünecek olan Gölgemizin tek bir şema üzerinde ve sadece bir tane başlığı göstermesi için position: relative özelliğini kullandık. Diğer alanlar ise isteğe bağlı değiştirilebilir değerlerdir. Biz en başta h1 tag’i içerisinde bir link oluşturmuştuk. h1 etiketine ait css özelliklerini girdik fakat bundan sonra yapacağımız işlemler, bu link ile alakadar olmalı. Bunun için;

h1 a {
text-decoration: none;
color: #ffffff;
position: absolute;
text-shadow: 0 2px 0 #e9e9e9;
}

• Bu defa yukarıda kullandığımız relative değerini Link oluşum sırasında kayma meydana gelmemesi için absolute olarak değiştirdim. Linkimize bir renk ve text-shadow ile bir gölge ekledim. Gölge etiketi içerisine gölgeyi betimlemesi için boyut ve renk kodlarını kullandım.Şimdi de  mouse ile linkin üzerine gelindiğinde hover özelliği aktif yapabilmek için bir kaç kod girmem gerekecek, aslında bu durumda web-kit özelliklerini kullanarak daha biçimsel bir durum elde edebiliriz fakat hover metodunun sadece renk özelliğini kullanıyorum;

h1:after {
color: #dbdbdb;}

• Burada Aslında beyaz renkte olan linkimizin üzerine gelindiğinde #dbdbdb renk kodu içeren bir renge dönüşmesini istedik.Şimdiye kadar yaptığımız şeyleri aslında Firefox gibi daha modern tarayıcılarda tamamlamış bulunuyoruz. Yalnız İnternet explorer ve Chrome gibi tarayıcılarda Firefox ile aldığımız sonucu bunlarda da alamayabiliriz. Çünkü internet Explorer 8 itibariyle şuanda gölge efekti tam verim ile görünmemekte. Bu işlemi düzeltmek için ve güzel görünmesini istediğimiz başlığın gölge efekti kötü olmasından sa hiç olmamasını istiyoruz. Bu yüzden aşağıda gösterdiğim farklılıktaki web-kit kodlarını ekliyoruz;

body {
 background: #666;
 padding: 1em;
 }
 h1 {
 position: relative;
 font-size: 200px;
 margin-top: 0;
 font-family: 'Myriad Pro', 'Myriad', helvetica, arial, sans-serif;
 text-shadow: 2px 3px 3px #292929;
 letter-spacing: -7px;
 -webkit-text-stroke: 1px white;
 }
 h1 a {
 text-decoration: none;
 color: #ffffff;
 position: absolute;
 -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,1)));
 text-shadow: 0 2px 0 #e9e9e9;
 -webkit-transition: all .3s;
 -moz-transition: all .3s;</strong></span>
 transition: all .3s;
 }
 h1 a:hover {
 color: #185a50;
 -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.3)), to(rgba(0,0,0,1)));
 }
 h1:after {
 color: #dbdbdb;
 content : attr(baslik);
 }

Dikktatinizi çektiyse h1:after bölümü oluşturduk ve buna bir content ekledik. Content’in ismi  baslik diye görünüyor. Bu işlem bizim başlık alanımızı bütünlememize yarayacak fakat bu baslik ismini de h1 tag’inin içerisine gömmemiz gerekecek bunun için de;

<h1 baslik="Zingocan CSS"> <a href="#"> Zingocan CSS </a> </h1>

Baslik  bölgemizi oluşturmamız gerekiyor.

Hayırlı ramazanlar dilerim =)