translate

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
by : klik

Saturday, 11 May 2013

cara membuat background widget menarik dan keren


cara membuat background widget menarik

---Tepi Kiri Kanan Melengkung,,

Kode:
<div style="-moz-border-radius: 20px 10px 20px 10px; -webkit-border-radius: 20px 10px 20px 10px; background-color: white; border-radius: 20px; border: 2px solid black; box-shadow: 10px 10px 5px #888888; color: black; font-family: Arial; padding: 10px;">
Tepi Kiri Kanan Melengkung</div>

contoh:

Tepi Kiri Kanan Melengkung



--Pojok Kiri Atas Melengkung,,

Kode:
<div style="-moz-border-radius: 1em 0em 0em 0em; background-color: orange; border-radius: 1em 0em 0em 0em; border: 2px solid #000; box-shadow: 10px 10px 5px #888888; color: white; height: auto; margin: 0 auto; overflow: hidden;">
Pojok Kiri Atas Melengkung</div>

contoh:

Pojok Kiri Atas Melengkung



--Pojok Kiri Bawah Melengkung,,

Kode:


<div style="-moz-border-radius: 0em 0em 0em 1em; background-color: green; border-radius: 0em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">
Pojok Kiri Bawah Melengkung</div>

contoh:

Pojok Kiri Bawah Melengkung



--Pojok Kanan Atas Melengkung,,

Kode:


<div style="-moz-border-radius: 0em 1em 0em 0em; background-color: red; border-radius: 0em 1em 0em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">
Pojok Kanan Atas Melengkung</div>

contoh:

Pojok Kanan Atas Melengkung



--Pojok Kanan Bawah Melengkung,,

Kode:


<div style="-moz-border-radius: 0em 0em 1em 0em; background-color: blue; border-radius: 0em 0em 1em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">
Pojok Kanan Bawah Melengkung</div>

contoh:

Pojok Kanan Bawah Melengkung



--Tepi Kiri Melengkung,,

Kode:


<div style="-moz-border-radius: 1em 0em 0em 1em; background-color: gold; border-radius: 1em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">
Tepi Kiri Melengkung</div>

contoh:

Tepi Kiri Melengkung



--Tepi Kanan Melengkung,,

Kode:


(<div style="-moz-border-radius: 1em 0em 0em 1em; background-color: royalblue; border-radius: 1em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">
Tepi Kanan Melengkung</div>

contoh:

Tepi Kanan Melengkung



Untuk membuat tampilan seperti diatas. Anda cukup menambahkan kode-kode yang ada diatas untuk setiap jenis garis border melengkung kedalam artikel gambar di area postingan

Itulah cara membuat garis border melengkung. Untuk tampilan yang lebih dan memiliki keunikan tersendiri, silahkan atur kode-kode berikut yang ada didalam kode diatas

-moz-border-radius: 0em 0em 0em 1em;
border-radius: 0em 0em 0em 1em;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 20px;
background-color: #ccc;
border: 2px solid black;
color: #000;
padding: 5px;

Silahkan ganti dan atur setiap skala (nomer ukuran) yang ada diatas dan lihat hasilnya dengan perubahan yang anda lakukan.

semoga bermanfaat,,,

KLIK UNTUK MELIHAT  TUTORIAL BLOG MENARIK LAINNYA


Posted by: ading shahab blog ading shahab Updated at : 19:30

0 comments:

back to top
back to bottom