Fancy 10 CSS Text boxes for Websites and Blog

Lihat dan hitung, seberapa banyak aplikasi Android yang Anda instal di smartphone Anda? 

Pernahkah terbersit di benak Anda bagaimana cara membuat aplikasi-aplikasi tersebut?

Apakah Anda Saat Ini Ingin Sekali Bisa Bikin Aplikasi Android Sendiri? Seperti aplikasi game edukasi, media pembelajaran, aplikasi berbasis sensor, aplikasi multimedia, dan lain sebagainya?

Tetapi

1. Tidak Ngerti Coding

2. Tidak Tahu Computer Programming

3. Tidak Paham Bahasa Pemrograman Android

4. Dan Sama Sekali Bukan Lulusan IT?

Jangan Khawatir ...

Ternyata, bikin aplikasi Android itu SANGAT MUDAH, bahkan bagi Pemula sekalipun.

Sekarang Anda bisa bikin aplikasi Android dengan Cepat, bahkan TANPA HARUS CODING.

Tak peduli apapun latar belakang Anda, bikin aplikasi Android itu MUDAH, semudah bermain Puzzle.

Anda Hanya Perlu 4 Langkah berikut ini :

1. Drag & drop komponen-komponen yang dibutuhkan

2. Percantik tampilan aplikasi dengan mengatur layout dan desain tampilan

3. Susun blok-blok kode programnya, dan

4. Build aplikasi Anda jadi file instalasi *.APK

Lantas, Bagimana Cara Memulainya?

Mudah kok, karena sudah hadir untuk Anda Di Sini :

"Video Tutorial Android Tanpa Coding untuk Pemula"

Video tutorial yang membahas cara membuat aplikasi Android dengan sangat MUDAH, CEPAT, & TANPA CODING menggunakan tools App Inventor 2. 

Text Areas or text boxes are really important in special occasions such as providing codes,long text etc.This time i bought you attractive 10 text boxes for your blog.you can add these text boxes easily on your blog.Not only blog,these text boxes can be used in your website too.

You can add one of below ten text box styles or add more than one style.First you should choose the correct text box style for your blog.After you choose your textbox style(s),follow below instructions.(For Blogger)

Step 1: Sign in to your blogger account.

Step 2: Then go to Blogger Dashboard >> Template.

Step 3: Now click on Edit HTML button and find the ]]></b:skin> code on your HTML template editor.

Step 4: Now paste the CSS codes on the textbox which you wish to add.

Step 5: After adding the CSS codes,save your Template editor.

Text Box styles

Style 1

#textarea_01 { width:600px; max-width:600px; font-family:'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif; height:300px; font-style:normal; font-weight:normal; font-size:12pt; color:#3E3D3C; border:2px solid #474747; background:#D4D4D4; padding:6px 7px; margin-top:10px; margin-bottom:10px; line-height:120%; box-shadow:5px 5px 5px #B8B8B8; filter:alpha(opacity=90%); -moz-opacity:0.9; -khtml-opacity:0.9; opacity:0.9; -moz-transition:all .4s ease; -webkit-transition:all .4s ease; -o-transition:all .4s ease; transition:all .4s ease; } #textarea_01:hover { -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; box-shadow:5px 5px 5px #FCFCFB; filter:aplha(opacity=100%); -moz-opacity:1; -khtml-opacity:1; opacity:1; }

HTML code for Text box :

<textarea id="textarea_01" readonly="readonly">
Type your Text or Code Here...
</textarea>

Style 2

#textarea_02 { width:600px; max-width:600px; height:300px; font-style:normal; font-size:12px; color:#3E3D3C; background: rgba(202,166,112,0.75); margin-top:10px; margin-bottom:10px; padding:6px; border:2px solid #FF8000; -moz-box-shadow:5px 5px 5x #ECDDCE; -webkit-box-shadow:5px 5px 5x #ECDDCE; box-shadow:5px 5px 5x #ECDDCE; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; } #textarea_02:hover { background:background: rgba(202,166,112,1); border:2px solid #CC6E0E; -moz-box-shadow:0px 0px 25px 0px #FEECBF; -webkit-box-shadow:0px 0px 25px 0px #FEECBF; box-shadow:0px 0px 25px 0px #FEECBF; -moz-transition:all 425ms cubic-bezier; -webkit-transition:all 425ms cubic-bezier; -o-transition:all 425ms cubic-bezier; transition:all 425ms cubic-bezier; }

HTML code for Text box :

<textarea id="textarea_02" readonly="readonly">
Type your Text or Code Here...
</textarea>

Style 3


#textarea_03 { width:550px; max-width:600px; padding:7px; margin-top:10px; margin-bottom:10px; font-family:Helvetica,Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif font-style:normal; font-size:11pt; height:350px; color:#565555; background:#E0E0E0; border:2px solid #CDCDCD; filter:alpha(opacity=95%); -khtml-opacity:0.95; -moz-opacity:0.95; opacity:0.95; -moz-transition:all 2.0s ease-in; -webkit-transition:all 2.0s ease-in; -o-transition:all 2.0s ease-in; transition:all 2.0s ease-in; } #textarea_03:hover { background:#565555; color:#E0E0E0; border:2px solid #434343; filter:alpha(opacity=100%); opacity:1; -moz-opacity:1; -khtml-opacity:1; -moz-transition:all .5s ease-in; -webkit-transition:all .5s ease-in; -o-transition:all .5s ease-in; transition:all .5s ease-in; }

HTML code for Text box :

<textarea id="textarea_03" readonly="readonly">
Type your Text or Code Here...
</textarea>

Style 4


#textarea_04 { width:550px; max-width:550px; height:350px; padding:7px; margin-top:10px; margin-bottom:10px; border:2px solid #636363; -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px; color:#353333; background:#F2DC7C; font-family:'Tahoma',sans-serif; font-size:12px; font-style:normal; -moz-transition:all 1200ms ease-out ; -webkit-transition:all 1200ms ease-out ; -o-transition:all 1200ms ease-out ; transition:all 1200ms ease-out ; } #textarea_04:hover { background:#D5CFB5; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; border:2px solid #AFA453; -webkit-transition:all .5s ease-in; -moz-transition:all .5s ease-in; -o-transition:all .5s ease-in; transition:all .5s ease-in; }

HTML code for Text box :

<textarea id="textarea_04" readonly="readonly">
Type your Text or Code Here...
</textarea>

Style 5


#textarea_05 { width:550px; max-width:550px; height:350px; padding:7px; margin-bottom:10px; margin-top:10px; padding-top:11px; padding-bottom:11px; border-top:2px solid #660099; border-bottom:2px solid #24B200; border-left:2px solid #B24700; border-right:2px solid #0033CC; background:#7094C1; color:#3C3E41; font-size:14px; font-style:normal; font-family:'Trebuchet MS',sans-serif; -moz-transition:all 1200ms ease-out; -webkit-transition:all 1200ms ease-out; -o-transition:all 1200ms ease-out; transition:all 1200ms ease-out; } #textarea_05:hover { border-top:2px solid #24B200; border-bottom:2px solid #660099; border-left:2px solid #0033CC #0033CC; border-right:2px solid #B24700; border-radius:16px; color:#303234; -moz-transition:all .5s ease-in; -webkit-transition:all .5s ease-in; -o-transition:all .5s ease-in; transition:all .5s ease-in; } #textarea_05:focus { padding:8px; border:2px solid #AFAFB0; }

HTML code for Text box :

<textarea id="textarea_05" readonly="readonly">
Type your Text or Code Here...
</textarea>

Style 6


