Membuat box elastis dengan Css

With MiQdi

Disini silahkan isi teks, Gambar, script, Link dan Lain - Lain sesuai kebutuhan anda. Disini silahkan isi teks, Gambar, script, Link dan Lain - Lain sesuai kebutuhan anda. Disini silahkan isi teks, Gambar, script, Link dan Lain - Lain sesuai kebutuhan anda. Disini silahkan isi teks, Gambar, script, Link dan Lain - Lain sesuai kebutuhan anda. Disini silahkan isi teks, Gambar, script, Link dan Lain - Lain sesuai kebutuhan anda.

Box Office System

سْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

hanya coba - coba saja siapa tau nantinya berguna untuk saya sendiri dan untuk orang lain, namun box ini mungkin masih banyak kekurangan jadi silahkan anda utak atik lagi nanti kode nya :

ok kita langsung saja ke tahap pembuatan box nya, :

1. Silahkan masuk di blog anda

2. Klik rancangan

3. Klik Tambah Gadget

4. Masukan kode di bawah ini

<div class="systemBox">
<h2>With MiQdi</h2>
Disini silahkan isi teks, Gambar, script, Link dan Lain - Lain sesuai kebutuhan anda.
Disini silahkan isi teks, Gambar, script, Link dan Lain - Lain sesuai kebutuhan anda.
Disini silahkan isi teks, Gambar, script, Link dan Lain - Lain sesuai kebutuhan anda.
Disini silahkan isi teks, Gambar, script, Link dan Lain - Lain sesuai kebutuhan anda.
Disini silahkan isi teks, Gambar, script, Link dan Lain - Lain sesuai kebutuhan anda.

<h3>Box Office system</h3>
</div>
<style>
/* original by system of blog http://with-miqdi.blogspot.com */
.systemBox {
background:#DDD;
width:500px;
height:50px;
overflow:hidden;
padding:5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border:2px solid gray;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
-moz-box-shadow: 0 0 5px hsla(0,93%,9%,.7);
-webkit-box-shadow: 0 0 5px hsla(0,93%,9%,.7);
box-shadow: 0 0 5px hsla(0,93%,9%,.7);
margin:0 auto;
}
.systemBox p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
padding-top:20px
}
.systemBox:hover {
background:#DDD;
height:100%;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-moz-box-shadow: 0 0 5px blue;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue;
}
.systemBox:hover h2 {
margin-top:-60px;
}
.systemBox:hover h3 {
margin-top:50px;
padding:5px;
text-align:center;
font-size:20px;
}
.systemBox h2 {
background:hsla(0,100%,50%,.7);
color:black;
height:28px;
padding:5px;
text-align:center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border:2px solid gray;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px hsla(33,50%,43%,.8);
box-shadow: 0 0 7px hsla(33,50%,43%,.8);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
.systemBox h3 {
margin-top:-195px;
background:hsla(0,100%,50%,.7);
color:black;
height:28px;
padding:5px;
text-align:center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border:2px solid gray;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px hsla(33,50%,43%,.8);
box-shadow: 0 0 7px hsla(33,50%,43%,.8);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
</style>

Setelah itu silahkan simpan dan lihat hasilnya
sebelumnya silahkan anda sesuaikan lebar dan tinggi nya ada pada kode yang berwarna MERAH dan BIRU
sekali lagi mohon maaf bila masih banyak kekurangan, karena saya juga masih dalam tahap belajar jadi maklumi saja :) PieCe


Sumber : http://adf.ly/3RYlU