Pure CSS Modal Box

Saya sangat antusias sekali kalau sudah berhubungan dengan CSS , kenapa ? karena CSS mengerti perasaan saya wkwkwk .. maksud saya suka CSS karena doi mudah dipahami dan dampak ringan nya itu lho .. mungkin beda dengan javascript kali ya .. yang [ kata orang ] kalau terlalu banyak wiihh beratnya selangit [ of ].. Sobat mungkin merasa tidak asing dengan modal box ?? .. ya modal box biasanya diisi sebuah pesan atau widget yang keberadaannya mandiri alias long profile hehe [ becanda ] . sebenarnya banyak trik dalam membuat modal box terlebih ketika menggunakan bantuan j-Query , bisa mudah dan hasilnya WOW selangit . tapi kali ini saya tidak menggunakan j-Query dalam membuat Modal Box tapi hanya menggunakan CSS [ pure CSS ] .

Demosion

Ini hanya contoh saja karena sebenarnya untuk tampilan bisa dibikin sesuai selera sobat .. artinya kembali pada kreatifitas masing-masing. Kalau memang tertarik untuk mencicipinya silahkan sematkan CSS dan HTML dibawah ini kedalam template sobat . 

Kustomisasi CSS dan HTML

CSS

* =============================== */
.modal {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background: rgba(0,0,0, .9);
transition: opacity .25s ease;
}
.modal__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}
.modal-state {
display: none;
}
.modal-state:checked + .modal {
opacity: 1;
visibility: visible;
}
.modal-state:checked + .modal .modal__inner {
top: 0;
}
.modal__inner {
transition: top .25s ease;
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
width: 50%; /* lebar dan tinggi content
height: 30%;
margin: auto;
overflow: auto;
background: #fff;
border-radius: 5px;
padding: 1em 2em;
}
.modal__close {
position: absolute;
right: 1em;
top: 1em;
width: 1.1em;
height: 1.1em;
cursor: pointer;
}
.modal__close:after,
.modal__close:before {
content: '';
position: absolute;
width: 2px;
height: 1.5em;
background: #ccc;
display: block;
transform: rotate(45deg);
left: 50%;
margin: -3px 0 0 -1px;
top: 0;
}
.modal__close:hover:after,
.modal__close:hover:before {
background: #aaa;}
.modal__close:before {
transform: rotate(-45deg);
}
@media screen and (max-width: 768px) {
.modal__inner {
width: 90%;
height: 90%;
box-sizing: border-box;}}

CSS Button

.btn {
cursor: pointer;
background: #27ae60;
display: inline-block;
padding: .5em 1em;
color: #fff;
border-radius: 3px;
}
.btn:hover,
.btn:focus {
background: #2ecc71;
}
.btn:active {
background: #27ae60;
box-shadow: 0 1px 2px rgba(0,0,0, .2) inset;
}
.btn--blue {
background: #2980b9;
}
.btn--blue:hover,
.btn--blue:focus {
background: #3498db;
}
.btn--blue:active {
background: #2980b9;
}

HTML

<label class="btn" for="modal-1">Show me modal with a cat</label>
<label class="btn btn--blue" for="modal-2">Biru button</label>
<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
<label class="modal__bg" for="modal-1"></label>
<div class="modal__inner">
<label class="modal__close" for="modal-1"></label>
<h2>Caaaats FTW!</h2>
<p> Isi Konten </p>
</div>
</div>

Ya seperti itulah mungkin dalam membuat CSS modal box kali ini ...

Resource : KasperMikiwicz