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,
Ping your blog, website, or RSS feed for Free Web DirectoryMy Ping in TotalPing.comBloggers - Meet Millions of Bloggers
Protected by Copyscape Duplicate Content Check

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

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