Wednesday, October 26, 2011

Tutorial: Tukar bentuk bentuk border



Salam semua!
(^__^)

Kali neh aku nak tunjuk bentuk-bentuk border yang boleh diaplikasikan untuk border post entri, kotak sidebar, post title, sidebar title, date header dan post blockquote. Tapi kene tengok kesesuaiannya la. Jom kita menjelajah.


-moz-border-radius-bottomright: 50px;border-bottom-right-radius: 50px;


-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;


-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 35px;
border-radius: 35px;

border yang di bawah ni contoh yang aku design sendiri dan korang ubah sendiri korang punya design berdasarkan contoh yang diberi. 

contoh 1:

border-left: 5px #000000 solid;
border-right: 5px #000000 solid;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;

nak design sendiri:
5px-ketebalan border
solid- dashed, dotted, double
#000000- code warna. border tu, kalo korang nak ada sebelah tepi kanan atau kiri je, just tukar ketebalan ke 0px sama ada border di sebelah kanan atau kiri.
*erm, aku nak tunjuk pun susah kut kene ubah satu2. korang try la ea. hee*

contoh 2:

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-top-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom: 5px solid #FF1493;
background :#ff99dd;
nak design sendiri:
border- bottom/top/left/right, 5px-ketebalan border, solid-dashed/dotted/double
warna

Macam pening lalat sikit tutorial aku ni kan? Sebelum korang nak tukar border neh, kene faham dulu tutorial Tutorial: Border di sidebar dan Tutorial: Border di kotak entri.



Selamat pening lalat. heee =D

Photobucket

Thanks for your reading love! =D

0 00 orang duk bersembang:

Related Posts Plugin for WordPress, Blogger...