CSS ile sayfa zeminine hükmedin!

Bu yazıyı Bildirgeç‘ten KAghast yazmıştır.

 

\

XHTML’in cazibesinden gözlerinizi kamaÅŸtırabilmek için size, CSS kullanarak ne gibi zemin iÅŸlemleri (css background) yapabileceÄŸinizi anlatmak istiyorum. Artık HTML etiketlerinde klasik olarak kullandığımız “background” etiket özelliÄŸi (property) yerini CSS‘in güçlü background tanımlarına bıraktı.

  1. Sayfa zeminine tam ekran resim yerleÅŸtirme:
    Mesela sayfanız zemininde tam ekran olarak görüntülenecek bir görsel kullanmak istiyorsunuz. Ayrıca bu görselin tüm çözünürlüklere göre kendini sayfaya tam olarak yerleştirmesini de bekliyorsunuz. Hiçbir javascript kodu yazmadan sadece buradaki örneği şablon olarak değerlendirerek bunu yapabilirsiniz. Nasıl birşey elde edeceğini tam olarak burdan ve şurdan görebilirsiniz.

    \

    \

  2. CSS ile filigran (watermark) kullanımı
    CSS tanımları sayesinde artık filigranlı (watermark) görseller oluÅŸturmakta çok kolay. Burada, bu konuda çok detaylı ve PHP destekli olarak hazırlanmış bir örnek bulabilirsiniz. Burdaki eÄŸitsel notta ise (tutorial’da ise) PNG resim kullanarak CSS ile nasıl filigran görseller yapabileceÄŸinizi görebilirsiniz.Bu yazıda ise direk filigranlı zemin hazırlamanın yöntemi mevcut.

    \

  3. CSS‘de zemin konumlandırma (background position)
    CSS tanımlarının bize sağladığı en büyük kolaylıklardan biri ise zemin üzerinde tam hakimiyet kurmanızdır. Tanımladığınız zeminin bulunduğu bölge (division) içersindeki X ve Y konumlarını belirtebilirsiniz.

    \

    Bu özellikten faydalanarak yine hiç javascript kullanmadan yanıp-sönen (roll over) butonlar hazırlayabilirsiniz. Son olarak konu hakkında özet bilgi niteliğindeki bu yazıya da göz atın.