Elastis box posting Html

Copy dan pastekan kode CSS Box Posting Kode HTML  tepat di atas kode ]]></b:skin>

pre.loreng {

margin: 30px 0;

font-family: Georgia;

font-size: 14px;

color: #fff;

line-height: 18px; text-shadow: 1px 1px 1px #000;

padding: 17px 10px;

border: 2px solid #333;

border-right: none;

background: #888;

width: 300px;

opacity: 0.9;

-o-transition: all 1s ease-out;

-moz-transition: all 1s ease-out;

-webkit-transition: all 1s ease-out;

overflow: hidden;

filter: alpha(opacity=90);

}

pre.loreng span {

color: #888;

}

pre.loreng:hover {

text-shadow: 1px 1px 1px #aaa;

width: 555px;

opacity:1.0;

overflow: auto; color: #660000;background: #0099FF url(http://i1214.photobucket.com/albums/cc489/Gray_December/album%20gmbr%20blog/bgPreBlueWhiteV36H1.gif);

filter: alpha(opacity=100);

display: block;

border-left: 15px solid #666;

border-right: 3px solid #666;

}

pre.loreng:hover span {

text-shadow: 1px 1px 1px #aaa;

}

Bagi beberapa sobat blogger yang demen ngelayap cari info baru tentang kode html dan segala bentuk desainnya pasti pernah menjumpai box posting kode html yang dibuat dalam bentuk animasi. Yang teramat sering terlihat adalah box yang ketika tersentuh cursor ukurannya bertambah lebar. (he ... he ... nggak bertambah panjang kaya punya sampeyan, broer! Asal tersentuh sedikit saja sudah molor sepanjang tiang listrik, he ...). Jika mungkin diantara sampeyan ada yang membatin tentang kode html seperti apa yang digunakan, mungkin melalui posting ini semua akan terjawab. Kita nggak akan terlalu merumitkan diri dengan javascript yang sering menjadi penambah lemotnya loading blog. Cara terpraktis dan termudah aku kira akan jadi solusi yang paling tepat untuk mendapatkan box serupa dengan fungsi yang setara. Ya ... kita manfaatkan saja CSS3. Asyik, lho hasil box yang berhasil kita buat. Nggak kalah dah sama yang biasa terlihat

1. Atur tinggi box dengan merubah nilai height pada <pre class="loreng" style="height: 300px;">
2. Sesuaikan lebar box saat animasi terjadi (box melebar) dengan merubah nilai height pada syntax pre.loreng:hover { width: 555px;}

  /* Gunakan Kode di bawah ini saat ingin menggunakan nya */

<pre class="loreng" style="height: 300px;"> Tuliskan kode HTML di sini! </pre>
atau

<pre class="loreng" style="height: 300px;">
/* <span> Tuliskan keterangan tambahan kode html di sini! */</span>
Tuliskan kode HTML di sini! // <span> Keterangan tambahan bisa juga di tuliskan di sini! */</span>
</pre>

Di Baca Juga Ya...Artikel Terkait Lainnya :

Widget By : lefransnote's Site