Make PopUp Pure use CSS - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make PopUp Pure use CSS, we have prepared well for this article you read and download the information therein. hopefully fill posts Article CSS, Article CSS3, Article HTML, Article Trik dan Tips, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make PopUp Pure use CSS
link : Make PopUp Pure use CSS

Make PopUp Pure use CSS

Berbagai macam definisi popup, begitupun di dalam dunia CSS mempunyai popup tersendiri! AA akan share bagaimana cara membuat pop-up full murni 100% menggunakan bahasa CSS. Pop-up bergaya full open ketika melakukan klik. Berikut beberapa gaya yg sudah gue post:

• Make PopUp with CSS 3
• Popup with CSS for Image

Aku buatkan 3 variasi termasuk default, untuk tampilan tagging PRE dan display image. Ukuran height and width area sudah dipatok dengan nominal tertentu agar terlihat keseragaman :D Sudah barang tentu sobat dapat kreasikan lagi dengan kode-kode lain agar tampak full stylish b-)

.wrappop {
width:35%;
padding:0;
margin:10px auto;
display:block;
}
.area {
border:#555 1px solid;
text-align: left;
height:250px;
overflow-y:auto;
font-size:10px;
}
.area img {
width:100%;
height:100%;
display:block;
margin:0;
}
.area pre {
padding:0 5px;
font-family:Consolas,"Courier New",Courier,monospace;
}
.popup {
display:none;
}
.popup:checked ~ .area {
top:0;
bottom:0;
left:0;
right:0;
color:#ddd;
padding:10px;
font-size:14px;
position:fixed;
box-sizing:border-box;
height:calc(100% - 0px);
background:rgba(0,0,0,.9);
}

<label class="wrappop">
 <input type="checkbox" class="popup" />
  <div class="area">
   --- ADD CONTENT HERE ---
  </div>
</label>

Itu merupakan cara penulisan HTML default display! Sedangkan untuk penulisan syntax gambar sbb

<label class="wrappop">
 <input type="checkbox" class="popup" />
  <div class="area">
   <img src="LINK IMAGE" alt="" />
  </div>
</label>

Terakhir penulisan tagging PRE.

<label class="wrappop">
 <input type="checkbox" class="popup" />
  <div class="area">
   <pre>
   
   --- ADD CODE HERE ---
   
   </pre>
  </div>
</label>

Demo codepen.io/beben-koben/full/Ipwsc

Others:
www.script-tutorials.com/css3-modal-popups
www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3

See you \m/

Thus articles Make PopUp Pure use CSS

that is all articles Make PopUp Pure use CSS This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make PopUp Pure use CSS with the link address https://autopostingblogspot.blogspot.com/2014/10/make-popup-pure-use-css.html