Sizi Bir Adım İleri Taşıyacak CSS Teknikleri

 

Sayfadaki seçilen metinleri renklendirin
 

Sadece bu CSS kodu ile Firefox , Safari ve Opera tarayıcılarda sayfa üzerinde seçilen metinlerin arkaplan renklerini değiştirebilirsiniz.

Demo : http://jsfiddle.net/teknoblogo/AqKfH/

!important

Tasarımlarınızda sonradan değiştirilmesini istemediğiniz CSS tanımlamalarına!importantekleyebilirsiniz. !important kodu o tanımlamanın önem derecesini arttırır ve daha sonra üzerine yazılmasını engeller.

Demo : http://jsfiddle.net/teknoblogo/PHXLe/

Düz metinleri grafiklerle değiştirin

Tasarımcıların ikilemde kaldıkları bir konudur bu. Web sayfanızın logosunu ve sloganını düz yazı şeklinde yazarsanız ziyaretçileriniz için hoş bir görüntü olmayabilir, bir grafik kullanırsanız da arama motorları bunu okuyamayacaktır. İşte bu soruna bir çözüm getirip, ufak bir SEO iyileştirmesi olarak bu teknik kullanılabilir.

text-indent ile düz metinleri sayfanın 9999px uzağına itiyoruz. Böylece arama motorları sayfanızı ziyaret ettiklerinde bu düz yazıyı görüyor ancak normal ziyaretçiler geldiğinde sadece arkaplan grafiği olarak tanımladığınız grafiği görüyorlar. Ancak width ve height tanımlamayı unutmayın.

Demo : http://jsfiddle.net/teknoblogo/tnrgg/

Web sayfanızda, yeni sayfada yada yeni sekmede açılan linklerin başına yukarıdaki örnekte gördüğünüz gibi bir grafik ekleyip, ziyaretçilerinizi uyarmak isteyebilirsiniz. Bunun için bu CSS tekniği işinizi epey kolaylaştıracaktır.

Demo : http://jsfiddle.net/teknoblogo/t7bp8/

Paragrafın İlk Harfini Büyütün (Drop Caps)

Gazete ve dergilerdeki gibi paragrafın ilk harfini büyük (ve belki süslü) yapmak isteyebilirsiniz. İşte bunun için :first-letter seçicisi ile ilk harfi seçebilir ve bu harf üzerinde istediğiniz CSS değişikliğini yapabilirsiniz.

Demo : http://jsfiddle.net/teknoblogo/hT9F3/

 

 

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

sizi bir adım � leri taşıyacak css teknikleri