CSS HTML

CSS Paralax Sayfa Tasarımı

SAF CSS İLE ÇARPIŞMA COLLAPSIBLE ETKİSİ NASIL YARARLANIR

Kapanan başlıklar, kullanıcılara özel teklifler ve önemli bildirimler gibi önemli bilgileri göstermek için mükemmel bir çözümdür. Birçok geliştirici, bu tür efektler oluştururken JavaScript’e güvenir, ancak, saf CSS ile de daha basit bir daraltıcı başlık efekti oluşturmak mükemmel bir şekilde mümkündür.

Daralan başlıklar paralaks etkilerine benzer şekilde çalışır. Kapanan başlığın arka planı sabit kalır, böylece kullanıcı sayfayı aşağı kaydırdığında altındaki içerik akabilir. Bu makalede, aşağıdaki daraltıcı üstbilgi efektinin nasıl oluşturulacağını göstereceğiz:


Uygulama üç bölümden oluşmaktadır:

  • Sayfanın en üstünde yer alan ve ana menüyü içeren siyah arka plana sahip sabit bir başlık.
  • Özel teklifle ilgili ek bilgileri içeren mavimsi arka plana sahip daraltıcı bir başlık.
  • Kullanıcının daraltma başlığına kaydırdığı beyaz arka planlı içeriğin geri kalanı.

Daralan başlıklar, kullanıcı deneyimi için mükemmeldir. Kullanıcılar, özel bilgileri görmek istediklerinde sayfayı istedikleri zaman geri alabilirler, ancak içeriğin geri kalanını okurken dikkatlerini dağıtmazlar.

Şimdi, adım adım kapanan bir üstbilginin nasıl oluşturulduğunu görelim.

 HTML OLUŞTURMA

HTML, üç ana bölümden oluşur: sabit üst menü çubuğu için <header>, daraltma başlığı için .banner ve içeriğin geri kalanı için .article etiketleridir.

HTML Kodu aşağıdaki gibi görünür:

Menü ve Collapsible(kapanır/katlanır) Panelin CSS Kodları

CSS İLE TEMEL Stilleri Ekleyin

Bazı sıfırlama ve temel stiller tanımlayarak CSS kodunu yazmaya başlayalım.

Üst Menü Bar Konumlandırma

Sabit menü çubuğunu sayfanın en üstüne yerleştirmek için <header> öğesinin konumunu sabit olarak ve z-index sıfırdan daha yüksek bir değere ayarlamanız gerekir. Z dizini otomatik olarak varsayılan değer olarak, yalnızca öğenin üst öğelerinin z dizini değerinden yüksek olmalıdır. Aşağıdaki kodda z-index 99 yapılmıştır , çünkü <header> öğesinin herhangi bir üst öğesinden daha yüksek olma olasılığı vardır:

Menüyü Tasarlayın

Katlanır üstbilgiyi oluşturmak için aşağıdaki CSS kuralları gerekmese de, üst menüye stil uygulayabilirsiniz:

Katlanır Başlığın Konumunu Ayarlayın

Katlanır üstbilgi aynı zamanda üst menü çubuğu gibi sabit bir konuma sahiptir. Ancak, bir z-endeksi değeri almaz, böylece kullanıcı sayfayı aşağı kaydırdığında “daraltılabilir” ve içeriğin geri kalanı kademeli olarak kaplar.

Katlanır Başlığın Tasarımı

Bu, daralan/katlanır üstbilgi etkisinin bir parçası olmamasına rağmen, işte, .banner öğesinin torunlarının (başlık, açıklama ve buton) yukarıdaki demoda şekillendirildiği kodlar:

Aşağıdaki ekran görüntüsünde, demomuzun şu anda nasıl göründüğünü görebilirsiniz. Hem üst menü çubuğu hem de daraltma başlığı sabit bir konuma sahip olduğundan, sayfanın üstünde kalır ve içeriğin üst kısmını kaplarlar. İçeriğin geri kalanını şekillendirerek başlığı bir sonraki adımda daraltılabilir hale getireceğiz.

İçeriğin Tasarımı

Üstbilginin kaydırmada daraltılmasını sağlamak için dört şey yapmanız gerekir:

En önemlisi, içeriğin geri kalanı için bir arka plan belirlemeniz gerekir ki böylece daraltılabilir başlığın üstüne akabilir. Bu etkinin paralaks efektlerine benzer şekilde çalıştığını unutmayın; farklı geçmişlerin birbirini örtmesi gerekir.
Demoda düz beyaz bir arka plan kullandık. Bu efekti çalışmak için her zaman akan içeriğe bir arka plan ayarlamanız gerekir (aksi halde daraltma başlığı daraltılmaz).
İçeriği iki sabit elemana göre konumlandırın. Üst: 370 piksel; Aşağıdaki kural, <header> (70px) ve .banner (300px) yüksekliğinin toplamıdır.
Genişliği %100 olarak ayarlayın, böylece içerik başlığın tamamını kaplar.
Yüksekliği de %100 olarak ayarlayın, böylece arka plan sayfanın tüm yüksekliğini kaplar (bu, mobil cihazlarda veya daha uzun sayfalarda önemlidir).
Kodda şöyle gözüküyor:

TÜM KODUNUZA GÖZ AT

Ve çökmekte olan başlık yapılır. Aşağıda, tüm CSS ve HTML kodlarına bir göz atabilirsiniz.

 

 

Yorum bırak