Januari 12, 2012

Mengurangi Pemakaian Sudut Lancip Pada Border

Situseo Blog : Pengunaan sudut lancip pada border sudah mulai berkurang sekarang ini, dengan adanya css3 (border-radius) bentuk lengkung atau tumpul pada border sudah bisa dibuat, penggunaan border dengan bentuk lengkung lebih saya sukai dan saya banyak menggunakan bentuk lengkung ini pada blog.

Selain border, membuat background dengan warna gradient juga sudah bisa dibuat dengan menggunakan css3, seperti pada postingan sebelumnya mengenai Membuat Background Dengan Warna Gradient.

Dibawah ini merupakan beberapa contoh cara membuat border dengan garis lengkung :

Contoh Border 1


BORDER-1

.border-1 {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
border: 2px solid #A89D61;
}

Contoh Border 2


BORDER-2

.border-2 {
-moz-border-radius-topleft: 30px;
-moz-border-radius-bottomright: 30px;
-webkit-border-top-left-radius: 30px;
-webkit-border-bottom-right-radius: 30px;
border: 2px solid #A89D61;
}

Contoh Border 3


CIRCLE

.circle {
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
border: 2px solid #A89D61;
background:#D2CCAD;
width: 150px;
height: 150px;
}

Gantilah bagian warna bagian border sesuai dengan keinginan, untuk mempermudah pencarian warna yang sesuai, kalian bisa pergunakan tools warna pada bagian menu diatas.

Semoga bermanfaat,

6 Diskusi untuk Mengurangi Pemakaian Sudut Lancip Pada Border

28 Februari 2012 06.28  

slamat pagi.trimakasih infonya.

21 April 2012 20.05  

siippp..keren awing berhasil

23 April 2012 17.11  

mau tanya;
cara peletekan script ini bagaimana???
contoh, saya ingin memberi border melengkung di script ini;
bagaimana caranya???, dan harus ditaruh dibagian mana script >>.circle {
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
border: 2px solid #A89D61;
background:#D2CCAD;
width: 150px;
height: 150px;
} <<ini

satu lagi, cara melengkungkan border postingan+warnanya kayak di blog ini bagaiman caranya?

*) maaf kalau banyak tanya, tapi saya sangat membutuhkannya. . .

24 April 2012 00.59  

@Review Situssepertinya script yang dimaksud tidak tampil pada komentar, untuk menampilkan script pada komentar sebaiknya di parse dulu (pergunakan tool parse kode pada menu diatas)

border-radius: 80px; adalah perintah untuk memberi border/garis lengkung sebesar 80px, karena ruangnya sebesar 150x150 maka menghasilkan lengkung yang membentuk lingkaran (titik lengkung saling bertemu) kalau ruangnya diperbesar sebesar (contoh 300x300) akan membentuk lengkung pada ujungnya saja (titik lengkung tidak bertemu)

2. tambahkan kode css ini :
border-radius:...sesuaikan kelengkungan (contoh 15px);

kode css tersebut tambahkan pada :
.post {
.....disini;
}

27 Mei 2012 16.33  

ternyata triknya sederhana
terima kasih telah berbagi

22 Januari 2013 22.01  

masih binggung. tp tuz maju.

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top