Harika CSS Link Düzenleme Yöntemleri

Tarih: 29 Temmuz 2010   Yazar: SO  |  1.868 kez okundu
Harika CSS Link Düzenleme Yöntemleri

Css ile tasarımları kendinize göre özelleştirmek ve yeni yeni özellikler katmak yada css teknikleri ve css hakkında daha çok bilgi sahibi olmak için bu tarz konular önem teşkil ediyor. O yüzden kısa bir aradan sonra css ile ilgili aklımda bir yazı dizisi var bunları kategorilere ayırıp o kategori içerisinde toplu yazılar olarak paylaşmayı düşünüyorum. Önerileriniz olursa iletirseniz sevinirim. Ayrıca geçenlerde elime geçen bir kitap var ki gerçekten harika. Almancanız var ise kesinlikle bir şekilde temin etmeniz gerekir. Kitap amazon.com‘da satılıyor.

Bu gün sizlerle başlığımıza uygun olarak css ile linklerimize çeşitli özellikler katacağız eminim çok hoşunuza gidecektir.

1. Renk Geçiş Efekti

CSS3 ün gelişi ile birlikte bazı özellikler de gelmeye ve daha fazla fonksiyonel olmaya başladı özellikle bunlardan biri transition özelliği bu özellik ile linklerinizin üzerine geldiğinizde lnklerin renginin değişmesini sağlar bütün tarayıcılarda çalışması için gerekli css kodlamamız aşağıda:

a:hover {
   color:#000;
   -webkit-transition:color 500ms ease-in;
   -moz-transition:color 500ms ease-in;
   -o-transition:color 500ms ease-in;
   transition:color 500ms ease-in;
}

2. Shadow(Gölge) Efekti

Shadow özelliğini bilenleriniz çok fazla vardır eminin genellikle yazılarımıza veya arka planında gölge oluşturmak istediğimi elementlere gölge eklememizi sağlayan bir css fonksiyonu üzerine gelindiğinde oluşan gölgelik için aşağıdaki tekniği kullanabilirsiniz.

a:hover {text-shadow: 1px 1px 1px rgba(0,0,0,.4);}

3. Hareket ettirme

Farklı farklı fonksiyonları mevcut ancak mouse ile üzerine geldiğinde linklerinizin yukarı veya aşağıya hareket etmesini sağlıyor.

a:hover {position: relative; top: 2px;}

4. Opacity (Soldurma)

Linklerinizin veya dilerseniz resimlerinizin rengini bile soldurmanızı sağlar oldukça basit bir kullanım yöntemi var.


Resimleri soldurmak için

a.img {opacity: .5;}

Linkleri soldurmak için

::selection {
	background: #a8d1ff; /* Safari */
}

::-moz-selection {
	background: #a8d1ff; /* Firefox */
}

5. Linkleri 1px İndirin

Oldukça hoş bir özellik linklere tıklarken linkin bir pixel aşağıya inmesini sağlıyor dikkat edilmesi gereken nokta mouse ile üzerine gelmesi ile inen değil tıklanması ile inen özellikten bahsediyoruz.

a:active {
     position: relative;
     top: 1px;
}

Evet css ile ilgili link örneklerimiz bu kadar bir başka dersimizde de başka bir alanı ele alıp o alan ile ilgili farklı örnekleri göstereceğiz sorbizeyi takip etmeyi unutmayın

Ayrıca şuralarda ki yazılara da bakabilirsiniz:


    Bu yazı için 3 yorum yapılmış.
  1. Burak Dülgar dedi ki:

    Güzel bir derleme olmuş. Teşekkürler Said.

  2. Serkan dedi ki:

    Teşekkürler. Böyle makaleler çok işime yarıyor gerçekten :)

  3. Fırat Göksel dedi ki:

    Teşekkürler işime yarayacak :)


Yorum yazmak istermisiniz?

Sorbize RSS Beslemesi    Sorbize E-Posta Aboneliği    Sorbize'yi Facebooktan Takip Edin    Sorbize'yi Twitter'dan Takip Edin    Abone

Yazılar E-Posta'na Gelsin:

Lazım Olabilir
  • Webmaster Portalı
  • Url Kısaltma Servisi
  • Sorbize.com bir çok kategoride güzel ve özgün makaleler okuyabileceğiniz güncel web 2.0 bir blogdur.
    © Tüm Hakları Saklıdır.
    Bu websitesi DMCA Protection ile lisanslanmıştır. Yazılar kaynak belirtilmeden kullanılamaz.