Tex Box CSS Keren

Cara Membuat Efek Terang Gelap pada Text Area,inilah pembahasan kali ini,cukup menarik saya rasa bila pada kolom text area sobat coba pasang efek seperti ini,yang mana efek ini akan memberikan kesan tersendiri,bila sobat arahkan mouse pada kolom text area dia kan memberikan warna efek terang dan bila di lihat secara biasa tanpa mengarahkan mouse maka di seakan meredup warnanya,gimana tertarik bukan silahkan ajah langsung.

Demo

1. Seperti biasa sobat login dulu ke akun blog sobat.
2. Kemudian pilih menu Template dan pilih Edit HTML
3. Centang dulu kotak kecilnya ( Expand Widget Template)
4. Cari Kode ]]></b:skin> kemudian letakan kode CSS di bawah tepat di atas kode ]]></b:skin>.

.code1 {
overflow:auto;width:503px;height:200px;
font-family: "Consolas", "Courier New", Courier, mono, serif; color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(http://1.bp.blogspot.com/-nic37VqULoA/UDdTubWtwcI/AAAAAAAABbs/zv-i-PbnWHQ/s1600/labstrike-1.png) repeat-y top left;
border : 1px solid #000000;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.code1:hover{
background : #000000 url(http://1.bp.blogspot.com/-alUx-JlZsZw/UDdT4qYXglI/AAAAAAAABb0/7ili3p2WHa4/s1600/
labstrike-2.png) repeat-y top left;
color:#FEF9BF;
border : 1px solid #000;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}

5. kemudian Simpan Template.

Keterangan

Untuk penulisan dalam postingan bisa sobat gunakan script text area di bawah ini

<div class="code1"> Your Code Here </div>

Selamat mencoba semoga berhasil

Bagikan Artikel ini