Modifikasi Text Area Dengan Border CSS3

Browse » #

Modifikasi Text Area Dengan Border CSS3

5 Comments

Penerapan beberapa border dengan menggunakan css3sebagai text area merupakan suatu yang unik. Hal ini sebenarnya sederhana tapi dapat membuat daya tarik tersendiri. Misalkan anda ingin menampilkan suatu berita atau artikel tertentu dalam posting, maka pilihan untuk menggunakan border yang dirubah menjadi text area patut anda jajal sekali-sekali. Ane yakin ini akan membuat tampilan posting anda mempunyai daya tarik tersendiri. OK gak usah kelamaan ngomongnya...nih langkah langkahnya.

Penerapan Border bisa dipilih dalam dua bagian: border kotak bersudut lancip atau 90 derajat dan border kotak dengan sudut tumpul. pembuatan border ini sebenarnya hapir mirip dengan pembuatan table dalam postingan. Ini hanya memerlukan sedikit kreasi sehingga dapat dimanfaatkan menjadi text area tersendiri. Contohnya bisa anda lihat di bawah ini.

Border kotak sudut lancip atau 90 derajat biasa



WELCOME TO MY WORLD


Border kotak sudut tumpul dengan CSS3



WELCOME TO BLOGONOL WORLD


Setelah di Modifikasi



<center><div style="-moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; background-color: #58acfa; border: 5px solid rgb(230, 141, 58); padding: 10px; width: 34em;">
WELCOME TO BLOGONOL WORLD</div>
</center>



kode ini hanya gabungan dua kode di atas, perhatikan warna merah dan biru. Hanya width:20em diganti mejadi width:20em
<center><div style="-moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; background-color: #58acfa; border: 5px solid rgb(230, 141, 58); padding: 10px; width: 34em;">
<div style="-moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; background-color: #a9f5f2; border: 2px solid rgb(230, 141, 58); padding: 10px; width: 34em;">WELCOME TO BLOGONOL WORLD
</div>
</div>
</center>



<center><div style="-moz-border-radius-bottomright: 30px; -moz-border-radius-topright: 30px; background-color: #f5f6ce; border: 5px solid rgb(185, 227, 95); padding: 10px; width: 34em;">
WELCOME TO BLOGONOL WORLD</div>
</center>



Kolom ini hanya penggabungan dari dua kode di atas tanpa ada perubahan
<center><div style="-moz-border-radius-bottomright: 30px; -moz-border-radius-topright: 30px; background-color: #f5f6ce; border: 5px solid rgb(185, 227, 95); padding: 10px; width: 34em;">
<div style="-moz-border-radius-bottomright: 30px; -moz-border-radius-topright: 30px; background-color: #f5f6ce; border: 5px solid rgb(185, 227, 95); padding: 10px; width: 30em;">
WELCOME TO BLOGONOL WORLD</div>
</div>
</center>


Langkah selanjutnya anda hanya menambahkan scropt pada kode dasar untuk pembentukan kotal text area selanjutnya. contoh kodenya seperti ini.

<center><div style="-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background-color: #cccccc; border: 1px solid rgb(0, 0, 0); padding: 10px; width: 34em;">
WELCOME TO BLOGONOL WORLD</div>
</center>
Warna Merah adalah untuk pembentukan garis lengkung pada kolom, sedangkan warna biru adalah untuk pembentukan border. Silahkan anda ganti dengan kode pada beberapa pilihan yang ada dalam kotak text area di bawah ini.  



-moz-border-radius-bottomright: 30px; -moz-border-radius-topleft: 30px;
dan
border: 5px solid rgb(56, 97, 11);



-moz-border-radius-bottomright: 30px; -moz-border-radius-topleft: 30px;
dan
border: 5px solid rgb(56, 97, 11);



-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
dan
border: 5px ridge rgb(230, 141, 58);



kotak luar 
-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
dan
border: 5px ridge rgb(230, 141, 58);
kotak dalam
-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
dan
border: 5px ridge rgb(230, 141, 58);



Kotak Luar
-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;



Kotak Luar
-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
dan
border: 5px inset rgb(224, 213, 130);
kotak dalam
-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
dan
border: 5px ridge rgb(224, 213, 130);


Selanjutnya Menggunakan image. Kode ini sekaligus dapat anda bikin untuk membingkai image pada posting anda. Contohnya seperti di bawah ini.




 kode dengan image/ gambar
<center><div style="-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background-color: #cccccc; border: 5px outset rgb(206, 212, 36); padding: 10px; width: 34em;"><img src="http://i445.photobucket.com/albums/qq171/etnikprogresif/tghome-1.gif"></img></div>
</center>




Kotak luar
-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
dan
border: 5px outset rgb(206, 212, 36);
kotak luar
-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
dan
border: 5px double rgb(206, 212, 36);


Selanjutnya anda dapat memberi tampilan lain dengan menambahkan kode marquee. Contohnya seperti di bawah ini.




-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
dan
border: 5px double rgb(212, 82, 212);





kotak luar
-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
dan
border: 5px double rgb(212, 82, 212);
kotak dalam
-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
dan
border: 5px double rgb(168, 92, 123); 




kotak luar
-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
dan
border: 5px groove rgb(248, 250, 187);
kotak dalam
-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
dan
border: 5px groove rgb(248, 250, 187);


KETERANGAN

  • Kode Dasar yang di Gunakan
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="400" align="center"> <center><div style="-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background-color: #cccccc; border: 1px solid rgb(0, 0, 0); padding: 10px; width: 34em;">
WELCOME TO BLOGONOL WORLD</div></marquee>
</center>
  • Kode <center> dan penutup </center> agar letak text areanya di tengah. Kalau anda ingin kotaknya terletak di pinggir tinggal hapus saja kode tersebut
  • Kode -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; merupakan kode pembentukan garis lengkung pada kotak, anda tinggal menggantinya dengan salah satu kode yang ada pada beberapa kolom text area di atas. Jika ingin menambah durasi lengkungnya lebih banyak tinggal ganti ukuran pixelnya (px)
  • Kode background-color: #cccccc; adalah warna background text area, silahkan anda ganti dengan warna kesukaan anda. Kalau mau tahu kode warna klik di sini
  • Kode border: 1px solid rgb(0, 0, 0); adalah kode pembentukan warna border. Silahkan ganti angka 0 pada rgb-nya. Kalau bingung silahkan klik di sini dan setting sendir warna anda. Kode rgb-nya terdapat di sebelah kanan preview           
  • Kode width: 20em; adalah ukuran besar kolom text area, silahkan setting sesuai keinginan anda.
  • Ganti tulisan WELCOME TO BLOGONOL WORLD dengan tulisan, kode, image,atau artikel anda.
  • Kode marquee yang cetak tebal silahkan anda atur sendiri. Anda pasti bisa sahabat....siiippp
  • Selamat Berkreasi dan sukses selalu
  • Jangan Lupa Comment yaaa
  • TERIMA KASIH


KEEP SPIRITS AND DO THE BEST 
Mau belajar trick dan tips blogging lengkap dan mudah?... BACA DI SINI

About the Author

author
Blogonol adalah Blog - 0 atau blog kosong dengan konten tutorial blog, seo, widget, template gratis, dan blog info yang dikonsep secara sederhana untuk belajar membangun blog yang lebih baik.