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:

3 Yorum

  1. admin 29 Temmuz 2010
  2. Serkan 29 Temmuz 2010
  3. Fırat Göksel 31 Temmuz 2010

Yorum Yaz