Membuat Popup Sederhana Memakai Css3
Pembahasan kali ini ingin sedikit membahas CSS, Kali ini kita akan coba menciptakan membuat sebuah popup atau modals (jika menggunakan bootstrap). Untuk menciptakan popup saya hanya menggunakan CSS biasa tanpa menggunakan framework CSS menyerupai bootstrap dan lain-lain. Kode ini dapat di terapkan pada blogspot ataupun wordpress.
KODE
Pertama buat file gres dengan nama index.html
<html>
<head>
<title>Popup Kang-cahya.com</title>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<div class="popup-wrapper" id="popup">
<div class="popup-container">
<!-- Isi Popup -->
<h1>Mohon Bantuannya Ya :-)</h1>
<p style="font-size:19px;">Telah Dilakukan Migrasi Server, Jika anda menemukan link demo atau d0wnl0ad yang rusak harap laporkan melalui sajian <a href="http://www.kang-cahya.com/p/contact-page.html"><b>contact us</b></a>. Jangan lupa cantumkan judul beserta link halaman-nya.</p>
<p style="font-size:20px;text-align:right;">Terimakasih :)</p>
<!-- Tombol Close Popup -->
<a class="popup-close" href="#popup">X</a>
</div>
</div>
</body>
</html>
Kedua, buat file gres dengan nama popup.css .
/* Start animasi popup */
@-webkit-keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
@-moz-keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
@keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
/* end animasi popup */
/*style untuk popup */
#popup {
z-index:1000;
background-color: rgba(0,0,0,0.7);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
-webkit-animation:autopopup 2s;
-moz-animation:autopopup 2s;
animation:autopopup 2s;
}
#popup:target {
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
opacity: 0;
visibility: hidden;
}@media (min-width: 768px){
.popup-container {
width:600px;
}
}
@media (max-width: 767px){
.popup-container {
width:100%;
}
}
.popup-container {
position: relative;
margin:7% auto;
padding:30px 50px;
background-color: #fafafa;
color:#333;
border-radius: 3px;
}a.popup-close {
position: absolute;
top:3px;
right:3px;
background-color: #333;
padding:7px 10px;
font-size: 20px;
text-decoration: none;
line-height: 1;
color:#fff;
}
Demo
Mungkin cukup sekian dulu untuk pembahasan kali ini. Mohon maaf jikalau banyak salah dalam penyampaian materi-nya hehehe :D
Sumber http://hudachair.blogspot.com
0 Response to "Membuat Popup Sederhana Memakai Css3"
Posting Komentar