Apa itu border radius? Kalau border, pasti sobat tahu kan? Nah, hampir mirip dengan border itu. Border radius merupakan salah satu script CSS. Sedangkam fungsinya yaitu membuat lengkungan pada suatu item Html. Contohnnya, widget blog. Bentuknya kotak, tetapi apabila ditambahi border radius maka pada ujung-ujung kotak widget tersebut akan berubah. Berikut script Border-radius.
Alihkan perhatian ke setiap sudut kotak diatas. Sudut-sudut tersebut tidak lancip, benar kan? Sedikit tumpul. Jumlah ketumpulan tersbut adalah 10px. Jika sobat menambahi nilai 10px menjadi lebih tinggi maka setiap sudut akan semakin tumpul.
Ketumpulan pada SATU (1) sudut saja
Pada gambar diatas, semua sudutnya tumpul. Tetapi, bagaimana caranya agar hanya 1, 2, / 3 sudut saja yang tumpul? Lihat caranya di bawah ini!
Perhatikan.
Selanjutnya sobat coba-coba saja dari keempat angka tersebut dan lihat hasilnya. Ok cukup sampai di sini, semoga bermanfaat.
Source : http://www.blogseno.com/
#nama id widget/yang lainnya {Coba perhatikan pada script berwarna merah. Ya, itulah script border radius. Dari script tersebut, maka hasilnya seperti ini.
border-radius:10px;}
Alihkan perhatian ke setiap sudut kotak diatas. Sudut-sudut tersebut tidak lancip, benar kan? Sedikit tumpul. Jumlah ketumpulan tersbut adalah 10px. Jika sobat menambahi nilai 10px menjadi lebih tinggi maka setiap sudut akan semakin tumpul.
Ketumpulan pada SATU (1) sudut saja
Pada gambar diatas, semua sudutnya tumpul. Tetapi, bagaimana caranya agar hanya 1, 2, / 3 sudut saja yang tumpul? Lihat caranya di bawah ini!
Perhatikan.
Maka hasilnya seperti ini: border-radius: 0px (sudut kanan atas) 10px (sudut kiri atas) 0px (sudut bawah kiri) 10px (Sudut kanan bawah) :
border-radius: 0px 10px 0px 10pxContoh:
Maka hasilnya:
Selanjutnya sobat coba-coba saja dari keempat angka tersebut dan lihat hasilnya. Ok cukup sampai di sini, semoga bermanfaat.
Source : http://www.blogseno.com/
Anda sedang membaca artikel tentang Membuat Border Radius di Blog dan anda bisa menemukan artikel Membuat Border Radius di Blog ini dengan url http://share-tuts.blogspot.com/2012/10/membuat-border-radius-di-blog.html. Anda boleh menyebarluaskan atau mengcopy artikel Membuat Border Radius di Blog ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.
Ingin mempromosikan Blog, Produk, Bisnis, Jualan atau lainnya ? Sobat bisa memasangnya diBlog ini. Tunggu apa lagi mumpung masih ada slot untuk sobat. Silahkan hubungi ane dengan meng-Klik Disini
2 komentar:
Keren juga style Cssnya.Saya agak jarang pakai css untuk sidebar Mas...taku loading jadi lambat.
@Abed Saragih whaha iya sih loading bisa melambat paling cuman beberapa detik aja sob soalnya ini ngga memakai JS
Peraturan Berkomentar :
1. KOMENTAR "PERTAMAXX, KEDUAXX, NICE GAN, NICE SOB" dan sejenisnya akan langsung Share-Tuts hapus
2. Berkomentar sesuai isi postingan.
3. Berkomentar dengan sopan, tidak SARA, kasar/porno.
4. Dilarang SPAM !
5. Dilarang menaruh iklan !
6. Apabila menaruh link hidup maka akan Share-Tuts ganti menjadi link Blog ini !
7. Apabila Anda ingin berkomentar dengan menyertakan link blog, silahkan gunakan profil OpenID.
Posting Komentar