Pop Up Boxes Zoom In Effect Use CSS3

Jangan kau telan bulat-bulat itu biji kedondong! Begitu mungkin ungkapan yang tepat menggambarkan artikel trik kali ini :d Apakah maksudnya... Para master developer dengan jerih payah menciptakan sebuah kreasi (CSS3) dengan memberikan kode² yang siap kita pakai? Namun, patut kita pertanyakan ke diri pribadi, apakah bisa/pantas/sesuai dengan kebutuhan kita? Lama tidak melongok ke InsertHTML ada beberapa trick CSS menawan hati :d
This is all about Zoom In CSS3 Dialogue Pop Up Boxes. Sekarang sobat telan tuh kode bulat² yg ada disana tanpa memperhitungkan faktor bisa/pantas/sesuai...:-/ Pasti akan menghasilkan keterbatasan dalam pemakaian. Demo bisa terlihat bagus, tapi bagaimana ceritanya jika ingin dimasukan ke dalam blog kita? Dijamin banyak bentrok dan ketidakcocokan ini itunya ;)

Kecerdikan dalam bertindak sangat dibutuhkan bagi kita sebagai pemakai. Web @inserthtml membuat artikel tentang Zoom In CSS3 Dialogue Pop Up Boxes, hasil jadi trik tersebut mungkin mirip dengan jQuery Popbox not like usually Popup. Memunculkan sesuatu tersembunyi dengan cara di klik!
Pemanggilan/penulisan memakai tagging <form> membuat hasil jadi trik ini tidak bisa kita tempatkan di tengah-tengah kalimat! Buat apa kita memasang kode panjang-panjang jika hanya dapat dipakai segitu-gitu saja (paham maksudku kan) Kita sama-sama tahu, sekarang pemakaian CSS telah begitu mengesankan. Apa yg dahulu tidak dapat dilakukan CSS menjadi bisa. PR tersendiri (resiko) penulisan syntax lumayan butuh ekstra kerja, dan code² lmyn banyak :)
Memodifikasi (snippet) perkodean yg sudah ada (diberikan) agar lebih optimal dalam pemakaian singkat ceritanya tuh ;;)

Writing the HTML

<div class="eusi">
<label for="UNIK-ID">TITLE HERE</label>
<input type="checkbox" name="UNIK-ID" id="UNIK-ID" />
<div class="bebeb"> ----- YOUR CONTENT HERE ----- </div>
</div>Perhatikan code bertuliskan UNIK-ID itu harus sama isinya dan harus berbeda bila kalian mau memakai lebih dari satu pemakaian!

Writing the CSS

.eusi .bebeb {
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
width: auto;
height: auto;
background: #333;
border: 5px solid #fff;
box-shadow: 0px 0px 10px #000;
border-radius: 10px;
opacity: 0;
padding: 10px;
color: #fff;
font-weight: bold;
font-size: 22px;
position: fixed;
right: 10px;
top: 10px;
display: inline-block;
}
.eusi input {
display: none;
}
.eusi input:checked + .bebeb {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
}
.eusi {
display: inline-block;
}
.eusi label {
position: relative;
color: #000;
cursor: pointer;
}
.bebeb img {

}

DEMO 3 pemakaian!

Click me 1!

Hey! I'm a dialogue box

Contoh pertama...

Click me 2!

I'm a dialogue box too!!!

Contoh ke dua...

Click me 3!

Contoh ke tiga.
Good luck.
Happy coding \m/