Home > Uncategorized > Trik dan tips membuat website blog lebih menarik dengan Rounded Corners

Trik dan tips membuat website blog lebih menarik dengan Rounded Corners

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:

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:

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:

text
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:

Text
Demo Source

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

Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: