-->


Macam-macam Trik CSS3 Border Radius

Beberapa waktu lalu aku sempet share tentang border blog, tapi tanpa efek. Jadi bordernya lancip di pojoknya. Sekarang pengin berbagi dengan kalian soal trik CSS 3 yang udah populer itu. Sebenernya lumayan gampang seh, cuman bagi awam seperti aku mesti harus belajar mati-matian untuk memahami coding ampe metode penulisan, supaya bisa terbaca di postingan blog. Untuk itu, untuk yang udah paham banget, nggak baca artikel ini juga nggak papa. Bagi yang pengin baca, yuk sekalian belajar bersama. Ni dia langsung aja kita liat ::-->>
Contoh yang border radius dengan gaya border groove kayak begini hasilnya.

Contoh yang border radius dengan gaya border ridge kayak begini hasilnya.

Contoh yang border radius dengan gaya border inset kayak begini hasilnya.

Contoh yang border radius dengan gaya border outset kayak begini hasilnya.

Contoh yang border radius dengan gaya border solid kayak begini hasilnya.

Contoh yang border radius dengan gaya border double kayak begini hasilnya.

Contoh yang border radius dengan gaya border dotted kayak begini hasilnya.

Contoh yang border radius dengan gaya border dashed kayak begini hasilnya.

Penjelasaanya buka Spoiler aja



Seperti kita ketahui, perkembangan dalam dunia webdesign membuat sebagian web master merancang beberapa program untuk mempercantik web maupun blog. Dan salah satu cara itu adalah dengan memberikan CSS 3 yang populer dengan desainnya. Selain itu dengan CSS 3 membuat loading page tidak lola alias lemot, dan trik ini berbeda dengan javascript yang memakan bandwith lumayan gede. Dan salah satu trik itu adalah memberikan radius border sehingga border menjadi melengkung. Lebih asyik khan.

Gambarannya seperti ini ::-->>

border:dotted 10px #000000;
-moz-border-radius: 10px; == agar bisa dibaca di Mozilla
-webkit-border-radius: 10px; == agar bisa dibaca di Safari
border-radius: 10px;

Sehingga jadinya akan seperti ini ::-->>

<div -->> open syntax

style="background:#ffffff; -->> bentuk alas, background

border:dashed 10px #4169E1; -->> jenis, tebal, warna border

-moz-border-radius: 10px; -->> untuk Mozilla

-webkit-border-radius: 10px; -->> untuk Safari

border-radius: 10px; -- kode awal radius

padding:5px; -->> jarak tulisan dan border

margin:20px 20px;"> -->> jarak border dan garis pembatas luar posting

bla bla bla

</div> -->> close syntax

Contohnya ::

<div style="background:#ffffff; border:dashed 10px #4169E1; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; padding:5px; margin:20px 20px;">bla bla bla</div>


Blogger Yang Baek, Meninggalkan Jejak Berupa Komentar

Horeee 1 PertamaX Nongol di sini:

Hamba allah hobby ngeTweet [agi ngeComment]

mantabbe bgt dah blognya..
2 cendol deh...
:10
:10

:10 :11 :12 :13
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45
:46 :47 :48 :49
:50 :51 :52 :53
:54 :55 :56 :57
:58

Jangan lupa ada emo Kaskus diatas CommentBox Ini. Langsung dicoba gan ? Entar ane kasih cendol dah.

Protected by Copyscape Web Plagiarism Software
English French German Spain Italian DutchRussian Portuguese Japanese Korean Arabic Chinese Simplified