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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div class="container"> <header> <nav> <ul class="menu"> <li class="logo"><a href="#">Tasarım & Kodlama</a></li> <li><a href="#">Giriş</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Hakkında</a></li> <li><a href="#">İletişim</a></li> </ul> </nav> </header> <div class="banner"> <div> <h2 class="banner-title">Lorem Ipsum, dizgi ve baskı endüstrisinde</h2> <p class="banner-desc">PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü</p> </div> <button class="btn-signup" type="button" onclick="location.href='#'"> Siteye Git » </button> </div> <article class="article"> <p> Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. </p> <p> Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. </p> <p> Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. </p> <p> Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. </p> </article> </div> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | *{ box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; color: #222; } a { text-decoration: none; } ul { list-style-type: none; } |
Ü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:
1 2 3 4 5 6 7 8 9 | header { height: 70px; background: #222; position: fixed; width: 100%; z-index: 99; } |
Menüyü Tasarlayın
Katlanır üstbilgiyi oluşturmak için aşağıdaki CSS kuralları gerekmese de, üst menüye stil uygulayabilirsiniz:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | nav { height: inherit; } .menu { display: flex; height: inherit; align-items: center; padding: 0 20px; } .menu li { padding: 0 10px; } .menu a { color: white; } .logo { flex: 1; font-size: 22px; } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .banner { width: 100%; height: 300px; position: fixed; top: 70px; background: linear-gradient(45deg, #98cbff, #98ffcb); /* for content alignment */ display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .banner-title { font-size: 32px; margin-bottom: 10px; text-align: center; } .banner-desc { font-size: 22px; text-align: center; } .btn-signup { color: white; background-color: #0056ab; border: 0; padding: 15px 25px; font-size: 16px; cursor: pointer; } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | article { width: 100%; position: relative; top: 370px; background: white; height: 100%; padding: 30px 10%; } .article p { margin-bottom: 20px; } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>tasarimkodlama.com</title> <style> *{ box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; color: #222; } a { text-decoration: none; } ul { list-style-type: none; } header { height: 70px; background: #222; position: fixed; width: 100%; z-index: 99; } nav { height: inherit; } .menu { display: flex; height: inherit; align-items: center; padding: 0 20px; } .menu li { padding: 0 10px; } .menu a { color: white; } .logo { flex: 1; font-size: 22px; } .banner { width: 100%; height: 300px; position: fixed; top: 70px; background: linear-gradient(45deg, #98cbff, #98ffcb); display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; } .banner-title { font-size: 32px; margin-bottom: 10px; text-align: center; } .banner-desc { font-size: 22px; text-align: center; } .btn-signup { color: white; background-color: #0056ab; border: 0; padding: 15px 25px; font-size: 16px; cursor: pointer; } article { width: 100%; position: relative; top: 370px; background: white; height: 100%; padding: 30px 10%; } .article p { margin-bottom: 20px; } </style> </head> <body> <div class="container"> <header> <nav> <ul class="menu"> <li class="logo"><a href="#">Tasarım & Kodlama </a></li> <li><a href="#">Giriş</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Hakkında</a></li> <li><a href="#">İletişim</a></li> </ul> </nav> </header> <div class="banner"> <div> <h2 class="banner-title">Lorem Ipsum, dizgi ve baskı endüstrisinde</h2> <p class="banner-desc">PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü</p> </div> <button class="btn-signup" type="button" onclick="location.href='#'"> Siteye Git » </button> </div> <article class="article"> <p> Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. </p> <p> Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. </p> <p> Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. </p> <p> Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. </p> </article> </div> </body> </html> |
Yorum Yap