Membuat website blog lebih menarik dengan Rounded Corners

Jan

Membuat website blog lebih menarik dengan Rounded Corners

Thu 2009 at 5:47 am by Yustian M

Kebanyakan dari webiste maupun blog yang beredar internet menerapkan style box pada setiap layout css-nya. Dengan demikian suatu keharusan bagi setiap web designer untuk memanfaatkan dan mempercantik website/blog saat menggunakan style box tersebut. Nah salah satu cara untuk membuat style box layout ini nampak lebih menarik dan menambahkan nilai estetika pada design web adalah dengan menggunakan teknik border radius . Pada umumnya code css yang digunakan untuk membuat rounded corners adalah

-moz-border-radius: 3px;

Berasal dari Mozilla dan digunakan pada Firefox

-khtml-border-radius: 3px;

Berasal dari Linux dan digunakan pada Konqueror

-webkit-border-radius: 3px;

Berasal dari Safari dan digunakan pada untuk mac dan windows

border-radius: 3px;

Dan code diatas hanya merupakan spesifikasi dari standart CSS3. Berikut ini beberapa contoh penerapannya:

Image border

Code CSS:

img.border {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#EEEEEE;
border:1px solid #DDDDDD;
padding:5px; }

Code HTML:

<img class="border" src="thumb.jpg" alt="" width="247" height="92" />

Demo

Source

Full Rounded Corners

Code CSS:

rounded {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#666666;
color:#FFFFFF;
font-weight:bold;
padding:10px; }

Code HTML:

<div class="rounded"&gt; Text </div>

Demo

Source

Border Rounded Corners

Code CSS:

blockquote {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
background-color:#F2F2F2;
border:2px solid #555555;
color:#555555;
font-size:140%;
margin:1em 20px;
padding:10px;
text-align:left; }

Code HTML:

<blockquote>text</blockquote>

Demo

Source

Half Rounded Corners

Code CSS:

green {
-moz-border-radius-bottomright:8px;
-moz-border-radius-topleft:8px;
background-color:#CCFF99;
border:2px solid #66CC00;
color:#666666;
font-size:120%;
font-weight:bold;
padding:8px 10px; }

Code HTML:

<p class="green">Text</p>

Demo

Source

Code di atas hanya berberapa contoh dari begitu banyak yang dapat kita lakukan dengan menggunakan border radius.

Popularity: 31% [?]

code, css, themes, tutorial, web desain, Website

This post was written by:

Yustian M - who has written 49 posts on Yustian Blog.

Artikel ini dapat disebar,dimodifikasi,dicopy dan digunakan sebagaimana semestinya. Dengan menyantumkan nama dan referensi asli. Dan bila ingin berlangganan berita dan artikel diblog ini silahkan Subscribe ke RSS Feed Yustian Blog dan Email Subscription Request

Contact the author

33 Comments For This Post

10 Jan 2009 11:00 am

#156

panca says:

saya masih ingin belajar membuat web atau blog. boleh dong dibagi ilmu dasar membuat web atau blog.

Makasih

10 Jan 2009 11:14 am

#157
Yustian M says:
Silahkan aja mas ikuti dan berlangganan berita blog ini dengan Subscribe ke RSS Feed Yustian Blog dan Email Subscription Request atau Join My Comunnity!

07 Feb 2009 6:38 am

#250

Mahendura says:

Q anak Baru Mas..
Baru Pingin Buat Blog menggunakan Wordpress, Dapet Kesulitan pas Make Custom Field. Mohon Bantuannya Bwat Cara Make N Nempatin Tu Custom Field..
Terima Kasih Sebelumnya

04 Apr 2009 8:05 am

#392
Yustian M says:
Coba mas lihat Disini Semoga dapat membantu

20 Feb 2009 10:01 am

#281

cara membuat website says:

sy pmula dlm mmbuat web

artikel mas sgt membantu….

Terima kasih

04 Apr 2009 8:07 am

#393
Yustian M says:
Semoga apa yang blog ini selalu membantu para pembacanya

20 Feb 2009 2:53 pm

#283

ahmad mustaurid says:

sebelumnya minta maaf nih lagi belajar bikin web, biar tampilan di IE dan fire fox bagus bagaimana caranya????
terima kasih

04 Apr 2009 8:37 am

#394
Yustian M says:
Kayaknya tidak ada yang perlu saya maafkan karena anda belum berbuat salah pada saya tapi salam kenal dulu yah . Biar tampilan di IE dan Firefox nampak sama dan tidak kacau balau banyak trik yang bisa diterapkan tergantung permasalahan tapi yang terpenting ikuti saja standar yang diberikan W3C International Consortium dan tentunya pengalaman yang berbicara disini

06 Mar 2009 1:08 am

#341

Hendra says:

pak yus masih bingung nih apa itu css? kodenya taro dimana ya? boleh kirimin 1 coding lengkapnya ga buat web sederhana jd tau kodenya taro dimana gitu…

thx

04 Apr 2009 9:01 am

#395
Yustian M says:
CSS adalah Cascading Style Sheets dimana penjelasannya dapat di Baca di Wikipedia Dan untuk menghubungkan CSS dengan file HTML dengan menambahkan sebaris kode berikut diantara tag :

<link rel=”stylesheet” href=”style.css”>

Bila ingin contoh lengkapnya silahkan liat di Demo Web yang telah saya buat Disini dan file CSSnya Disni Semoga dapat membantu dalam anda belajar

09 Mar 2009 3:19 pm

#347

a2z says:

kk yuz tolong kasih tau dunk cara menghandle jika ada halaman website yang error atau not_found

tolong yach

thx b4 !!

04 Apr 2009 9:07 am

#396
Yustian M says:
Benerin aja linknya a2z atau mengunakan link checker

31 Mar 2009 1:57 am

#382

tika says:

mat kenal admin,blognya bagus dan menarik semangat para blogger,untuk kemajuan besama.tp alexsa saya masih page Rankings 3.menarik untuk di kunjungi.

04 Apr 2009 9:14 am

#397
Yustian M says:
Semangat blogger. Saya telah kunjungi celiola.co.cc Kayaknya PR anda masih 0 tinggal tunggu aja mas pasti jadi 3 seperti yustian.web.id mendapat PR 3 setelah 4 bulan dan Traffic Alexanya celiola.co.cc 1,284,663.

22 Apr 2009 5:30 pm

#458

Alfajri Alwis says:

Cool! Thanks!

07 May 2009 6:41 pm

#494

fanari says:

wow keren bro, tapi kayaknya mending nunggu draft CSS3 selesai diadopsi deh

08 May 2009 12:51 am

#497
Yustian M says:
Kabarin ya kalau draft CSS3 sudah diadopsi Saya tunggu

20 May 2009 12:26 am

#509

uwiuw says:

wah lumayan nih…tips sederhana tp beguna. jadi ucu bentuk tombolnya

21 May 2009 5:45 pm

#513

ari says:

sore om yus, tolong ajari bikin tampilan judul di header indah hijau kayak gtu dong?heee
thanks, atau buat tutorialnya dong

23 Jun 2009 3:15 pm

#563

zoey says:

boss…gimana caranya membuat target dari artikel ke web..

03 Jul 2009 11:53 am

#607

Nanang says:

wah, keren nih infonya… saya sudah aplikasikan ke blog saya… thanks

22 Jul 2009 8:31 am

#647

Harie_rasta says:

Thanks ya…..atas tutornya

01 Sep 2009 12:50 pm

#681

yuya indou says:

thanks tutorialnya..
aq emg lg butuh infonya..

12 Sep 2009 3:40 pm

#697

Herpulus D.Simamora says:

saya mau buat Website apakah anda bisa membuat web buat saya?

12 Sep 2009 8:12 pm

#707
Yustian M says:
Silahkan Anda kirim ke Email yustianblog@gmail.com untuk melakukan pemesanan pembuatan website yang Anda inginkan!