#textarea_06 { width:550px; max-width:550px; height:350px; margin-top:10px; margin-bottom:10px; padding:15px; font-weight:normal; font-style:normal; font-size:14px; line-height:110%; font-family:Verdana,Geneva,'DejaVu Sans',sans-serif; border:2px solid #BCBCBC; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; color:#F4F4F4; background:rgba(73,71,71,0.75); -moz-transition:all .6s ease; -webkit-transition:all .6s ease-in-out; -o-transition:all .6s ease-in-out; transition:all .6s ease-in-out; } #textarea_06:hover { color:#F6F3F3; -moz-box-shadow:0px 10px 25px 0px #AAA6A6; -webkit-box-shadow:0px 10px 25px 0px #AAA6A6; box-shadow:0px 10px 25px 0px #AAA6A6; -moz-transition:all .6s ease; -webkit-transition:all .6s ease; -o-transition:all .6s ease; transition:all .6s ease; }

HTML code for Text box :

<textarea id="textarea_06" readonly="readonly">
Type your Text or Code Here...
</textarea>

Style 7


#textarea_07 { width:580px; max-width:580px; height:350px; max-height:800px; margin-top:10px; margin-bottom:10px; padding:10px; font-style:normal; font-size:14px; font-family:Verdana,Geneva,'DejaVu Sans',sans-serif; border:2px solid #99569F; background:rgba(249,189,125,0.75); color:#5E5B59; -webkit-border-bottom-left-radius:9px; -webkit-border-top-right-radius:9px; border-top-right-radius:9px; border-bottom-left-radius:9px; -moz-border-radius-topright:9px; -moz-border-radius-bottomleft:9px; -moz-transition:all 1000ms ease; -webkit-transition:all 1000ms ease; -moz-transition:all 1000ms ease; -o-transition:all 1000ms ease; transition:all 1000ms ease; } #textarea_07:hover { color:#444342; -moz-box-shadow:0px 0px 5px 5px #D4D8D8; -webkit-box-shadow:0px 0px 5px 5px #D4D8D8; box-shadow:0px 0px 5px 5px #D4D8D8; -moz-transition:all .5s cubic-bezier; -webkit-transition:all .5s cubic-bezier; -o-transition:all .5s cubic-bezier; transition:all .5s cubic-bezier; }


HTML code for Text box :

<textarea id="textarea_07" readonly="readonly">
Type your Text or Code Here...
</textarea>

Style 8


#textarea_08 { width:580px; max-width:580px; height:350px; margin-bottom:10px; margin-top:10px; padding:13px; font-size:14px; font-family:Cambria,'Times New Roman','Nimbus Roman No9 L','Freeserif',Times,serif; font-style:normal; color:#596060; background:rgba(54,210,216,0.75); border:2px solid #4B6CCC; -moz-border-radius-bottomright:12px; -moz-border-radius-topleft:12px; -webkit-border-bottom-right-radius:12px; -webkit-border-top-left-radius:12px; border-bottom-right-radius:12px; border-top-left-radius:12px; -moz-transition:all 1s ease-out; -webkit-transition:all 1s ease-out; -o-transition:all 1s ease-out; transition:all 1s ease-out; } #textarea_08:hover { color:#353A3A; background:rgba(54,210,216,0.5); padding:13px; -webkit-box-shadow:inset 0px 0px 10px 10px #61E1E1; -moz-box-shadow:inset 0px 0px 10px 10px #61E1E1; box-shadow:inset 0px 0px 10px 10px #61E1E1; -moz-transition:all .5s ease-in; -webkit-transition:all .5s ease-in; -o-transition:all .5s ease-in; transition:all .5s ease-in; }

HTML code for Text box :

<textarea id="textarea_08" readonly="readonly">
Type your Text or Code Here...
</textarea>

Style 9


