Tutorial: Buat Border Melengkung - 1

Tutorial: Buat Border Melengkung - 1

السلام عليكم

Alhamdulilah  dapat aku coretkan sesuatu dan kali ini aku  nak buat tutorial untuk korang. Ada yang aku pikir sendiri ada yang aku ceduk kat tempat lain. Yang ni aku try buat sendiri baca-baca coding. Kata

orang try and error.  Sebenarnya ada banyak jenis border tapi yang aku tahu ni ajer. Jom layan dekat bawah ni.

Macam mane nak letak border dekat sidebar korang. Pertama korang kena ikut step ni one by one. Hope fully korang dapat faham tutorial yang aku nak buat nie. 

• korang try pergi dekat login blog ----> dashboard ----> design ----> edit html.

• korang tick [ expand widget templete ].

• tekan control serentak dengan F.

• korang try cari coding code ni, 

h2 { 

OR

 .sidebar .widget {

• kalau dah jumpa korang gantikan h2 { or .sidebar .widget { dengan code dekat bawah nie.

border 1

.sidebar .widget {

text-align:center;

-moz-border-radius:0 0 10px 10px;

-webkit-border-bottom-left-radius: 35px;

-webkit-border-bottom-right-radius: 35px;

background:none repeat scroll 0 0 #cccccc;

padding:5px 10px;

}

35px tu korang boleh gantikan dengan berapa yang korang suka sebab itu adalah untuk lengkung bawah berapa yang korang rase cantik. boleh diubah.

#cccccc tu adalah background sidebar tersebut. korang boleh pilih dekat SINI.

-------------------------------------------------------------------------------------------------------------

• border no dua ni same sahaja cara nak apply macam border satu cuma nanti korang akan dapat perbezaan pada border 2 sebab ada background berlainan di atas.

border 2

.sidebar .widget {

text-align:center;

-moz-border-radius:0 0 10px 10px;

-webkit-border-bottom-left-radius:10px;

-webkit-border-bottom-right-radius:10px;

background:none repeat scroll 0 0 #fff569;

border-top:10px solid #d8d800;

color:#000000;

letter-spacing:0;

margin:0.75em 0;

}

10 px itu adalah lengkung bawah border yang korang boleh tukar ikut rase korang.

#fff569 pula adalah warna background korang. korang boleh cari dekat sini.
solid pula tu korang boleh tukar kepada macam-macam. nak tukar link klik sini.

#d8d800 pula adlah colour untuk border atas yg berlainan tersebut. kgn same dengan background plak. better yang lebih pekat sikit warnanyer.

kira lepas korang gantikan dia akan jadi macam dekat bawah nie.

• kalau dah siap korang preview dahulu. kalau tidak ada error baru korang save templete yer.

SELAMAT MENCUBA