Bugün CSS ile etkileyici bir header(üst gövde) tasarımı yapacağız. Kaydırma çubuğuyla birlikte hareket eden arkaplan görüntüleri günümüzde çok popüler. Ne kadar kompleks gözükse de CSS’in background tanımlamaları sayesinde sadece birkaç satır kod yazarak tasarımımızı oluşturacağız.
(daha&helliip;)sabit
CSS ile Tam Ekran Arkaplan
“Cross Browser”, yani tüm tarayıcılarda aynı sonucu veren bir CSS makalesiyle daha beraberiz. Bugün, “CSS ile tüm sayfayı kaplayan arka plan görüntüsünü nasıl oluşturulur?” sorusunu cevaplayacağız. Gelişen web teknolojileri ve tarayıcı tepkileri sebebiyle bu basit tasarım artık daha kolay bir şekilde hazırlanabiliyor. Microsoft’un DXImageTransform elemanlarından kurtulmak bizlerin işini fazlasıyla kolaylaştırmakta.
Hazırlayacağımız tasarım kısaca şunları yapacak :
- Tüm sayfayı en ufak bir boşluk bırakmadan kaplayacak.
- Gerekirse görseli küçültüp/büyültecek.
- Görselin aspect ratio değerini korur.
- Görseli sayfanın ortasına yerleştirir.
- Kaydırma çubuğunun görünmesine sebep olmaz.
- Tüm tarayıcılarda çalışır.
- Flash ile yapabileceğinizden daha hızlı ve kolay kullanım sağlar.
Yapışkan (Sticky) header nasıl yapılır?
Günümüz tasarımlarının en popüler öğelerinden olan yapışkan (sticky) header nasıl hazırlanır? Eğer bu soru sizin de aklınızı kurcalıyorsa doğru yerdesiniz.
(daha&helliip;)