CSS İle Modal Popup Açma

Yazının hikayesine ve içeriğine geçmeden önce başlıktaki “modal popup” ibaresinden bahsetmek istiyorum. Bildiğimiz popuplar sayfaya girdiğimizde otomatik olarak açılır. Modal popuplar ise bir butona ya da yazıya tıkladığımızda açılan pencerelerdir.

 

Kendi çağımda yaptığı bir tasarımda kullanmak üzere uzun süre odal popup aradım. Onlarca popup buldum ama bulduklarımın hepsi jquery kullanılarak yapıldığı için hiç biri içime sinmedi. Tam ümidi kesmişken Paul Hayes isimli bir programcıyla karşılaştım. Sitesinde sadece CSS ile yaptığı modal örneğini gördüm ve hemen kullanmaya başladım. Belki ihtiyacı olanlar vardır diye blogda da paylaşmaya karar verdim.

 

 

Bu eklenti, hiç bir scripte ihtiyaç duymadan sadece CSS3 teknikleri ile modal penceresi açmanızı sağlıyor. Demosunu görmek için aşağıdaki videoyu izleyebilirsiniz.

 

 

Siz de bu eklentiyi kullanmak isterseniz Yerleşim sekmesini açın ve Gadget ekle diyerek HTML/JavaScript olarak şu kodları ekleyin.

 

<style>
/* Container */
.modal {

/* Overlay page content */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;

/* Transition opacity on open */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;

/* Hide for now */
opacity: 0;
pointer-events: none;
}

/* Show modal */
.modal:target {
opacity: 1;
pointer-events: auto;
/* at time of writing (Feb 2012), pointer-events not supported by Opera or IE */
}

/* Content */
.modal > div {
width: 500px;
background: #fff;
position: relative;
margin: 10% auto;

/* Default minimise animation */
-webkit-animation: minimise 500ms linear;
-moz-animation: minimise 500ms linear;

/* Prettify */
padding: 30px;
border-radius: 7px;
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
background: #fff;
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
text-shadow: 0 1px 0 #fff;
}

/* Override animation on modal open */
.modal:target > div {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
}

.modal h2 {
font-size: 36px;
padding: 0 0 20px;
}

