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 {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
border: 2px solid #A89D61;
}
Contoh 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 {
-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,
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
slamat pagi.trimakasih infonya.
siippp..keren awing berhasil
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. . .
@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;
}
ternyata triknya sederhana
terima kasih telah berbagi
masih binggung. tp tuz maju.
Posting Komentar
rate this post
Terima kasih,