CSS ile Açılıp Kapanabilen Kutu Tasarımı
Bugün sizlerle birlikte görsel ve metinlerinizi bir arada şık bir şekilde sergilemenizi sağlayacak haber kutucukları tasarlayacağız. Mobil cihaz desteği de bulunan bu tasarım Material Design ruhunu da taşımaktadır.
CSS ile animasyon ile açılıp kapanabilen haber linkleri nasıl oluşturulur?
Görsellerimizi dinamik olarak atayabileceğimiz bir haber özeti kutucuğu yapmak için CSS’in birçok özelliğini kullanacağız. Ancak şık ve göze hoş gelen bir görüntü yaratmak için küçük animasyonlara ve renk geçişlerine yer vermemiz gerekiyor. İlk olarak HTML kodlarımızı yazarak başlayalım.
HTML Kodları
Öğemizi bir section elemanı üzerinden hazırlayalım. İçerisine kolay yönetebileceğimiz ek bir div elemanı ekleyerek perdeleme ve ek işlevlerimizi tamamlayalım. Onun içerisinde başlıkları koyacağımız bir h2, makale özetini yazacağımız bir
p
ve detay butonunu barındıracak bir a bulunmalı.
|
1 2 3 4 5 6 7 8 |
<section class="panel" style="background-image:url(haber_resmi.jpg)"> <div> <h2>Haber Başlığı</h2> <p>Haberin kısa özetini bu alanda göstereceğiz. Bu kısım, metin uzarsa otomatik olarak scrollbar çıkacak şekilde tasarlanmalı. Hemen altına da detaylara giden bir buton koymalıyız. </p> <a href="#">Devamını Oku</a> </div> </section> |
Üstteki panel.section öğemize inline olarak background yani haber resminizi ekleyebilirsiniz.
CSS Kodları
Uzun kod satırlarımızı burada barındıracağız. Gözünüz korkmasın. Olabildiğince detaylı ve açıklayıcı bir şekilde ilerleyeceğiz. İlk olarak Google Web Fonts üzerinden seçtiğimiz yazıtipini CSS dosyamıza ekleyelim. Daha sonra da section öğemizi tanımlayalım.
|
1 |
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300,100&subset=latin,latin-ext); |
Artık Roboto yazıtipini kullanabiliriz. Şimdi gelelim section.panel‘i tanımlamaya. Inline olarak dizilebilen, statik bir yüksekliğe sahip ve geçiş efektleri barındıran bir öğeye ihtiyacımız var. Alt kısma biraz gölge ekleyerek materyal yapımızı oluşturabiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
section.panel { display: inline-block; background-size: 100% 100%; background-position: center center; height: 300px; position: relative; overflow: hidden; transition: background .5s; z-index: 1; float: left; -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 0 5px 10px 2px rgba(1, 1, 1, 0.1); width: 19.5%; margin: 0 .25% 10px; } |
Şimdi aynı panel öğesi için bir :after tanımı yaparak üzerine 0.5 alpha kanalı barındıran bir siyah perde atalım.
|
1 2 3 4 5 6 7 8 9 10 11 |
section.panel:after { background-color: rgba(1, 1, 1, 0.5); position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 2; content: ''; transition: background .5s; } |
Panelin üzerine gelindiğinde ya da mobilde tıklandığında arkaplan rengi ve pozisyonu değişmeli.
|
1 2 3 4 |
section.panel:hover { background-size: 120% 120%; background-position: center 100%; } |
Perdemizinde rengini aktif olduğunda biraz açalım.
|
1 2 3 |
section.panel:hover:after { background-color: rgba(1, 1, 1, 0.3); } |
Şimdi section içerisine koyacağımız div öğesini tasarlayalım. Neye ihtiyacımız var? Öncelikle yine geçiş animasyonları için transitionkullanalım. Daha yüksek bir z-index kullanarak öğeyi diğer öğelerin üstüne taşıyalım. Yüksekliği tam sağlaması için 100% değeri verelim. En önemlisi de normal durumda gözükmemesi için onu ekranın dışına taşıyacak top:100% tanımını yapalım. Tabii bir öğenin pozisyonlama ve hiyerarşi kodlarını çalıştırması için bir position tanımına da ihtiyacı olacak.
|
1 2 3 4 5 6 7 8 9 10 11 |
section.panel > div { position: relative; top: 100%; background-color: #FFF; height: 100%; transition: top .5s, opacity .5s; z-index: 3; color: #212121; font: 300 14px Roboto, sans-serif; padding: 10px; } |
Üstüne gelindiğinde de onu görünebilir bir yere taşıyalım.
|
1 2 3 |
section.panel:hover > div { top: 30%; } |
Şimdi biraz hızlanalım. Sırasıyla h2, p ve a elemanlarımızın tasarımlarımızı hazırlayalım.
|
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 |
section.panel > div > h2 { text-align: center; color: #FFF; position: absolute; top: -173px; left: 0; right: 0; font: 300 18px Roboto, sans-serif; text-shadow: 1px 1px 5px rgba(1, 1, 1, 0.7); transition: top .5s; } section.panel > div > p { position: relative; max-height: 140px; overflow: auto; padding-right: 10px; line-height: 20px; margin: 0; } section.panel > div a { margin-top: 5px; border: 1px solid #212121; display: block; text-decoration: none; text-align: center; color: #212121; font-weight: 400; transition: background .5s color .5s; padding: 10px 5px; } |
Köşeleri border-radius ile biraz yuvarlayalım.
|
1 2 3 4 |
section.panel, section.panel > div a { border-radius: 5px; } |
Linkin üzerine gelindiğinde renkleri ters çevirmeye ne dersiniz?
|
1 2 3 4 |
section.panel > div a:hover { background-color: #212121; color: #FFF; } |
Yazılarımızın uzaması halinde çıkacak olan scrollbar elemanına webkit tarayıcılarına özel bir tasarım çizelim.
|
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 |
section.panel > div > p::-webkit-scrollbar { width: 3px; height: 1px; transition: all .5s; } section.panel > div > p::-webkit-scrollbar-track { background-color: #FFF; } section.panel > div > p::-webkit-scrollbar-thumb { background-color: #9e9e9e; } section.panel > div > p::-webkit-scrollbar-thumb:hover { background-color: #5677fc; } section.panel > div > p::-webkit-scrollbar-thumb:active { background-color: #3f51b5; } |
Haber başlıklarımızın aktif olduğunda resmin üzerine taşınsın.
|
1 2 3 |
section.panel:hover > div > h2 { top: -73px; } |
Şimdi 1200px‘in altındaki cihazlar için tasarımımızı hazırlayalım.
|
1 2 3 4 5 6 |
@media (max-width: 1200px) { section.panel { width: 32%; margin: 0 0.6% 10px 0.6%; } } |
Cep telefonlarında ise öğeler tek sıra halinde dizilebilir.
|
1 2 3 4 5 6 |
@media (max-width: 992px) { section.panel { width: 100%; margin-bottom: 10px; } } |
Yapacağımız işlemler bitmiştir.