@-webkit-keyframes bounce {
  0% {
      -webkit-transform: scale3d(0.1,0.1,1);
      box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
      -webkit-transform: scale3d(1.08,1.08,1);
      box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
      -webkit-transform: scale3d(0.95,0.95,1);
      box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
      -webkit-transform: scale3d(1,1,1);
      box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-webkit-keyframes minimise {
  0% {
      -webkit-transform: scale3d(1,1,1);
  }
  100% {
      -webkit-transform: scale3d(0.1,0.1,1);
  }
}

@-moz-keyframes bounce {
  0% {
      -moz-transform: scale3d(0.1,0.1,1);
      box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
      -moz-transform: scale3d(1.08,1.08,1);
      box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
      -moz-transform: scale3d(0.95,0.95,1);
      box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
      -moz-transform: scale3d(1,1,1);
      box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-moz-keyframes minimise {
  0% {
      -moz-transform: scale3d(1,1,1);
  }
  100% {
      -moz-transform: scale3d(0.1,0.1,1);
  }
}

/* Modal close link */
.modal a[href="#close"] {
position: absolute;
right: 0;
top: 0;
color: transparent;
}

/* Reset native styles */
.modal a[href="#close"]:focus {
outline: none;
}

/* Create close button */
.modal a[href="#close"]:after {
content: 'X';
display: block;

/* Position */
position: absolute;
right: -10px;
top: -10px;
width: 1.5em;
padding: 1px 1px 1px 2px;

/* Style */
text-decoration: none;
text-shadow: none;
text-align: center;
font-weight: bold;
background: #000;
color: #fff;
border: 3px solid #fff;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.modal a[href="#close"]:focus:after,
.modal a[href="#close"]:hover:after {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
}

.modal a[href="#close"]:focus:after {
outline: 1px solid #000;
}

/* Open modal */
a.openModal {
-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
    -webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
    box-shadow:inset 0px 1px 0px 0px #caefab;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
    background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
    background-color:#77d42a;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #268a16;
    display:inline-block;
    color:#306108;
    font-family:Verdana;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #aade7c;
}

a.openModal:hover,
a.openModal:focus {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
    background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
    background-color:#5cb811;
}
</style>

<a href="#example" class="openModal">Blog Hocam FAQ</a>
<aside id="example" class="modal">
    <div>
        <h2>Sıkça Sorulan Sorular</h2>
<img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px; padding-top: 0px" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBb4IQ8FXis4puMDWkQ_UmadJhYo8e8xsTPOEucwx5I8XNj-Sb3a0md2vDBrrhEl19clx-QaKSoi7E3qwyR7o0LxzSVWVVS2Li1ADZLpYpfPRA1z_TBRSqoGQAAdzG7JtFAwq4s7W3gSk/s120/mni.png" />
<p><strong>Blog Hocam’da Hangi Konular Yer Alır?
    <br /></strong>
  <br />Blog Hocam’da <a title="Blog Araçları" href="http://bloghocam.blogspot.com/search/label/Blog%20Ara%C3%A7lar%C4%B1" target="_blank">Blog Araçları</a>, <a title="Blog Hocam" href="http://bloghocam.blogspot.com/search/label/Blog%20Hocam" target="_blank">Blog Hocam</a>, <a title="Blog Makaleleri" href="http://bloghocam.blogspot.com/search/label/Blog%20Makaleleri" target="_blank">Blog Makaleleri</a>, <a title="Blog Temelleri" href="http://bloghocam.blogspot.com/search/label/Blog%20Temelleri" target="_blank">Blog Temelleri</a>, <a title="Blog İpuçları" href="http://bloghocam.blogspot.com/search/label/Blog%20%C4%B0pu%C3%A7lar%C4%B1" target="_blank">Blog İpuçları</a>, <a title="Blogger Eklentileri" href="http://bloghocam.blogspot.com/search/label/Blogger%20Eklentileri" target="_blank">Blogger Eklentileri</a>,&#160; <a title="Blogger İpuçları" href="http://bloghocam.blogspot.com/search/label/Blogger%20%C4%B0pu%C3%A7lar%C4%B1" target="_blank">Blogger İpuçları</a>, <a title="Blogger Şablonları" href="http://bloghocam.blogspot.com/search/label/Blogger%20%C5%9Eablonlar%C4%B1" target="_blank">Blogger Şablonları</a>, <a title="Misafir Yazılar" href="http://bloghocam.blogspot.com/search/label/Misafir%20Yaz%C4%B1lar" target="_blank">Misafir Yazılar</a>, <a title="SEO" href="http://bloghocam.blogspot.com/search/label/SEO" target="_blank">SEO</a>, <a title="Sosyal Medya" href="http://bloghocam.blogspot.com/search/label/Sosyal%20Medya" target="_blank">Sosyal Medya</a> ve <a title="Sponsor" href="http://bloghocam.blogspot.com/search/label/Sponsor" target="_blank">Sponsor</a> olmak üzere 12 farklı kategoride içerik yer almaktadır.</p>
<br /><strong>Blog Hocam’daki Yazıları Kullanabilirmiyim?</strong>
<br />
<br />Blog Hocam’da yer alan yazılar aksi belirtilmedikçe tarafımdan yazılmıştır ve <a href="http://creativecommons.org/licenses/by-nc-nd/2.5/" target="_blank">Creative Commons Attribution-NonCommercial-NoDerivs 2.5</a> lisansı ile korunmaktadır.Bu lisansın genel koşulları şunlardır:
<br />
<br />
<table style="width: 600px" border="0" cellspacing="0" cellpadding="0"><tbody>
    <tr>
      <td width="24"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgx3R8yi62u6wo8dIo0kqIKQkGwsD9vqEeD8JA4-9pKi1pcAvZHUvNmd7z3-fvAy0mwUWfsJNrTc8QInpLDRgxVpgRTV_4les5Glkafr9T8hO3EpZsJRcrFPY00-UOJuqaBTi0p69r-xWM/s20/Attribution.png" /></td>
      <td width="574">
        <div align="left">İçeriğin bana ait olduğu belirtmeli ve orijinal içeriğe link vermelisiniz.</div>
      </td>
    </tr>
    <tr>
      <td width="25"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnYwuc6HX_hbzO1zSDvuzcD7NwJN_2CkSJtLo5LityC4mCygIMi3qVwNRKkE7U1nG7CyCX6NoJLHgDs_bEhZ546fYDUgZ0SraVaPm-hpc1lQF4vI6_deALgHhYD_MufN8AMsnugsI6KJXZ/s20/Noncommercial.png" /></td>
      <td valign="top" width="573">İçeriği ticari amaçlı kullanamaz ve satamazsınız.</td>
    </tr>
    <tr>
      <td width="26"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI76uu9eiE3-YZuVxjqPjx_Zk65OCmaxmVRQaNBm5K_d40Pj3NyHYaVdBeizUNJiMFGa4SOQvk8lor-FqiRoobhAi0DPve0LqX3jdYGRpEVPrF9CLX41mMlyLGC3PZzNnf5lkhUrYfFXV4/s20/ShareAlike.png" /></td>

      <td valign="top" width="572">Alıntı yaparken içeriği değiştiremezseniz.</td>
    </tr>
  </tbody></table>
<br />
<br /><strong>Blog Hocam’ın Temasını Nereden İndireblirim?</strong>
<br />
<br />Blog Hocam’ın teması tarafımdan tasarlanmış ve kodlanmıştır. Başka bir yerde veya kişide görme şansınız yoktur. Temamı özgünlük, markalaşma ve harcadığım emek adına şimdilik kimseyle paylaşmıyorum.
        <a href="#close" title="Kapat">Kapat</a>
    </div>
</aside>

Değiştirmeniz gereken yerler:

• Blog Hocam FAQ yazan yere butonun ismini yazın.
• <h2>Sıkça Sorulan Sorular</h2> yazan yere açılan penceredeki içeriğin başlığını yazın.
• <p> ve </p> etiketleri arasına ise pencerede gözükmesini istediğiniz içeriği yazın

Bu arada belirtmeden geçemeyeceğim, eklenti Internet Explorer gibi çağ dışı tarayıcılarda çalışmayabilir. Lütfen Chrome, Opera ve Firefox gibi modern tarayıcılar kullanın.

Bazen ama nadiren o kadar mutlu hissediyorum ki sanki hep gözümün önünde duran bir sis kitlesi kalkmış titreşen tüm atomlar donup kalmış gibi berraklaşıyor etraf. Atomların arasından güneş ışıkları geçiyor ve çarpa çarpa içimden geçiyorlar. Umut bırakıp gidiyorlar. Sanki gözümün önünde duran etrafında döndüğüm şeyi lan burda işte diye buluveriyorum. Öyle yaşama sevinsiyle doluyorum ki etraf müzik gibi geliyor. yükseliyor herşey. Sonra o anlarda çok şükrediyorum sis perdeme. İyi ki nadiren mutlu oluyorum. Çekilecek şey değil. Benim hayatla başa çıkma tarzım sis perdemdir karanlık huzursuz ruhumdur. Mutluluk halim uzasa intihar falan edebilirim paradoksik bir şekilde. Mutsuzluğum en büyük hazinem olmuş. Hayat ben senin aq

Klasik Yazı Başlıklarından Sıkıldınız Mı?

2012 yılında yaptığım tema değişikliğinden bir süre tasarımda bazı güncellemeler yapmaya başladım.Bunlardan biri de yazı başlıklarına verdiğim stildi. Nasıl yaptığımı soran birkaç arkadaşla paylaşmıştım ama düşündüm ki klasik yazı başlıklardan sıkılan başka blogcular da olabilir. Onlar için hem kendi kullandığım yazı başlığını stilini, hem de alternatif 3 stili paylaşmak istiyorum.

 

Aşağıda her bir stile ait örnek görüntü ve kodlar göreceksiniz. İstediğiniz stile ait kodları Blogger kumanda panelinize girip  Şablon > HTML’yi Düzenle dedikten sonra Ctrl+F tuş kombinasyonu yardımıyla kolayca bulabileceğiniz ]]></b:skin> kodunun üstüne ekleyeceksiniz.

 

Yazı Başlığı Stil 1

.post-title  {
font-size: 24px;
padding: 5px;
color: #fff;
text-shadow: 1px 1px 1px #333;
background: #E3BC50;
border-left: 20px solid #B9942D;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 2px #333;
-moz-box-shadow: 1px 1px 2px #333;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height: 1;
}

 

 

Yazı Başlığı Stil 2

 

.post-title  {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNYZrjrqaWB1BYiYzwcIVbEFg6EopdUKN3mIsUew_mYmgpjRR5JRi2N7vd5BARr4Ao_a-Gw487qRW-rGLNcvyZdqN0FEDreG-Sgn71DOLFcyy58rh3g80Lbod0PFJv5ihkSu88xb0tUjI/s1600/h3.png") no-repeat 4px center transparent;
font-size: 20px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #0274be;
border: 3px solid #5bb5f0;
text-shadow: 0 1px 0 #CCC;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
-moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1.3;
}

 

 

Yazı Başlığı Stil 3

.post-title  {
font-size:24px; text-shadow: 0 -1px #00468C,
1px 0 #00468C,
0 1px #00468C,
-1px 0 #00468C; color:#ff0000;font-family:verdana;
}

 

 

Blog Hocam’da Kullandığım Stil

.post-title  {
font-size:26px;
  line-height:1.2em
  margin:0 0 10px 0;
text-shadow: 0.02em 0.02em 0.17em #4f5458;
margin-bottom:8px;
color:#000;
}

 

 

Tüm kodlardaki renkleri ve yazı boyutlarını değiştirerek kendi stilinizi de yaratabilirsiniz. Faydalı olması dileğiyle.

 

İyi bloglamalar…

Blogum Sayesinde Neler Öğrendim?

Blog dünyasında henüz çırak bile sayılmam martta bir yıl olacak blogumu açalı. Daha önceleri facebooktan başka sosyal medya kullanmayı bilmeyen ben blog sayesinde bir çok şey öğrendim.

 

 

• Sabrı öğrendim

Blog açtığımda zannettim ki hemen izleyicim olacak insanlar beni ziyaret edecek. Tabi ki böyle olmadı, uzun bir süre ilk izleyicimin gelmesini, ilk yorumun gelmesini bekledim. Beklerken de kendi kendime konuşuyor hissine kapılıp aklıma mukayyet olmaya çalıştım.

• Resim düzenlemeyi öğrendim

Bloggerlığın bir önemli bir kısmı resimler bence ya da ben bol resimli blogları seviyorum diyebilirim. Blogumda paylaştığım görselleri güzelleştirmek değiştirmek için resim düzenlemeyi öğrendim neredeyse photoshop öğrenmeye başlayacaktım ki eşim bu işin içinden çıkamam diye bana online resim düzenleme siteleri buldu, onlarla daha kolay yapabiliyorum. Bir de fotograf çekerken de dikkatli olmayı,güzel resimler çekmeyi öğrendim.

• Arkadaşlar edindim

Sanal arkadaşlar konusuna hiç sıcak bakmayan ben blog sayesinde sürü insanla tanıştım, hiç tanımadığım insanlara hediyeler gönderdim ve yine hiç tanımadığım insanlardan
hediyeler aldım. Sürekli görüştüğüm blogger arkadaşlarım da var. Yani sanal arkadaşlarımı da sevdim.

• Şablon,widget,gatget,eklenti..vb düzenlemeyi öğrendim

Bunları öğrenmek çok uzun zamanımı aldı, çok defa beceremedim tekrar denedim şablonumu mahfettim baştan yaptım, blogumu bir anne şefkati ve özeniyle günden güne değiştirdim, güzelleştirdim.

 

• Yabancı dilimi geliştirdim

Yurt dışındaki blogları gezerken yabancı dilimi geliştirdim diyebilirim. Bir konuda fikir edinmek için yabancı sitelere göz atmak için bazı kelimelerin farklı dillerdeki anlamlarını öğrendim, kelime haznem gelişti.

 

Kısacası blogum hocam oldu!

 

Yazar Hakkında: Elif BAYRAK Küçük Mutluluklar Dükkanı sahibesi.

"Gelecek Benim" diyorsan ING Practica Kampı Seni Bekliyor!

ING BANK, üç yıldan bu yana üniversitelerin üçüncü ve dördüncü sınıflarına yönelik Practica adlı genç yetenek yarışması ile üniversitelilere ulaşıyor.

Üniversiteli gençlerin ING Bank’ı yakından tanımalarını, bankacılık ve iş hayatı hakkında bilgi sahibi olmalarını ve kişisel gelişimlerine katkı sağlamayı hedefleyen Practica Kampı bu yıl da “Gelecek Benim” diyen adaylara sesleniyor.

Gençleri profesyonel iş hayatıyla tanıştıracak bir ortam yaratan bu genç yetenek platformuna katılacak öğrenciler, üç gün sürecek kamp boyunca birçok eğitim ve workshop’a katılacak, ING’li yöneticilerle tanışma fırsatı yakalayacaklar. Gerçekleştirecekleri projelerle kariyerlerine yön veren bu deneyim sonrasında yüksek performans gösteren üçüncü ve dördüncü sınıf öğrencileri ING Bank Staj Programı’na dahil olabilecek, dördüncü sınıf öğrencileri ise Yönetici Adayı olma sürecinde büyük avantajlar kazanacaklar.



ING Practica Kampı için başvurular 28 Ocak 2013 Pazartesi’ye kadar devam ediyor. Başvurularınızı  ING Bank websitesinden yapabilirsiniz. ING Practica kampı ile ilgili gelişmeleri ING Practica Facebook sayfasından takip edebilirsiniz.

Bir bumads advertorial içeriğidir.