css-modal

Sadece CSS ile Modal Yapımı

Web tasarımının klasikleşmiş popup yapıları yerlerini modallara bıraktılar. Sayfa değişimine gerek kalmadan ve yeni sekme açmadan çalışan modal öğeleri web kullanıcılarına büyük kolaylıklar sağlamakta.

İnternette karşılaştığımız neredeyse tüm modal tasarımları da jQuery desteğiyle hazırlanmakta. Ancak gelişen teknolojiler yeni teknikleri de beraberinde getirmekte.

CSS3‘ün :checked selector tanımı sayesinde hiçbir JavaScript kütüphanesine ihtiyaç duymadan hem basit hem de performanslı modal yapısı oluşturabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

CSS3 MODAL

Hazırlayacağımız tekniğin fonksiyonelitesini bir checkbox öğesi oluşturacak. Checkbox seçiliyken modal gözükecek, seçim kaldırıldığında da kaybolacak. Özetle işlem bu kadar. Tabii düzgün bir görüntü elde etmek için checkbox’ı kullanıcıdan gizleyeceğiz, onu tetikleyen bir label’i ön plana çıkaracağız.

HTML Kodları

İlk olarak checkbox öğesini ve onu tetikleyen label elemanını ekleyelim.

<label for="gizli-checkbox" class="modal-ac">Modal</label>
<input id="gizli-checkbox" type="checkbox"/>

Şimdi de açılacak modal yapısını oluşturalım.

<div class="cerceve">
  <div class="modal">
    <label for="gizli-checkbox" class="kapat">✖</label>
    <h2>Modal Başlığı</h2>
    <p>
      Burası model içeriğinin olacağı yer.
    </p>
  </div>
</div>

Şimdi bu HTML kodlarını biraz stilize edelim.

CSS Kodları

Checkbox inputunu gizleyerek işe başlayalım.

input[type='checkbox']#gizli-checkbox{
 display:none;
}

Çerçeveyi bir perde gibi kullanmayı unutmayalım.

.cerceve {
  background: rgba(5, 10, 30, 0.5);
  opacity:0;
  visibility:hidden;
  z-index: 99999;
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

Sırada modal yapısının temelini tasarlamak var.

.modal{
  background-color:white;
  width: 45%;
  height: 60%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border-radius:5px;
  padding:10px 15px;
}

.modal .kapat{
  float:right; 
  color:#666; 
  cursor:pointer;
}

Şimdi de checkbox işaretlendiğinde tasarımın alacağı aksiyonu belirleyelim.

input[type='checkbox']#gizli-checkbox:checked ~ .cerceve{
  position:absolute;
  z-index:9999;
  top:0;bottom:0;left:0; right:0;
  opacity:1;
  visibility:visible;
}

Son olarak tasarımın responsive olması için küçük ekranlara özel media sorgularını ekleyelim.

@media (max-width:1280px){.modal{width:70%; height:70%;}}
@media (max-width:768px){.modal{width:90%; height:90%;}}

Bu kadar. Modalımız hazır.

Bu da ilginizi çekebilir  HTML5 ve CSS3 ile Flat Giriş Ekranı

Sizce kullanışlı mı?

Sadece CSS ile hazırlanmış modal yapılarına sıcak bakıyor musunuz?

Yorumlarınızı bekliyoruz.



  • matrax21

    peki bunu blogger da kullanabilirmiyiz ?

  • ercan

    Tartışmasız siz gerçekten tasarımın ana temasını anlatıyorsunuz…. Teşekkürler ama hali hazır dokümanlar ve dosyalar eklerseniz daha faydalı olacaksınız çünkü neyi nereye kopyalayacağımız biraz karışık