T10/25/2016

Cara Membuat Css Sisi melengkung dengan Mudah

Pastinya yang ingin membuat template ingin menambah ilmu pengetahuan tentang Css kan?

Cara ini membuat tampilan layout melengkung dengan menambahkan Css lengkungan. Caranya sangat mudah tinggal tambahkan Css di bawah Css aslinya...

Langsung aja hehehe...

1. Contoh aslinya seperti di atas. Css aslinya yaitu :

.header{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
}

2.Dan copy Css di bawah pastikan di bawah Css di atas

border-radius: 15px;

3. Hasilnya akan seperti ini 

.header{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
border-radius: 15px; <- hasil copy-an di step 2 atas
}  

4. Hasilnya akan seperti ini.

Jika Sudah paham step di atas saya kasih bonus merubah lengkungan atas kiri,atas kanan,bawah kiri, bawah kanan

border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0px;

Yang saya beri kuning bisa di ubah efek lingkungannya. Jika 0px hasilnya akan kotak jika 15px atau lebih akan menghasilkan efek lengkungan

Border-radius: 15px 0px;
Hasil :


Border-radius: 0px 15px;
Hasil :


Border-radius: 15px 15px 0px;
Hasil :


Border-radius: 0 15px 15px;
Hasil :


Border-radius: 15px 0 15px;
Hasil :


Border-radius: 0px 0 15px;
Hasil :


Border-radius: 15px 0 0 15px;
Hasil :

Border-radius: 0 15px 15px 0;


Hasil :

Show/Hide Comment

Muat Lebih Banyak
About Author

Menjadi Seorang Blogger Yang Berguna Untuk Orang Lain Dan Tetap Berbagi Ilmu Walau Hanya Sepotong Kata
Follow Me :
Related Article