#textarea_09 { width:580px; max-width:580px; height:300px; max-height:auto; max-height:62.5em;/* 62.5em = 1000px,adjsut the maximum height of textarea*/ font-family:Cambria,'Times New Roman','Nimbus Roman No9 L','Freeserif',Times,serif; font-style:normal; font-size:14px; margin-top:10px; margin-bottom:10px; padding:12px; line-height:110%; border:2px solid #B24700; background:rgba(161,122,59,0.75); color:#3D3D3D; -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border-top-left-radius:10px; border-top-right-radius:10px; -moz-transition:all 900ms ease-out; -webkit-transition:all 900ms ease-out; -o-transition:all 900ms ease-out; transition:all 900ms ease-out; } #textarea_09:hover { color:#4B463F; background:#BA8E47; -moz-box-shadow:inset 0px 0px 10px 10px #AB854A; -webkit-box-shadow:inset 0px 0px 10px 10px #AB854A; box-shadow:inset 0px 0px 10px 10px #AB854A; -moz-transition:all .4s ease-in; -webkit-transition:all .4s ease-in; -o-transition:all .4s ease-in; transition:all .4s ease-in; }

HTML code for Text box :

<textarea id="textarea_09" readonly="readonly">
Type your Text or Code Here...
</textarea>

Style 10


#textarea_10 { width:580px; max-width:580px; height:200px; max-height:1000px; margin-top:10px; margin-bottom:10px; padding:12px; font-family:Cambria,'Palatino Linotype','Book Antiqua','URW Palladio L',serif; font-size:14px; font-style:normal; line-height:110%; border:2px solid #CC0099; background:rgba(218,88,183,0.75); color:#2A2929; -moz-transition:all 1000ms ease ; -webkit-transition:all 1000ms ease ; -o-transition:all 1000ms ease ; transition:all 1000ms ease ; } #textarea_10:hover { color:#171717; background:rgba(218,88,183,0.5); -moz-box-shadow:inset 0px 0px 10px 10px rgba(244,227,232,0.3); -webkit-box-shadow:inset 0px 0px 10px 10px rgba(244,227,232,0.3); box-shadow:inset 0px 0px 10px 10px rgba(244,227,232,0.3); -moz-transition:all .5s linear .1s; -webkit-transition:all .5s linear .1s; -o-transition:all .5s linear .1s; transition:all .5s linear .1s; } #textarea_10:focus { -webkit-border-bottom-right-radius:64px; -webkit-border-top-left-radius:64px; border-top-left-radius:64px; border-bottom-right-radius:64px; -moz-border-radius-bottomright:64px; -moz-border-radius-topleft:64px; }

HTML code for Text box :

<textarea id="textarea_10" readonly="readonly">
Type your Text or Code Here...
</textarea>

Step 6:  Whenever you want to add the text box to blog post pages/static pages,paste its HTML code given the below of each text box into your source code editor(HTML) where textbox actually appears. .
 If you want to allow users to edit the code in the text box,just remove the readonly="readonly" code.Then type or paste the codes/text instead of  "Type your Text or Code Here...".

Your blog/website can hold multiple text box styles.when you adding the code make sure to add the correct HTML code of CSS of text box. It just differ from others by the Id of it.

Also you can edit the preferences of text box. If you have any question about these text boxes,please feel free to ask me anything via comment or contacting.

Are you like to these Text boxes?which one you most like?I like to hear..

Pengelola Blog : ABDUL WAHAB

Judul : Fancy 10 CSS Text boxes for Websites and Blog
Ditulis oleh : Kejutan Internet pada hari
Rating Blog : 5 dari 5
Terima kasih Anda telah membaca artikel tentang Fancy 10 CSS Text boxes for Websites and Blog
Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman anda.
Namun jangan lupa harap memberikan link aktif dofollow yang mengarah ke URL ini ya
https://kejutaninternet.blogspot.com/2013/07/fancy-10-css-text-boxes-for-websites.html

Dan Terima kasih sekali lagi atas kunjungan Anda.

Kritik dan saran atau apapun bisa anda sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak bisa selalu online selama 24 Jam.


Mau Di Buatkan Blog Siap Pakai Seperti Ini ?.

Artikel Terkait