Memang asyik bila kita sudah berhadapan dengan kode css, sebab dengan kode-kode css kita bisa buat efek apa saja seperti : efek rounded corner, text shadow, transform rotate, selector, dan lain-lain. Dan semua itu masih banyak yang belum kita coba. Tapi tak mengapa, masih banyak waktu kita untuk menjelajahi kode css dan efek-efeknya.
OK...!!! Kali ini kita akan mencoba untuk membuat sebuah kotak dengan sudut tumpul atau sering juga di sebut dengan rounded corner. Rounded Corner adalah sebuah efek melengkungkan sebuah garis (border) pada sebuah elemen di web, tentunya hal ini untuk memudahkan kita dalam mendesain web ataupun blog.
Apalagi Rounded Corner ini diberi efek background warna gradasi, pasti akan tambah indah desain web atau blog kita. Tapi untuk efek gradasi akan saya jelaskan pada postingan berikutnya.
Perhatikan sudut-sudut dari garis dibawah ini :
DISINI TEKS ANDA |
DISINI TEKS ANDA |
DISINI TEKS ANDA |
Keterangan :
Warna bisa diubah sesuai selera(-moz-border) dan (webkit-border) bisa anda rubah, semakin kecil nilai "px"nya akan semakin meruncing sudutnya,dan sebaliknya, semakin besar nilai "px"nya akan semakin tumpul sudutnya.
Berikut kode css dari bentuk di atas adalah :
Jadi deh.....
Silahkan anda mencoba,
Semoga bermanfaat ya......
Jangan lupa tinggalin komentarmu lho.....Terima kasih.
Berikut kode css dari bentuk di atas adalah :
<div style="border:#1589FF 3px solid; -moz-border-radius:10px; -webkit-border-radius:10px;"> DISINI TEKS ANDA</div> |
Ingat saran saya :
Gunakan browser versi terbaru yang support CSS3 dan jangan gunakan Internet Explorer, misalnya browser Mozilla Firefox, agar trik ini bisa tampil.Jadi deh.....
Silahkan anda mencoba,
Semoga bermanfaat ya......
Jangan lupa tinggalin komentarmu lho.....Terima kasih.
Silahkan anda lihat yang ini juga :
Mohon bantuannya untuk memperbaiki blog ini.
|
duh ane malah bingung nih gan
BalasHapusThanks triknya gan, sangat membantu.
BalasHapuswlaupun awalnya bingung karna gk bisa di resize, eh ternyata div nya ja yg dikecilin,,,,,
mantapppp gan...