Box Elastis Dengan CSS



Langsung aja ya sobat , Susah ngejelasinnya T_T , liat aja contohnya seperti di bawah sendiri itu ....

Copas kode script berikut di HTML/Javasript.


<div class="systemBox">
<h2>Box Office</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://sin1aja.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> 
Klik Save.

Keterangan Lebih Detail
  • Bisa di ganti Sendiri Width Sama Height nya yang saya tandain Biru di atas ...
  • Ganti Yang berwarna merah dengan Sesuka sobat , jika masih bingung coba liat di bawah ini ...


Box Office

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



Responses

0 Respones to "Box Elastis Dengan CSS"

Posting Komentar

•Sangat Saya Hormati Jika Anda Meninggalkan Komentar di Blog ini

•Mohon Maaf Blog ini Tidak Terima Komentar yang Mengandung Sara , Spamming , Flamming

•Kritik Dan Saran Dari Pembaca Semoga Bisa Membantu Memajukan Blog Ini

Regards : ~Sofyan_oZ~

 

Statistic Blog's



Free Page Rank Tool
Return to top of page Copyright © 2012 Always-Sharing | Blogspot Tutorial | From Zero To Hero | Template by HackTutors